Split street map into two layers with custom styles

We replace the stock map styles with two custom styles applied as two separate layers. The first shows the streets and water, and goes under the pollution layer. The second shows place names and goes on top of the pollution layer.

This approach makes the map much more readable.

The appearance of these styles can be managed at https://cloud.maptiler.com/maps/

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() {