|
| 1 | +import { map as mapStore } from "../stores"; |
| 2 | +import { get } from "svelte/store"; |
| 3 | + |
| 4 | +interface LayerProps { |
| 5 | + id: string; |
| 6 | + beforeId: string | undefined; |
| 7 | +} |
| 8 | + |
| 9 | +// Use this helper for every svelte-maplibre layer component. It sets the layer |
| 10 | +// ID, beforeId (for z-ordering between layers), and defaults to only using the |
| 11 | +// top-most layer for hovering/clicking. |
| 12 | +export function layerId(layerId: string): LayerProps { |
| 13 | + return { |
| 14 | + id: layerId, |
| 15 | + beforeId: getBeforeId(layerId), |
| 16 | + }; |
| 17 | +} |
| 18 | + |
| 19 | +// Calculates the beforeId for adding a layer. Due to hot-module reloading and |
| 20 | +// Svelte component initialization order being unpredictable, callers might add |
| 21 | +// layers in any order. Use beforeId to guarantee the layers wind up in an |
| 22 | +// explicitly defined order. |
| 23 | +function getBeforeId(layerId: string): string | undefined { |
| 24 | + let map = get(mapStore); |
| 25 | + if (!map) { |
| 26 | + console.warn( |
| 27 | + `getBeforeId(${layerId}) called before map is ready. Z-ordering may be incorrect.`, |
| 28 | + ); |
| 29 | + return undefined; |
| 30 | + } |
| 31 | + |
| 32 | + // Find the last layer currently in the map that should be on top of this new |
| 33 | + // layer. |
| 34 | + let beforeId = undefined; |
| 35 | + let found = false; |
| 36 | + for (let i = layerZorder.length - 1; i >= 0; i--) { |
| 37 | + let id = layerZorder[i]; |
| 38 | + if (id == layerId) { |
| 39 | + found = true; |
| 40 | + break; |
| 41 | + } |
| 42 | + if (map.getLayer(id)) { |
| 43 | + beforeId = id; |
| 44 | + } |
| 45 | + } |
| 46 | + // When adding a new layer somewhere, force the programmer to decide where it |
| 47 | + // should be z-ordered. |
| 48 | + if (!found) { |
| 49 | + throw new Error(`Layer ID ${layerId} not defined in layerZorder`); |
| 50 | + } |
| 51 | + // If beforeId isn't set, we'll add the layer on top of everything else. |
| 52 | + return beforeId; |
| 53 | +} |
| 54 | + |
| 55 | +// All layer IDs used with layerId must be defined here, with later entries |
| 56 | +// drawn on top. |
| 57 | +// |
| 58 | +// This list covers all pages. We should maybe split it. |
| 59 | +const layerZorder = [ |
| 60 | + // MapTiler basemap |
| 61 | + "Background", |
| 62 | + |
| 63 | + "neighbourhood-boundaries", |
| 64 | + |
| 65 | + // MapTiler basemap |
| 66 | + // TODO Need to play with what looks best, but this is good enough |
| 67 | + "Residential", |
| 68 | + |
| 69 | + "debug-borders", |
| 70 | + "debug-crosses", |
| 71 | + "debug-filters", |
| 72 | + |
| 73 | + "cells", |
| 74 | + "interior-roads", |
| 75 | + |
| 76 | + "compare-route", |
| 77 | + |
| 78 | + "shortcuts", |
| 79 | + "shortcuts-focus", |
| 80 | + |
| 81 | + // MapTiler basemap |
| 82 | + "Building", |
| 83 | + |
| 84 | + "route-points", |
| 85 | + "route-lines", |
| 86 | + "route-polygons", |
| 87 | + |
| 88 | + // MapTiler basemap |
| 89 | + "Road labels", |
| 90 | + |
| 91 | + "modal-filters", |
| 92 | + |
| 93 | + "boundary", |
| 94 | + |
| 95 | + "freehand-line", |
| 96 | + |
| 97 | + "edit-polygon-fill", |
| 98 | + "edit-polygon-lines", |
| 99 | + "edit-polygon-vertices", |
| 100 | +]; |
0 commit comments