Map tilelayer selector

osmno · Nov 19, 2021 · 548f2ee · 548f2ee
1 parent a1fb87b
commit 548f2ee
Showing 2 changed files with 54 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -30,6 +30,12 @@ <h1>OSM Norge progress</h1>
         <option value="n50">N50</option>
       </select>
       <p>Nb: N50 bruker gamle kommunenummer, så kart blir litt feil</p>
+      <label for="map-selector">Chose map</label>
+      <select name="map-selector" id="map-selector">
+        <option value="mapbox-dark" selected>Mapbox dark</option>
+        <option value="carto-light">Carto light</option>
+        <option value="osm-mapnik">OpenStreetMap Mapnik</option>
+      </select>
       <p id="error"></p>
     </div>
 

diff --git a/main.js b/main.js
@@ -8,7 +8,7 @@ L.control
   })
   .addTo(map);
 
-L.tileLayer(
+const mapboxDark = L.tileLayer(
   "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}",
   {
     attribution:
@@ -20,7 +20,26 @@ L.tileLayer(
     accessToken:
       "pk.eyJ1IjoibWF0aGlhc2g5OCIsImEiOiJja3c1ZGx6bmcwZmQyMm5sajJrZGQwdDF5In0.Vw5JcsEGSmSzYTVGzhHPNQ",
   }
-).addTo(map);
+);
+
+const cartoLight = L.tileLayer(
+  "https://{s}.basemaps.cartocdn.com/rastertiles/voyager_labels_under/{z}/{x}/{y}.png",
+  {
+    attribution:
+      'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.carto.com/">carto.com</a>',
+  }
+);
+
+const openStreetMapMapnik = L.tileLayer(
+  "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+  {
+    maxZoom: 19,
+    attribution:
+      '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+  }
+);
+
+mapboxDark.addTo(map);
 
 init();
 
@@ -34,9 +53,34 @@ async function init() {
     handleProgressSelectorChange(e.target.value, kommuneLayer)
   );
 
+  document.getElementById("map-selector").addEventListener("change", (e) => {
+    setTileLayer(e.target.value);
+  });
+
   handleProgressSelectorChange(progressSelectorRef.value, kommuneLayer);
 }
 
+/**
+ *
+ * @param {"mapbox-dark" | "carto-light" | "osm-mapnik"} tileLayer
+ */
+function setTileLayer(tileLayer) {
+  switch (tileLayer) {
+    case "mapbox-dark":
+      mapboxDark.addTo(map);
+      break;
+    case "carto-light":
+      cartoLight.addTo(map);
+      break;
+    case "osm-mapnik":
+      openStreetMapMapnik.addTo(map);
+      break;
+    default:
+      console.error(`${tileLayer} is not supported`);
+      break;
+  }
+}
+
 /**
  *
  * @param {{"building" | "nvdb" | "n50"}} progressToVisualize
@@ -145,12 +189,12 @@ function renderKommuneProgress(
   kommuneLayer.eachLayer((layer) => {
     const kommuneId = layer.feature.properties.kommunenummer;
     const kommune = kommuner[kommuneId] ?? kommuner[Number(kommuneId)];
+
     if (kommune) {
       const progress = kommune.progress;
       layer.feature.properties.progress = progress;
       layer.setStyle({
         fillColor: colorFunction(progress),
-        color: colorFunction(progress),
         fillOpacity: 0.1,
       });
       layer.bindPopup(`
@@ -162,9 +206,7 @@ function renderKommuneProgress(
       </div>
       `);
     } else {
-      console.error(
-        `Could not find kommune with id: ${kommuneId}, length of id: ${kommuneId.length}`
-      );
+      console.error(`Could not find kommune with id: ${kommuneId}`);
     }
   });
 }