Switch to maptiler streets style by default and try to detangle zorder

stuff a bit

Streets-v2 looks most understandable as a basemap, even though it is
kind of visually busy. Labels are frequent. Train station icons are
missing for UK.

Author: dabreegster

web/src/common/BasemapPicker.svelte

@@ -8,7 +8,7 @@
   Basemap:
   <select bind:value={$maptilerBasemap}>
     <option value="dataviz">MapTiler Dataviz</option>
-    <option value="streets">MapTiler Streets</option>
+    <option value="streets-v2">MapTiler Streets</option>
     <option value="hybrid">MapTiler Satellite</option>
     <option value="uk-openzoomstack-light">OS Open Zoomstack</option>
   </select>

web/src/common/highlight_roads.ts

@@ -16,7 +16,8 @@ export function getRoadLayerNames(map: Map, mapStyle: string): string[] {
   if (mapStyle == "hybrid") {
     return ["Path", "Road", "Tunnel"].filter((l) => availableLayers.has(l));
   }
-  if (mapStyle == "streets") {
+  // TODO Check if this is true in the new version
+  if (mapStyle == "streets-v2") {
     let layers = [];
     for (let outer of ["road", "bridge", "tunnel"]) {
       for (let inner of [

web/src/common/zorder.ts

@@ -52,21 +52,30 @@ function getBeforeId(layerId: string): string | undefined {
   return beforeId;
 }
 
+// Dummy functions just used for documentation below.
+let streets = (x: string) => x;
+//let satellite = (x: string) => x;
+let dataviz = (x: string) => x;
+//let zoomstack = (x: string) => x;
+
 // All layer IDs used with layerId must be defined here, with later entries
 // drawn on top.
-//
-// This list covers all pages. We should maybe split it.
+
+// TODO The order itself needs to change when the basemap does, because dataviz
+// and zoomstack are mutually incompatible (buildings and 0 restricted road
+// ordering).
+
+// Helpful docs:
+// https://docs.maptiler.com/schema/planet/
+// https://cloud.maptiler.com/maps/streets-v2/
 const layerZorder = [
-  // MapTiler basemap
-  // TODO Handle all basemaps now
-  "Background",
+  streets(dataviz("Background")),
 
-  // TODO These don't show up at low zoom, I think because Residential is hidden
+  // Ferry line starts at zoom 6, so these won't be visible before that -- but
+  // that's fine; a boundary is too small to see before zoom 6 anyway
   "neighbourhood-boundaries",
 
-  // MapTiler basemap
-  // TODO Need to play with what looks best, but this is good enough
-  "Residential",
+  streets("Ferry line"),
 
   "debug-borders",
   "debug-crosses",
@@ -80,8 +89,7 @@ const layerZorder = [
   "shortcuts",
   "shortcuts-focus",
 
-  // MapTiler basemap
-  "Building",
+  dataviz("Building"),
 
   "route-debug-nodes",
   "route-points",
@@ -90,8 +98,8 @@ const layerZorder = [
 
   "one-ways",
 
-  // MapTiler basemap
-  "Road labels",
+  dataviz("Road labels"),
+  streets("road_label"),
 
   "animate-shortcuts",
 

web/src/stores.ts

@@ -39,7 +39,7 @@ export type Mode =
     };
 
 export let map: Writable<Map | null> = writable(null);
-export let maptilerBasemap: Writable<string> = writable("dataviz");
+export let maptilerBasemap: Writable<string> = writable("streets-v2");
 
 export let useLocalVite: Writable<boolean> = writable(false);
 // The exact key in local storage