change mapping provider

Author: drkane

findthatpostcode/templates/merge-geojson.html.j2

@@ -62,22 +62,24 @@
       files</button>
   </div>
   <div class="w-100 w-60-l pl3 fl">
-    <l-map v-if="result.features.length" style="height: 500px; width: 100%" :bounds="bounds">
+    <l-map ref="resultMap" style="height: 500px; width: 100%" :bounds="bounds"
+      :style="{ opacity: result.features.length ? 1 : 0 }">
       <l-geo-json :geojson="result"></l-geo-json>
-      <l-tile-layer url="https://tiles.stadiamaps.com/tiles/stamen_terrain/{z}/{x}/{y}{r}.png"
-        :attribution="attribution" />
     </l-map>
   </div>
 </div>
 {% endblock %}
 
 {% block headscripts %}
 <link rel="stylesheet" href="{{ url_for('static', filename='lib/leaflet/leaflet.css' )}}" />
+<link rel="stylesheet" href="{{ url_for('static', filename='lib/maplibre/maplibre-gl.css' )}}" />
 {% endblock %}
 
 {% block bodyscripts %}
 <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
 <script src="{{ url_for('static', filename='lib/leaflet/leaflet.js' )}}"></script>
+<script src="{{ url_for('static', filename='lib/maplibre/maplibre-gl.js' )}}"></script>
+<script type="text/javascript" src="{{ url_for('static', filename='lib/maplibre/leaflet-maplibre-gl.js') }}"></script>
 <script src="//unpkg.com/vue2-leaflet"></script>
 <script>
   Vue.component('l-map', window.Vue2Leaflet.LMap);
@@ -95,8 +97,6 @@
       filename: 'mergedfile',
       enableTooltip: true,
       bounds: [[-90, -180], [90, 180]],
-      attribution:
-        '&copy; <a href="https://stadiamaps.com/" target="_blank">Stadia Maps</a> <a href="https://www.stamen.com/" target="_blank">&copy; Stamen Design</a> &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/about" target="_blank">OpenStreetMap</a> contributors',
     },
     watch: {
       'files': function () {
@@ -144,7 +144,18 @@
       clearFiles() {
         this.files = [];
       },
-    }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        L.maplibreGL({
+          style: 'https://tiles.openfreemap.org/styles/positron',
+          attribution: `
+            <a href="https://openfreemap.org" target="_blank">OpenFreeMap</a> 
+            <a href="https://www.openmaptiles.org/" target="_blank">&copy; OpenMapTiles</a> 
+            Data from <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>`,
+        }).addTo(this.$refs.resultMap.mapObject);
+      });
+    },
   });
 </script>
 {% endblock %}

findthatpostcode/templates/reduce-geojson.html.j2

@@ -64,22 +64,24 @@
     </template>
   </div>
   <div class="w-100 w-60-l pl3 fl">
-    <l-map v-if="result.features.length" style="height: 500px; width: 100%" :bounds="bounds">
+    <l-map ref="resultMap" style="height: 500px; width: 100%" :bounds="bounds"
+      :style="{ opacity: result.features.length ? 1 : 0 }">
       <l-geo-json :geojson="result"></l-geo-json>
-      <l-tile-layer url="https://tiles.stadiamaps.com/tiles/stamen_terrain/{z}/{x}/{y}{r}.png"
-        :attribution="attribution" />
     </l-map>
   </div>
 </div>
 {% endblock %}
 
 {% block headscripts %}
 <link rel="stylesheet" href="{{ url_for('static', filename='lib/leaflet/leaflet.css' )}}" />
+<link rel="stylesheet" href="{{ url_for('static', filename='lib/maplibre/maplibre-gl.css' )}}" />
 {% endblock %}
 
 {% block bodyscripts %}
 <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
 <script src="{{ url_for('static', filename='lib/leaflet/leaflet.js' )}}"></script>
+<script src="{{ url_for('static', filename='lib/maplibre/maplibre-gl.js' )}}"></script>
+<script type="text/javascript" src="{{ url_for('static', filename='lib/maplibre/leaflet-maplibre-gl.js') }}"></script>
 <script src="//unpkg.com/vue2-leaflet"></script>
 <script>
   // recursively round all coordinates in a javascript array
@@ -110,8 +112,6 @@
       filename: 'mergedfile',
       enableTooltip: true,
       bounds: [[-90, -180], [90, 180]],
-      attribution:
-        '&copy; <a href="https://stadiamaps.com/" target="_blank">Stadia Maps</a> <a href="https://www.stamen.com/" target="_blank">&copy; Stamen Design</a> &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/about" target="_blank">OpenStreetMap</a> contributors',
     },
     watch: {
       'file': function () {
@@ -201,7 +201,18 @@
         link.click();
         URL.revokeObjectURL(link.href);
       },
-    }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        L.maplibreGL({
+          style: 'https://tiles.openfreemap.org/styles/positron',
+          attribution: `
+            <a href="https://openfreemap.org" target="_blank">OpenFreeMap</a> 
+            <a href="https://www.openmaptiles.org/" target="_blank">&copy; OpenMapTiles</a> 
+            Data from <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>`,
+        }).addTo(this.$refs.resultMap.mapObject);
+      });
+    },
   });
 </script>
 {% endblock %}