Merge pull request #109 from dxw/map-styles

Split street map into two layers with custom styles
dxw · Nov 15, 2024 · c0f1be0 · c0f1be0
2 parents 4937404 + e441edb
commit c0f1be0
Showing 1 changed file with 14 additions and 26 deletions.
diff --git a/app/javascript/controllers/map_controller.js b/app/javascript/controllers/map_controller.js
@@ -32,29 +32,21 @@ export default class MapController extends Controller {
 
     this.addSearchControl();
 
+    // Ordered from bottom to top
     this.map.createPane("street-map");
     this.addStreetMapLayer();
 
     this.map.createPane("pollution");
     this.map.getPane("pollution").style.opacity = 0.6;
     this.addPollutionLayer();
 
+    this.map.createPane("place-names");
+    this.addPlaceNamesLayer();
+
     this.map.createPane("zones");
     this.addZonesLayer();
   }
 
-  addStreetMapLayer() {
-    const { tonerLite, basicLight, streetsPastel } = this.streetMaps();
-    this.map.addLayer(basicLight);
-
-    const streetMaps = {
-      TonerLite: tonerLite,
-      BasicLight: basicLight,
-      StreetsPastel: streetsPastel,
-    };
-    L.control.layers(streetMaps, null, { collapsed: false }).addTo(this.map);
-  }
-
   addSearchControl() {
     L.control
       .maptilerGeocoding({
@@ -81,26 +73,22 @@ export default class MapController extends Controller {
       .addTo(this.map);
   }
 
-  streetMaps() {
-    const tonerLite = new L.MaptilerLayer({
-      apiKey: this.settings.maptilerApiKey,
-      style: "toner-v2-lite",
-      pane: "street-map",
-    });
-
-    const basicLight = new L.MaptilerLayer({
+  addStreetMapLayer() {
+    const streetMap = new L.MaptilerLayer({
       apiKey: this.settings.maptilerApiKey,
-      style: "basic-v2-light",
+      style: "13be04a7-d035-45cd-b5cf-6c0c50fdf6a8",
       pane: "street-map",
     });
+    this.map.addLayer(streetMap);
+  }
 
-    const streetsPastel = new L.MaptilerLayer({
+  addPlaceNamesLayer() {
+    const placeNames = new L.MaptilerLayer({
       apiKey: this.settings.maptilerApiKey,
-      style: "streets-v2-pastel",
-      pane: "street-map",
+      style: "1cc6214b-0f45-4e3d-a5bc-8e81b82cca7a",
+      pane: "place-names",
     });
-
-    return { tonerLite, basicLight, streetsPastel };
+    this.map.addLayer(placeNames);
   }
 
   addPollutionLayer() {