use basic basemap

Author: johnarban

src/TempoLite.vue

@@ -1026,35 +1026,28 @@ export default defineComponent({
     zoomHome.addTo(this.map);
     this.addCoastlines();
 
-    // this.basemap = new L.TileLayer.WMS('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
-    //   crs: L.CRS.EPSG4326
-    // }).addTo(this.map as Map);
+    this.basemap = new L.TileLayer.WMS('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
+      crs: L.CRS.EPSG4326
+    }).addTo(this.map as Map);
     
     const labelPane = this.map.createPane("labels");
     labelPane.style.zIndex = "650";
     labelPane.style.pointerEvents = "none";
     
-    this.basemap = L.tileLayer('https://tiles.stadiamaps.com/tiles/stamen_toner_lines/{z}/{x}/{y}{r}.png', {
-      minZoom: 0,
-      maxZoom: 20,
-      attribution: '&copy; <a href="https://www.stadiamaps.com/" target="_blank">Stadia Maps</a> &copy; <a href="https://www.stamen.com/" target="_blank">Stamen Design</a> &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
-      // crs: L.CRS.EPSG4326
-      pane: 'labels'
-    }).addTo(this.map as Map);
-
-    
-
-    // L.tileLayer('https://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png', {
-    //   attribution: 'OpenStreetMap, CartoDB',
+    // this.basemap = L.tileLayer('https://tiles.stadiamaps.com/tiles/stamen_toner_lines/{z}/{x}/{y}{r}.png', {
+    //   minZoom: 0,
+    //   maxZoom: 20,
+    //   attribution: '&copy; <a href="https://www.stadiamaps.com/" target="_blank">Stadia Maps</a> &copy; <a href="https://www.stamen.com/" target="_blank">Stamen Design</a> &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+    //   // crs: L.CRS.EPSG4326
     //   pane: 'labels'
     // }).addTo(this.map as Map);
     
-    L.tileLayer('https://tiles.stadiamaps.com/tiles/stamen_toner_labels/{z}/{x}/{y}{r}.png', {
-      minZoom: 0,
-      maxZoom: 20,
-      attribution: '&copy; <a href="https://www.stadiamaps.com/" target="_blank">Stadia Maps</a> &copy; <a href="https://www.stamen.com/" target="_blank">Stamen Design</a> &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
-      pane: 'labels'
-    }).addTo(this.map as Map);
+    // L.tileLayer('https://tiles.stadiamaps.com/tiles/stamen_toner_labels/{z}/{x}/{y}{r}.png', {
+    //   minZoom: 0,
+    //   maxZoom: 20,
+    //   attribution: '&copy; <a href="https://www.stadiamaps.com/" target="_blank">Stadia Maps</a> &copy; <a href="https://www.stamen.com/" target="_blank">Stamen Design</a> &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+    //   pane: 'labels'
+    // }).addTo(this.map as Map);
     
     this.singleDateSelected = this.uniqueDays[this.uniqueDays.length-1];
     this.imageOverlay.setUrl(this.imageUrl).addTo(this.map as Map);