diff --git a/website/src/lib/assets/custom/bikerouter-gravel.json b/website/src/lib/assets/custom/bikerouter-gravel.json new file mode 100644 index 00000000..d466cc67 --- /dev/null +++ b/website/src/lib/assets/custom/bikerouter-gravel.json @@ -0,0 +1,1864 @@ +{ + "_info": "Taken from https://github.com/mjaschen/gravel-overlay, with prior authorization from the author (https://github.com/gpxstudio/gpx.studio/issues/32#issuecomment-2320219804).", + "version": 8, + "name": "Gravel Overlay", + "metadata": { + "mapbox:autocomposite": false, + "mapbox:type": "template", + "maputnik:renderer": "mbgljs", + "openmaptiles:version": "3.x", + "openmaptiles:mapbox:owner": "openmaptiles", + "openmaptiles:mapbox:source:url": "mapbox://openmaptiles.4qljc88t" + }, + "sources": { + "openmaptiles": { + "type": "vector", + "url": "https://tiles.bikerouter.de/services/gravel/" + } + }, + "sprite": "https://demotiles.maplibre.org/styles/osm-bright-gl-style/sprite", + "glyphs": "https://api.maptiler.com/fonts/{fontstack}/{range}.pbf?key={key}", + "layers": [ + { + "id": "background", + "type": "background", + "layout": { + "visibility": "none" + }, + "paint": { + "background-color": "rgba(145, 211, 164, 1)" + } + }, + { + "id": "debug_rail", + "type": "line", + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "==", + "$type", + "LineString" + ], + [ + "in", + "class", + "rail" + ] + ], + "layout": { + "visibility": "none" + }, + "paint": { + "line-color": "rgba(144, 144, 144, 1)" + } + }, + { + "id": "debug_road", + "type": "line", + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "==", + "$type", + "LineString" + ], + [ + "in", + "class", + "motorway", + "trunk", + "primary", + "secondary", + "tertiary", + "minor", + "residential", + "track", + "path" + ] + ], + "layout": { + "visibility": "none" + }, + "paint": { + "line-color": "rgba(204, 204, 204, 1)", + "line-width": { + "stops": [ + [ + 10, + 0.5 + ], + [ + 12, + 1 + ] + ] + } + } + }, + { + "id": "tr_X_g45-bg", + "type": "line", + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 10, + "filter": [ + "all", + [ + "==", + [ + "geometry-type" + ], + "LineString" + ], + [ + "match", + [ + "get", + "class" + ], + [ + "track" + ], + true, + false + ], + [ + "any", + [ + "match", + [ + "get", + "tracktype" + ], + [ + "grade5" + ], + true, + false + ], + [ + "all", + [ + "match", + [ + "get", + "tracktype" + ], + [ + "grade4" + ], + true, + false + ], + [ + "match", + [ + "get", + "surface" + ], + [ + "dirt", + "grass", + "mud", + "sand" + ], + true, + false + ] + ] + ] + ], + "layout": { + "line-cap": "square", + "line-join": "bevel", + "visibility": "visible" + }, + "paint": { + "line-color": "rgba(255, 0, 0, 0.7)", + "line-width": { + "base": 1.55, + "stops": [ + [ + 10, + 0.4 + ], + [ + 12, + 1.3 + ], + [ + 14, + 1.7 + ] + ] + }, + "line-dasharray": [ + 1 + ], + "line-offset": { + "stops": [ + [ + 12, + 0 + ], + [ + 13, + 1.8 + ], + [ + 15, + 3 + ], + [ + 16, + 4 + ] + ], + "base": 1.55 + } + } + }, + { + "id": "tr_X_g45", + "type": "line", + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 10, + "filter": [ + "all", + [ + "==", + [ + "geometry-type" + ], + "LineString" + ], + [ + "match", + [ + "get", + "class" + ], + [ + "track" + ], + true, + false + ], + [ + "any", + [ + "match", + [ + "get", + "tracktype" + ], + [ + "grade5" + ], + true, + false + ], + [ + "all", + [ + "match", + [ + "get", + "tracktype" + ], + [ + "grade4" + ], + true, + false + ], + [ + "match", + [ + "get", + "surface" + ], + [ + "dirt", + "grass", + "mud", + "sand" + ], + true, + false + ] + ] + ] + ], + "layout": { + "line-cap": "square", + "line-join": "bevel", + "visibility": "visible" + }, + "paint": { + "line-color": "rgba(255, 255, 0, 0.7)", + "line-width": { + "base": 1.55, + "stops": [ + [ + 10, + 0.4 + ], + [ + 12, + 1.3 + ], + [ + 14, + 1.7 + ] + ] + }, + "line-dasharray": [ + 2, + 2 + ], + "line-offset": { + "stops": [ + [ + 12, + 0 + ], + [ + 13, + 1.8 + ], + [ + 15, + 3 + ], + [ + 16, + 4 + ] + ], + "base": 1.55 + } + } + }, + { + "id": "tr_B_g3", + "type": "line", + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 10, + "filter": [ + "all", + [ + "==", + [ + "geometry-type" + ], + "LineString" + ], + [ + "==", + [ + "get", + "class" + ], + "track" + ], + [ + "match", + [ + "get", + "tracktype" + ], + [ + "grade3" + ], + true, + false + ], + [ + "any", + [ + "match", + [ + "get", + "smoothness" + ], + [ + "bad", + "good", + "intermediate" + ], + true, + false + ], + [ + "match", + [ + "get", + "surface" + ], + [ + "compacted", + "fine_gravel", + "gravel" + ], + true, + false + ] + ] + ], + "layout": { + "line-cap": "butt", + "line-join": "miter", + "visibility": "visible" + }, + "paint": { + "line-color": "rgba(235, 6, 158, 1)", + "line-width": { + "base": 1.55, + "stops": [ + [ + 10, + 0.4 + ], + [ + 12, + 1.3 + ], + [ + 14, + 1.7 + ] + ] + }, + "line-offset": { + "stops": [ + [ + 12, + 0 + ], + [ + 13, + 2 + ], + [ + 15, + 4 + ], + [ + 16, + 5 + ] + ], + "base": 1.55 + }, + "line-dasharray": [ + 3, + 1.5 + ] + } + }, + { + "id": "tr_A_g2-plain-case", + "type": "line", + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 10, + "filter": [ + "all", + [ + "==", + [ + "geometry-type" + ], + "LineString" + ], + [ + "==", + [ + "get", + "class" + ], + "track" + ], + [ + "match", + [ + "get", + "tracktype" + ], + [ + "grade2" + ], + true, + false + ], + [ + "!", + [ + "has", + "surface" + ] + ], + [ + "!", + [ + "has", + "smoothness" + ] + ] + ], + "layout": { + "line-cap": "butt", + "line-join": "miter", + "visibility": "visible" + }, + "paint": { + "line-color": "rgba(255, 255, 255, 0.6)", + "line-width": { + "base": 1.55, + "stops": [ + [ + 10, + 0.8 + ], + [ + 12, + 3 + ], + [ + 14, + 4 + ] + ] + }, + "line-offset": { + "stops": [ + [ + 12, + 0 + ], + [ + 13, + 1.5 + ], + [ + 15, + 3 + ], + [ + 16, + 4 + ] + ], + "base": 1.55 + } + } + }, + { + "id": "tr_A_g2-plain", + "type": "line", + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 10, + "filter": [ + "all", + [ + "==", + [ + "geometry-type" + ], + "LineString" + ], + [ + "==", + [ + "get", + "class" + ], + "track" + ], + [ + "match", + [ + "get", + "tracktype" + ], + [ + "grade2" + ], + true, + false + ], + [ + "!", + [ + "has", + "surface" + ] + ], + [ + "!", + [ + "has", + "smoothness" + ] + ] + ], + "layout": { + "line-cap": "butt", + "line-join": "miter", + "visibility": "visible" + }, + "paint": { + "line-color": "rgba(235, 6, 158, 0.6)", + "line-width": { + "base": 1.55, + "stops": [ + [ + 10, + 0.5 + ], + [ + 12, + 1.5 + ], + [ + 14, + 2 + ] + ] + }, + "line-offset": { + "stops": [ + [ + 12, + 0 + ], + [ + 13, + 1.5 + ], + [ + 15, + 3 + ], + [ + 16, + 4 + ] + ], + "base": 1.55 + }, + "line-dasharray": [ + 5, + 1 + ] + } + }, + { + "id": "tr_A_g2-case", + "type": "line", + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 10, + "filter": [ + "all", + [ + "==", + [ + "geometry-type" + ], + "LineString" + ], + [ + "==", + [ + "get", + "class" + ], + "track" + ], + [ + "match", + [ + "get", + "tracktype" + ], + [ + "grade2" + ], + true, + false + ], + [ + "any", + [ + "match", + [ + "get", + "surface" + ], + [ + "compacted", + "fine_gravel", + "gravel" + ], + true, + false + ], + [ + "match", + [ + "get", + "smoothness" + ], + [ + "bad", + "good", + "intermediate" + ], + true, + false + ] + ] + ], + "layout": { + "line-cap": "butt", + "line-join": "miter", + "visibility": "visible" + }, + "paint": { + "line-color": "rgba(255, 255, 255, 1)", + "line-width": { + "base": 1.55, + "stops": [ + [ + 10, + 0.8 + ], + [ + 12, + 3 + ], + [ + 14, + 4 + ] + ] + }, + "line-offset": { + "stops": [ + [ + 12, + 0 + ], + [ + 13, + 2 + ], + [ + 15, + 4 + ], + [ + 16, + 5 + ] + ], + "base": 1.55 + } + } + }, + { + "id": "tr_A_g2", + "type": "line", + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 10, + "filter": [ + "all", + [ + "==", + [ + "geometry-type" + ], + "LineString" + ], + [ + "==", + [ + "get", + "class" + ], + "track" + ], + [ + "match", + [ + "get", + "tracktype" + ], + [ + "grade2" + ], + true, + false + ], + [ + "any", + [ + "match", + [ + "get", + "surface" + ], + [ + "compacted", + "fine_gravel", + "gravel" + ], + true, + false + ], + [ + "match", + [ + "get", + "smoothness" + ], + [ + "bad", + "good", + "intermediate" + ], + true, + false + ] + ] + ], + "layout": { + "line-cap": "butt", + "line-join": "miter", + "visibility": "visible" + }, + "paint": { + "line-color": "rgba(235, 6, 158, 1)", + "line-width": { + "base": 1.55, + "stops": [ + [ + 10, + 0.5 + ], + [ + 12, + 1.5 + ], + [ + 14, + 2 + ] + ] + }, + "line-offset": { + "stops": [ + [ + 12, + 0 + ], + [ + 13, + 2 + ], + [ + 15, + 4 + ], + [ + 16, + 5 + ] + ], + "base": 1.55 + } + } + }, + { + "id": "p_X-bg", + "type": "line", + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 10, + "filter": [ + "all", + [ + "==", + "$type", + "LineString" + ], + [ + "in", + "class", + "path" + ], + [ + "in", + "smoothness", + "very_bad", + "horrible", + "very_horrible", + "impassable" + ], + [ + "!in", + "tracktype", + "grade5", + "grade4" + ] + ], + "layout": { + "line-cap": "square", + "line-join": "bevel", + "visibility": "visible" + }, + "paint": { + "line-color": "rgba(255, 0, 0, 0.7)", + "line-width": { + "base": 1.55, + "stops": [ + [ + 10, + 0.4 + ], + [ + 12, + 1.1 + ], + [ + 14, + 1.5 + ] + ] + }, + "line-offset": { + "stops": [ + [ + 12, + 0 + ], + [ + 13, + 1.8 + ], + [ + 15, + 3 + ], + [ + 16, + 4 + ] + ], + "base": 1.55 + } + } + }, + { + "id": "p_X", + "type": "line", + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 10, + "filter": [ + "all", + [ + "==", + "$type", + "LineString" + ], + [ + "in", + "class", + "path" + ], + [ + "in", + "smoothness", + "very_bad", + "horrible", + "very_horrible", + "impassable" + ], + [ + "!in", + "tracktype", + "grade5", + "grade4" + ] + ], + "layout": { + "line-cap": "square", + "line-join": "bevel", + "visibility": "visible" + }, + "paint": { + "line-color": "rgba(255, 255, 0, 0.7)", + "line-width": { + "base": 1.55, + "stops": [ + [ + 10, + 0.4 + ], + [ + 12, + 1.1 + ], + [ + 14, + 1.5 + ] + ] + }, + "line-dasharray": [ + 2, + 2 + ], + "line-offset": { + "stops": [ + [ + 12, + 0 + ], + [ + 13, + 1.8 + ], + [ + 15, + 3 + ], + [ + 16, + 4 + ] + ], + "base": 1.55 + } + } + }, + { + "id": "p_B", + "type": "line", + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 10, + "filter": [ + "all", + [ + "==", + "$type", + "LineString" + ], + [ + "==", + "class", + "path" + ], + [ + "in", + "smoothness", + "good", + "intermediate", + "bad" + ], + [ + "!in", + "surface", + "gravel", + "fine_gravel", + "compacted", + "cobblestone", + "sett", + "unhewn_cobblestone", + "paving_stones" + ], + [ + "!in", + "bicycle", + "no" + ], + [ + "!in", + "access", + "no" + ] + ], + "layout": { + "line-cap": "butt", + "line-join": "miter", + "visibility": "visible" + }, + "paint": { + "line-color": "rgba(235, 6, 158, 1)", + "line-width": { + "base": 1.55, + "stops": [ + [ + 10, + 0.4 + ], + [ + 12, + 1.1 + ], + [ + 14, + 1.5 + ] + ] + }, + "line-offset": { + "stops": [ + [ + 12, + 0 + ], + [ + 13, + 2 + ], + [ + 15, + 4 + ], + [ + 16, + 5 + ] + ], + "base": 1.55 + }, + "line-dasharray": [ + 1.5, + 1 + ] + } + }, + { + "id": "p_A-case", + "type": "line", + "metadata": { + "maputnik:comment": "Gravel surface with ok-ish smoothness" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 10, + "filter": [ + "all", + [ + "==", + [ + "geometry-type" + ], + "LineString" + ], + [ + "==", + [ + "get", + "class" + ], + "path" + ], + [ + "any", + [ + "match", + [ + "get", + "surface" + ], + [ + "compacted", + "fine_gravel" + ], + true, + false + ], + [ + "all", + [ + "match", + [ + "get", + "surface" + ], + [ + "gravel" + ], + true, + false + ], + [ + "match", + [ + "get", + "smoothness" + ], + [ + "bad", + "good", + "intermediate" + ], + true, + false + ] + ] + ], + [ + "match", + [ + "get", + "bicycle" + ], + [ + "no" + ], + false, + true + ], + [ + "match", + [ + "get", + "access" + ], + [ + "no" + ], + false, + true + ] + ], + "layout": { + "line-cap": "butt", + "line-join": "miter", + "visibility": "visible" + }, + "paint": { + "line-color": "rgba(255, 255, 255, 1)", + "line-width": { + "base": 1.55, + "stops": [ + [ + 10, + 0.7 + ], + [ + 12, + 2.5 + ], + [ + 14, + 3.2 + ] + ] + }, + "line-offset": { + "stops": [ + [ + 12, + 0 + ], + [ + 13, + 2 + ], + [ + 15, + 4 + ], + [ + 16, + 5 + ] + ], + "base": 1.55 + } + } + }, + { + "id": "p_A", + "type": "line", + "metadata": { + "maputnik:comment": "Gravel surface with ok-ish smoothness" + }, + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 10, + "filter": [ + "all", + [ + "==", + [ + "geometry-type" + ], + "LineString" + ], + [ + "==", + [ + "get", + "class" + ], + "path" + ], + [ + "any", + [ + "match", + [ + "get", + "surface" + ], + [ + "compacted", + "fine_gravel" + ], + true, + false + ], + [ + "all", + [ + "match", + [ + "get", + "surface" + ], + [ + "gravel" + ], + true, + false + ], + [ + "match", + [ + "get", + "smoothness" + ], + [ + "bad", + "good", + "intermediate" + ], + true, + false + ] + ] + ], + [ + "match", + [ + "get", + "bicycle" + ], + [ + "no" + ], + false, + true + ], + [ + "match", + [ + "get", + "access" + ], + [ + "no" + ], + false, + true + ] + ], + "layout": { + "line-cap": "butt", + "line-join": "miter", + "visibility": "visible" + }, + "paint": { + "line-color": "rgba(235, 6, 158, 1)", + "line-width": { + "base": 1.55, + "stops": [ + [ + 10, + 0.5 + ], + [ + 12, + 1.5 + ], + [ + 14, + 2 + ] + ] + }, + "line-offset": { + "stops": [ + [ + 12, + 0 + ], + [ + 13, + 2 + ], + [ + 15, + 4 + ], + [ + 16, + 5 + ] + ], + "base": 1.55 + } + } + }, + { + "id": "r_X_cobbles-case", + "type": "line", + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 10, + "filter": [ + "all", + [ + "==", + "$type", + "LineString" + ], + [ + "in", + "class", + "minor", + "service", + "track", + "path", + "residential" + ], + [ + "in", + "surface", + "sett", + "cobblestone", + "unhewn_cobblestone" + ], + [ + "!in", + "service", + "driveway" + ] + ], + "layout": { + "line-cap": "butt", + "line-join": "miter", + "visibility": "visible" + }, + "paint": { + "line-color": "rgba(0, 0, 0, 1)", + "line-width": { + "base": 1.55, + "stops": [ + [ + 10, + 0.5 + ], + [ + 12, + 1.5 + ], + [ + 14, + 2 + ] + ] + } + } + }, + { + "id": "r_X_cobbles", + "type": "line", + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 10, + "filter": [ + "all", + [ + "==", + "$type", + "LineString" + ], + [ + "in", + "class", + "minor", + "service", + "track", + "path", + "residential" + ], + [ + "in", + "surface", + "sett", + "cobblestone", + "unhewn_cobblestone" + ], + [ + "!in", + "service", + "driveway" + ] + ], + "layout": { + "line-cap": "butt", + "line-join": "miter", + "visibility": "visible" + }, + "paint": { + "line-color": "rgba(245, 255, 0, 1)", + "line-width": { + "base": 1.55, + "stops": [ + [ + 10, + 0.5 + ], + [ + 12, + 1.5 + ], + [ + 14, + 2 + ] + ] + }, + "line-dasharray": [ + 1.5, + 1 + ] + } + }, + { + "id": "r_X-bg", + "type": "line", + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 10, + "filter": [ + "all", + [ + "==", + "$type", + "LineString" + ], + [ + "in", + "class", + "minor" + ], + [ + "in", + "smoothness", + "very_bad", + "horrible", + "very_horrible", + "impassable" + ], + [ + "!in", + "surface", + "sett", + "cobblestone", + "unhewn_cobblestone" + ] + ], + "layout": { + "line-cap": "square", + "line-join": "bevel", + "visibility": "visible" + }, + "paint": { + "line-color": "rgba(255, 0, 0, 0.7)", + "line-width": { + "base": 1.55, + "stops": [ + [ + 10, + 0.4 + ], + [ + 12, + 1.1 + ], + [ + 14, + 1.5 + ] + ] + } + } + }, + { + "id": "r_X", + "type": "line", + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 10, + "filter": [ + "all", + [ + "==", + "$type", + "LineString" + ], + [ + "in", + "class", + "minor" + ], + [ + "in", + "smoothness", + "very_bad", + "horrible", + "very_horrible", + "impassable" + ], + [ + "!in", + "surface", + "sett", + "cobblestone", + "unhewn_cobblestone" + ] + ], + "layout": { + "line-cap": "square", + "line-join": "bevel", + "visibility": "visible" + }, + "paint": { + "line-color": "rgba(255, 255, 0, 0.7)", + "line-width": { + "base": 1.55, + "stops": [ + [ + 10, + 0.4 + ], + [ + 12, + 1.1 + ], + [ + 14, + 1.5 + ] + ] + }, + "line-dasharray": [ + 2, + 2 + ] + } + }, + { + "id": "r_A_case", + "type": "line", + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 10, + "filter": [ + "all", + [ + "==", + "$type", + "LineString" + ], + [ + "in", + "class", + "minor", + "residential", + "service" + ], + [ + "in", + "surface", + "gravel", + "compacted", + "fine_gravel" + ], + [ + "!in", + "service", + "driveway", + "parking_aisle", + "drive-through", + "emergency_access" + ] + ], + "layout": { + "line-cap": "square", + "line-join": "bevel", + "visibility": "visible" + }, + "paint": { + "line-color": "rgba(255, 255, 255, 1)", + "line-width": { + "base": 1.55, + "stops": [ + [ + 10, + 0.8 + ], + [ + 12, + 3 + ], + [ + 14, + 4 + ] + ] + } + } + }, + { + "id": "r_A", + "type": "line", + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 10, + "filter": [ + "all", + [ + "==", + "$type", + "LineString" + ], + [ + "in", + "class", + "minor", + "residential", + "service" + ], + [ + "in", + "surface", + "gravel", + "compacted", + "fine_gravel" + ], + [ + "!in", + "service", + "driveway", + "parking_aisle", + "drive-through", + "emergency_access" + ] + ], + "layout": { + "line-cap": "square", + "line-join": "bevel", + "visibility": "visible" + }, + "paint": { + "line-color": "rgba(235, 6, 158, 1)", + "line-width": { + "base": 1.55, + "stops": [ + [ + 10, + 0.5 + ], + [ + 12, + 1.5 + ], + [ + 14, + 2 + ] + ] + } + } + }, + { + "id": "cemetery", + "type": "symbol", + "source": "openmaptiles", + "source-layer": "landuse", + "filter": [ + "all", + [ + "==", + "class", + "cemetery" + ] + ], + "layout": { + "icon-image": "cemetery_11", + "icon-rotation-alignment": "map", + "icon-size": 1.5 + } + }, + { + "id": "drinking_water", + "type": "symbol", + "source": "openmaptiles", + "source-layer": "poi", + "minzoom": 9, + "maxzoom": 20, + "filter": [ + "any", + [ + "==", + "class", + "drinking_water" + ], + [ + "==", + "subclass", + "drinking_water" + ] + ], + "layout": { + "icon-image": "drinking_water_11", + "visibility": "visible", + "icon-rotation-alignment": "map", + "icon-size": 1.4 + } + } + ], + "id": "basic", + "owner": "Marcus Jaschen" +} \ No newline at end of file diff --git a/website/src/lib/assets/layers.ts b/website/src/lib/assets/layers.ts index a86a4bad..8fd9aa7c 100644 --- a/website/src/lib/assets/layers.ts +++ b/website/src/lib/assets/layers.ts @@ -1,9 +1,9 @@ -import { PUBLIC_MAPBOX_TOKEN } from '$env/static/public'; import { TramFront, Utensils, ShoppingBasket, Droplet, ShowerHead, Fuel, CircleParking, Fence, FerrisWheel, Bed, Mountain, Pickaxe, Store, TrainFront, Bus, Ship, Croissant, House, Tent, Wrench, Binoculars } from 'lucide-static'; -import { type AnySourceData, type Style } from 'mapbox-gl'; +import { type Style } from 'mapbox-gl'; import ignFrTopo from './custom/ign-fr-topo.json'; import ignFrPlan from './custom/ign-fr-plan.json'; import ignFrSatellite from './custom/ign-fr-satellite.json'; +import bikerouterGravel from './custom/bikerouter-gravel.json'; export const basemaps: { [key: string]: string | Style; } = { mapboxOutdoors: 'mapbox://styles/mapbox/outdoors-v12', @@ -255,144 +255,309 @@ export const basemaps: { [key: string]: string | Style; } = { }, }; -export function extendBasemap(basemap: string | Style): string | Style { - if (typeof basemap === 'object') { - basemap["glyphs"] = "mapbox://fonts/mapbox/{fontstack}/{range}.pbf"; - basemap["sprite"] = `https://api.mapbox.com/styles/v1/mapbox/outdoors-v12/sprite?access_token=${PUBLIC_MAPBOX_TOKEN}`; - } - return basemap; -} - -Object.values(basemaps).forEach(extendBasemap); - -export const font: { [key: string]: string; } = { - swisstopoVector: 'Frutiger Neue Condensed Regular', - swisstopoSatellite: 'Frutiger Neue Condensed Regular', -}; - -export const overlays: { [key: string]: AnySourceData; } = { +export const overlays: { [key: string]: string | Style; } = { cyclOSMlite: { - type: 'raster', - tiles: ['https://a.tile-cyclosm.openstreetmap.fr/cyclosm-lite/{z}/{x}/{y}.png', 'https://b.tile-cyclosm.openstreetmap.fr/cyclosm-lite/{z}/{x}/{y}.png', 'https://c.tile-cyclosm.openstreetmap.fr/cyclosm-lite/{z}/{x}/{y}.png'], - tileSize: 256, - maxzoom: 17, - attribution: '© CyclOSM © OpenStreetMap' + version: 8, + sources: { + cyclOSMlite: { + type: 'raster', + tiles: ['https://a.tile-cyclosm.openstreetmap.fr/cyclosm-lite/{z}/{x}/{y}.png', 'https://b.tile-cyclosm.openstreetmap.fr/cyclosm-lite/{z}/{x}/{y}.png', 'https://c.tile-cyclosm.openstreetmap.fr/cyclosm-lite/{z}/{x}/{y}.png'], + tileSize: 256, + maxzoom: 17, + attribution: '© CyclOSM © OpenStreetMap' + } + }, + layers: [{ + id: 'cyclOSMlite', + type: 'raster', + source: 'cyclOSMlite', + }], }, + bikerouterGravel: bikerouterGravel, swisstopoSlope: { - type: 'raster', - tiles: ['https://wmts.geo.admin.ch/1.0.0/ch.swisstopo.hangneigung-ueber_30/default/current/3857/{z}/{x}/{y}.png'], - tileSize: 256, - maxzoom: 17, - attribution: '© swisstopo', + version: 8, + sources: { + swisstopoSlope: { + type: 'raster', + tiles: ['https://wmts.geo.admin.ch/1.0.0/ch.swisstopo.hangneigung-ueber_30/default/current/3857/{z}/{x}/{y}.png'], + tileSize: 256, + maxzoom: 17, + attribution: '© swisstopo', + }, + }, + layers: [{ + id: 'swisstopoSlope', + type: 'raster', + source: 'swisstopoSlope', + }], }, swisstopoHiking: { - type: 'raster', - tiles: ['https://wmts.geo.admin.ch/1.0.0/ch.swisstopo.swisstlm3d-wanderwege/default/current/3857/{z}/{x}/{y}.png'], - tileSize: 256, - maxzoom: 18, - attribution: '© swisstopo' + version: 8, + sources: { + swisstopoHiking: { + type: 'raster', + tiles: ['https://wmts.geo.admin.ch/1.0.0/ch.swisstopo.swisstlm3d-wanderwege/default/current/3857/{z}/{x}/{y}.png'], + tileSize: 256, + maxzoom: 18, + attribution: '© swisstopo' + }, + }, + layers: [{ + id: 'swisstopoHiking', + type: 'raster', + source: 'swisstopoHiking', + }], }, swisstopoHikingClosures: { - type: 'raster', - tiles: ['https://wms.geo.admin.ch/?version=1.3.0&service=WMS&request=GetMap&sld_version=1.1.0&layers=ch.astra.wanderland-sperrungen_umleitungen&format=image/png&STYLE=default&bbox={bbox-epsg-3857}&width=256&height=256&crs=EPSG:3857&transparent=true'], - tileSize: 256, - attribution: '© swisstopo' + version: 8, + sources: { + swisstopoHikingClosures: { + type: 'raster', + tiles: ['https://wms.geo.admin.ch/?version=1.3.0&service=WMS&request=GetMap&sld_version=1.1.0&layers=ch.astra.wanderland-sperrungen_umleitungen&format=image/png&STYLE=default&bbox={bbox-epsg-3857}&width=256&height=256&crs=EPSG:3857&transparent=true'], + tileSize: 256, + attribution: '© swisstopo' + }, + }, + layers: [{ + id: 'swisstopoHikingClosures', + type: 'raster', + source: 'swisstopoHikingClosures', + }], }, swisstopoCycling: { - type: 'raster', - tiles: ['https://wmts.geo.admin.ch/1.0.0/ch.astra.veloland/default/current/3857/{z}/{x}/{y}.png'], - tileSize: 256, - maxzoom: 18, - attribution: '© swisstopo' + version: 8, + sources: { + swisstopoCycling: { + type: 'raster', + tiles: ['https://wmts.geo.admin.ch/1.0.0/ch.astra.veloland/default/current/3857/{z}/{x}/{y}.png'], + tileSize: 256, + maxzoom: 18, + attribution: '© swisstopo' + } + }, + layers: [{ + id: 'swisstopoCycling', + type: 'raster', + source: 'swisstopoCycling', + }], }, swisstopoCyclingClosures: { - type: 'raster', - tiles: ['https://wms.geo.admin.ch/?version=1.3.0&service=WMS&request=GetMap&sld_version=1.1.0&layers=ch.astra.veloland-sperrungen_umleitungen&format=image/png&STYLE=default&bbox={bbox-epsg-3857}&width=256&height=256&crs=EPSG:3857&transparent=true'], - tileSize: 256, - attribution: '© swisstopo' + version: 8, + sources: { + swisstopoCyclingClosures: { + type: 'raster', + tiles: ['https://wms.geo.admin.ch/?version=1.3.0&service=WMS&request=GetMap&sld_version=1.1.0&layers=ch.astra.veloland-sperrungen_umleitungen&format=image/png&STYLE=default&bbox={bbox-epsg-3857}&width=256&height=256&crs=EPSG:3857&transparent=true'], + tileSize: 256, + attribution: '© swisstopo' + } + }, + layers: [{ + id: 'swisstopoCyclingClosures', + type: 'raster', + source: 'swisstopoCyclingClosures', + }], }, swisstopoMountainBike: { - type: 'raster', - tiles: ['https://wmts.geo.admin.ch/1.0.0/ch.astra.mountainbikeland/default/current/3857/{z}/{x}/{y}.png'], - tileSize: 256, - maxzoom: 18, - attribution: '© swisstopo' + version: 8, + sources: { + swisstopoMountainBike: { + type: 'raster', + tiles: ['https://wmts.geo.admin.ch/1.0.0/ch.astra.mountainbikeland/default/current/3857/{z}/{x}/{y}.png'], + tileSize: 256, + maxzoom: 18, + attribution: '© swisstopo' + } + }, + layers: [{ + id: 'swisstopoMountainBike', + type: 'raster', + source: 'swisstopoMountainBike', + }], }, swisstopoMountainBikeClosures: { - type: 'raster', - tiles: ['https://wms.geo.admin.ch/?version=1.3.0&service=WMS&request=GetMap&sld_version=1.1.0&layers=ch.astra.mountainbikeland-sperrungen_umleitungen&format=image/png&STYLE=default&bbox={bbox-epsg-3857}&width=256&height=256&crs=EPSG:3857&transparent=true'], - tileSize: 256, - attribution: '© swisstopo' + version: 8, + sources: { + swisstopoMountainBikeClosures: { + type: 'raster', + tiles: ['https://wms.geo.admin.ch/?version=1.3.0&service=WMS&request=GetMap&sld_version=1.1.0&layers=ch.astra.mountainbikeland-sperrungen_umleitungen&format=image/png&STYLE=default&bbox={bbox-epsg-3857}&width=256&height=256&crs=EPSG:3857&transparent=true'], + tileSize: 256, + attribution: '© swisstopo' + } + }, + layers: [{ + id: 'swisstopoMountainBikeClosures', + type: 'raster', + source: 'swisstopoMountainBikeClosures', + }], }, swisstopoSkiTouring: { - type: 'raster', - tiles: ['https://wmts.geo.admin.ch/1.0.0/ch.swisstopo-karto.skitouren/default/current/3857/{z}/{x}/{y}.png'], - tileSize: 256, - maxzoom: 17, - attribution: '© swisstopo' + version: 8, + sources: { + swisstopoSkiTouring: { + type: 'raster', + tiles: ['https://wmts.geo.admin.ch/1.0.0/ch.swisstopo-karto.skitouren/default/current/3857/{z}/{x}/{y}.png'], + tileSize: 256, + maxzoom: 17, + attribution: '© swisstopo' + } + }, + layers: [{ + id: 'swisstopoSkiTouring', + type: 'raster', + source: 'swisstopoSkiTouring', + }], }, ignFrCadastre: { - type: 'raster', - tiles: ['https://data.geopf.fr/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&TILEMATRIXSET=PM&TILEMATRIX={z}&TILECOL={x}&TILEROW={y}&LAYER=CADASTRALPARCELS.PARCELS&FORMAT=image/png&STYLE=normal'], - tileSize: 256, - maxzoom: 20, - attribution: 'IGN-F/Géoportail' + version: 8, + sources: { + ignFrCadastre: { + type: 'raster', + tiles: ['https://data.geopf.fr/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&TILEMATRIXSET=PM&TILEMATRIX={z}&TILECOL={x}&TILEROW={y}&LAYER=CADASTRALPARCELS.PARCELS&FORMAT=image/png&STYLE=normal'], + tileSize: 256, + maxzoom: 20, + attribution: 'IGN-F/Géoportail' + } + }, + layers: [{ + id: 'ignFrCadastre', + type: 'raster', + source: 'ignFrCadastre', + }], }, ignSlope: { - type: 'raster', - tiles: ['https://data.geopf.fr/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&TileMatrixSet=PM&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&Layer=GEOGRAPHICALGRIDSYSTEMS.SLOPES.MOUNTAIN&FORMAT=image/png&Style=normal'], - tileSize: 256, - maxzoom: 17, - attribution: 'IGN-F/Géoportail' + version: 8, + sources: { + ignSlope: { + type: 'raster', + tiles: ['https://data.geopf.fr/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&TileMatrixSet=PM&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&Layer=GEOGRAPHICALGRIDSYSTEMS.SLOPES.MOUNTAIN&FORMAT=image/png&Style=normal'], + tileSize: 256, + attribution: 'IGN-F/Géoportail' + } + }, + layers: [{ + id: 'ignSlope', + type: 'raster', + source: 'ignSlope', + }], }, ignSkiTouring: { - type: 'raster', - tiles: ['https://data.geopf.fr/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&TileMatrixSet=PM&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&Layer=TRACES.RANDO.HIVERNALE&FORMAT=image/png&Style=normal'], - tileSize: 256, - maxzoom: 16, - attribution: 'IGN-F/Géoportail' + version: 8, + sources: { + ignSkiTouring: { + type: 'raster', + tiles: ['https://data.geopf.fr/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&TileMatrixSet=PM&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&Layer=TRACES.RANDO.HIVERNALE&FORMAT=image/png&Style=normal'], + tileSize: 256, + maxzoom: 16, + attribution: 'IGN-F/Géoportail' + }, + }, + layers: [{ + id: 'ignSkiTouring', + type: 'raster', + source: 'ignSkiTouring', + }], }, waymarkedTrailsHiking: { - type: 'raster', - tiles: ['https://tile.waymarkedtrails.org/hiking/{z}/{x}/{y}.png'], - tileSize: 256, - maxzoom: 18, - attribution: '© Waymarked Trails' + version: 8, + sources: { + waymarkedTrailsHiking: { + type: 'raster', + tiles: ['https://tile.waymarkedtrails.org/hiking/{z}/{x}/{y}.png'], + tileSize: 256, + maxzoom: 18, + attribution: '© Waymarked Trails' + } + }, + layers: [{ + id: 'waymarkedTrailsHiking', + type: 'raster', + source: 'waymarkedTrailsHiking', + }], }, waymarkedTrailsCycling: { - type: 'raster', - tiles: ['https://tile.waymarkedtrails.org/cycling/{z}/{x}/{y}.png'], - tileSize: 256, - maxzoom: 18, - attribution: '© Waymarked Trails' + version: 8, + sources: { + waymarkedTrailsCycling: { + type: 'raster', + tiles: ['https://tile.waymarkedtrails.org/cycling/{z}/{x}/{y}.png'], + tileSize: 256, + maxzoom: 18, + attribution: '© Waymarked Trails' + } + }, + layers: [{ + id: 'waymarkedTrailsCycling', + type: 'raster', + source: 'waymarkedTrailsCycling', + }], }, waymarkedTrailsMTB: { - type: 'raster', - tiles: ['https://tile.waymarkedtrails.org/mtb/{z}/{x}/{y}.png'], - tileSize: 256, - maxzoom: 18, - attribution: '© Waymarked Trails' + version: 8, + sources: { + waymarkedTrailsMTB: { + type: 'raster', + tiles: ['https://tile.waymarkedtrails.org/mtb/{z}/{x}/{y}.png'], + tileSize: 256, + maxzoom: 18, + attribution: '© Waymarked Trails' + } + }, + layers: [{ + id: 'waymarkedTrailsMTB', + type: 'raster', + source: 'waymarkedTrailsMTB', + }], }, waymarkedTrailsSkating: { - type: 'raster', - tiles: ['https://tile.waymarkedtrails.org/skating/{z}/{x}/{y}.png'], - tileSize: 256, - maxzoom: 18, - attribution: '© Waymarked Trails' + version: 8, + sources: { + waymarkedTrailsSkating: { + type: 'raster', + tiles: ['https://tile.waymarkedtrails.org/skating/{z}/{x}/{y}.png'], + tileSize: 256, + maxzoom: 18, + attribution: '© Waymarked Trails' + } + }, + layers: [{ + id: 'waymarkedTrailsSkating', + type: 'raster', + source: 'waymarkedTrailsSkating', + }], }, waymarkedTrailsHorseRiding: { - type: 'raster', - tiles: ['https://tile.waymarkedtrails.org/riding/{z}/{x}/{y}.png'], - tileSize: 256, - maxzoom: 18, - attribution: '© Waymarked Trails' + version: 8, + sources: { + waymarkedTrailsHorseRiding: { + type: 'raster', + tiles: ['https://tile.waymarkedtrails.org/riding/{z}/{x}/{y}.png'], + tileSize: 256, + maxzoom: 18, + attribution: '© Waymarked Trails' + } + }, + layers: [{ + id: 'waymarkedTrailsHorseRiding', + type: 'raster', + source: 'waymarkedTrailsHorseRiding', + }], }, waymarkedTrailsWinter: { - type: 'raster', - tiles: ['https://tile.waymarkedtrails.org/slopes/{z}/{x}/{y}.png'], - tileSize: 256, - maxzoom: 18, - attribution: '© Waymarked Trails' + version: 8, + sources: { + waymarkedTrailsWinter: { + type: 'raster', + tiles: ['https://tile.waymarkedtrails.org/slopes/{z}/{x}/{y}.png'], + tileSize: 256, + maxzoom: 18, + attribution: '© Waymarked Trails' + } + }, + layers: [{ + id: 'waymarkedTrailsWinter', + type: 'raster', + source: 'waymarkedTrailsWinter', + }], }, }; @@ -463,9 +628,6 @@ export const basemapTree: LayerTreeType = { export const overlayTree: LayerTreeType = { overlays: { world: { - cyclOSM: { - cyclOSMlite: true, - }, waymarked_trails: { waymarkedTrailsHiking: true, waymarkedTrailsCycling: true, @@ -473,7 +635,9 @@ export const overlayTree: LayerTreeType = { waymarkedTrailsSkating: true, waymarkedTrailsHorseRiding: true, waymarkedTrailsWinter: true, - } + }, + cyclOSMlite: true, + bikerouterGravel: true, }, countries: { france: { @@ -547,9 +711,6 @@ export const defaultBasemap = 'mapboxOutdoors'; export const defaultOverlays = { overlays: { world: { - cyclOSM: { - cyclOSMlite: false, - }, waymarked_trails: { waymarkedTrailsHiking: false, waymarkedTrailsCycling: false, @@ -557,7 +718,9 @@ export const defaultOverlays = { waymarkedTrailsSkating: false, waymarkedTrailsHorseRiding: false, waymarkedTrailsWinter: false, - } + }, + cyclOSMlite: false, + bikerouterGravel: false, }, countries: { france: { @@ -683,9 +846,6 @@ export const defaultBasemapTree: LayerTreeType = { export const defaultOverlayTree: LayerTreeType = { overlays: { world: { - cyclOSM: { - cyclOSMlite: false, - }, waymarked_trails: { waymarkedTrailsHiking: true, waymarkedTrailsCycling: true, @@ -693,7 +853,9 @@ export const defaultOverlayTree: LayerTreeType = { waymarkedTrailsSkating: false, waymarkedTrailsHorseRiding: false, waymarkedTrailsWinter: false, - } + }, + cyclOSMlite: false, + bikerouterGravel: false, }, countries: { france: { diff --git a/website/src/lib/components/Map.svelte b/website/src/lib/components/Map.svelte index d810117a..e42a7527 100644 --- a/website/src/lib/components/Map.svelte +++ b/website/src/lib/components/Map.svelte @@ -1,331 +1,355 @@
-
-
-

{$_('webgl2_required')}

- -
+
+
+

{$_('webgl2_required')}

+ +
diff --git a/website/src/lib/components/gpx-layer/DistanceMarkers.ts b/website/src/lib/components/gpx-layer/DistanceMarkers.ts index 354710ca..1b663bac 100644 --- a/website/src/lib/components/gpx-layer/DistanceMarkers.ts +++ b/website/src/lib/components/gpx-layer/DistanceMarkers.ts @@ -1,10 +1,9 @@ -import { font } from "$lib/assets/layers"; import { settings } from "$lib/db"; import { gpxStatistics } from "$lib/stores"; import { get } from "svelte/store"; -const { distanceMarkers, distanceUnits, currentBasemap } = settings; +const { distanceMarkers, distanceUnits } = settings; export class DistanceMarkers { map: mapboxgl.Map; @@ -17,7 +16,7 @@ export class DistanceMarkers { this.unsubscribes.push(gpxStatistics.subscribe(this.updateBinded)); this.unsubscribes.push(distanceMarkers.subscribe(this.updateBinded)); this.unsubscribes.push(distanceUnits.subscribe(this.updateBinded)); - this.map.on('style.load', this.updateBinded); + this.map.on('style.import.load', this.updateBinded); } update() { @@ -40,7 +39,7 @@ export class DistanceMarkers { layout: { 'text-field': ['get', 'distance'], 'text-size': 14, - 'text-font': [font[get(currentBasemap)] ?? 'Open Sans Bold'], + 'text-font': ['Open Sans Bold'], 'text-padding': 20, }, paint: { diff --git a/website/src/lib/components/gpx-layer/GPXLayer.ts b/website/src/lib/components/gpx-layer/GPXLayer.ts index 6da90ed7..5b1a39ec 100644 --- a/website/src/lib/components/gpx-layer/GPXLayer.ts +++ b/website/src/lib/components/gpx-layer/GPXLayer.ts @@ -7,7 +7,6 @@ import { addSelectItem, selectItem, selection } from "$lib/components/file-list/ import { ListTrackSegmentItem, ListWaypointItem, ListWaypointsItem, ListTrackItem, ListFileItem, ListRootItem } from "$lib/components/file-list/FileList"; import type { Waypoint } from "gpx"; import { getElevation, resetCursor, setGrabbingCursor, setPointerCursor, setScissorsCursor } from "$lib/utils"; -import { font } from "$lib/assets/layers"; import { selectedWaypoint } from "$lib/components/toolbar/tools/Waypoint.svelte"; import { MapPin, Square } from "lucide-static"; import { getSymbolKey, symbols } from "$lib/assets/symbols"; @@ -66,7 +65,7 @@ function getMarkerForSymbol(symbol: string | undefined, layerColor: string) { `; } -const { directionMarkers, verticalFileView, currentBasemap, defaultOpacity, defaultWeight } = settings; +const { directionMarkers, verticalFileView, defaultOpacity, defaultWeight } = settings; export class GPXLayer { map: mapboxgl.Map; @@ -112,7 +111,7 @@ export class GPXLayer { })); this.draggable = get(currentTool) === Tool.WAYPOINT; - this.map.on('style.load', this.updateBinded); + this.map.on('style.import.load', this.updateBinded); } update() { @@ -170,7 +169,7 @@ export class GPXLayer { 'text-keep-upright': false, 'text-max-angle': 361, 'text-allow-overlap': true, - 'text-font': [font[get(currentBasemap)] ?? 'Open Sans Bold'], + 'text-font': ['Open Sans Bold'], 'symbol-placement': 'line', 'symbol-spacing': 20, }, @@ -294,7 +293,7 @@ export class GPXLayer { updateMap(map: mapboxgl.Map) { this.map = map; - this.map.on('style.load', this.updateBinded); + this.map.on('style.import.load', this.updateBinded); this.update(); } @@ -303,7 +302,7 @@ export class GPXLayer { this.map.off('click', this.fileId, this.layerOnClickBinded); this.map.off('mouseenter', this.fileId, this.layerOnMouseEnterBinded); this.map.off('mouseleave', this.fileId, this.layerOnMouseLeaveBinded); - this.map.off('style.load', this.updateBinded); + this.map.off('style.import.load', this.updateBinded); if (this.map.getLayer(this.fileId + '-direction')) { this.map.removeLayer(this.fileId + '-direction'); diff --git a/website/src/lib/components/layer-control/CustomLayers.svelte b/website/src/lib/components/layer-control/CustomLayers.svelte index 465fb35d..59095b7d 100644 --- a/website/src/lib/components/layer-control/CustomLayers.svelte +++ b/website/src/lib/components/layer-control/CustomLayers.svelte @@ -1,424 +1,427 @@
- {#if $customBasemapOrder.length > 0} -
- - {$_('layers.label.basemaps')} -
- -
-
- {/if} -
- {#each $customBasemapOrder as id (id)} -
- - {$customLayers[id].name} - - -
- {/each} -
- {#if $customOverlayOrder.length > 0} -
- - {$_('layers.label.overlays')} -
- -
-
- {/if} -
- {#each $customOverlayOrder as id (id)} -
- - {$customLayers[id].name} - - -
- {/each} -
+ {#if $customBasemapOrder.length > 0} +
+ + {$_('layers.label.basemaps')} +
+ +
+
+ {/if} +
+ {#each $customBasemapOrder as id (id)} +
+ + {$customLayers[id].name} + + +
+ {/each} +
+ {#if $customOverlayOrder.length > 0} +
+ + {$_('layers.label.overlays')} +
+ +
+
+ {/if} +
+ {#each $customOverlayOrder as id (id)} +
+ + {$customLayers[id].name} + + +
+ {/each} +
- - - - {#if selectedLayerId} - {$_('layers.custom_layers.edit')} - {:else} - {$_('layers.custom_layers.new')} - {/if} - - - -
- - - - {#each tileUrls as url, i} -
- - {#if tileUrls.length > 1} - - {/if} - {#if i === tileUrls.length - 1} - - {/if} -
- {/each} - {#if resourceType === 'raster'} - - - {/if} - - -
- - -
-
- - -
- - {#if selectedLayerId} -
- - -
- {:else} - - {/if} -
- - + + + + {#if selectedLayerId} + {$_('layers.custom_layers.edit')} + {:else} + {$_('layers.custom_layers.new')} + {/if} + + + +
+ + + + {#each tileUrls as url, i} +
+ + {#if tileUrls.length > 1} + + {/if} + {#if i === tileUrls.length - 1} + + {/if} +
+ {/each} + {#if resourceType === 'raster'} + + + {/if} + + +
+ + +
+
+ + +
+ + {#if selectedLayerId} +
+ + +
+ {:else} + + {/if} +
+ +
diff --git a/website/src/lib/components/layer-control/LayerControl.svelte b/website/src/lib/components/layer-control/LayerControl.svelte index 2e03ea9c..57e977ff 100644 --- a/website/src/lib/components/layer-control/LayerControl.svelte +++ b/website/src/lib/components/layer-control/LayerControl.svelte @@ -1,203 +1,219 @@ - -
{ - if (!open) { - cancelEvents = true; - openLayerControl(); - setTimeout(() => { - cancelEvents = false; - }, 500); - } - }} - > - -
- -
-
- -
- -
- {#if $currentOverlays} - - {/if} -
- -
- {#if $currentOverpassQueries} - - {/if} -
-
- -
-
+ +
{ + if (!open) { + cancelEvents = true; + openLayerControl(); + setTimeout(() => { + cancelEvents = false; + }, 500); + } + }} + > + +
+ +
+
+ +
+ +
+ {#if $currentOverlays} + + {/if} +
+ +
+ {#if $currentOverpassQueries} + + {/if} +
+
+ +
+
{ - if (open && !cancelEvents && !container.contains(e.target)) { - closeLayerControl(); - } - }} + on:click={(e) => { + if (open && !cancelEvents && !container.contains(e.target)) { + closeLayerControl(); + } + }} /> diff --git a/website/src/lib/components/layer-control/OverpassLayer.ts b/website/src/lib/components/layer-control/OverpassLayer.ts index f3f9b68b..e9c12f27 100644 --- a/website/src/lib/components/layer-control/OverpassLayer.ts +++ b/website/src/lib/components/layer-control/OverpassLayer.ts @@ -50,7 +50,7 @@ export class OverpassLayer { add() { this.map.on('moveend', this.queryIfNeededBinded); - this.map.on('style.load', this.updateBinded); + this.map.on('style.import.load', this.updateBinded); this.unsubscribes.push(data.subscribe(this.updateBinded)); this.unsubscribes.push(currentOverpassQueries.subscribe(() => { this.updateBinded(); @@ -108,15 +108,19 @@ export class OverpassLayer { remove() { this.map.off('moveend', this.queryIfNeededBinded); - this.map.off('style.load', this.updateBinded); + this.map.off('style.import.load', this.updateBinded); this.unsubscribes.forEach((unsubscribe) => unsubscribe()); - if (this.map.getLayer('overpass')) { - this.map.removeLayer('overpass'); - } + try { + if (this.map.getLayer('overpass')) { + this.map.removeLayer('overpass'); + } - if (this.map.getSource('overpass')) { - this.map.removeSource('overpass'); + if (this.map.getSource('overpass')) { + this.map.removeSource('overpass'); + } + } catch (e) { + // No reliable way to check if the map is ready to remove sources and layers } } diff --git a/website/src/locales/en.json b/website/src/locales/en.json index 3ee8d24c..411bd305 100644 --- a/website/src/locales/en.json +++ b/website/src/locales/en.json @@ -272,6 +272,7 @@ "finlandTopo": "Lantmäteriverket Terrängkarta", "bgMountains": "BGMountains", "usgs": "USGS", + "bikerouterGravel": "bikerouter.de Gravel", "cyclOSMlite": "CyclOSM Lite", "swisstopoSlope": "swisstopo Slope", "swisstopoHiking": "swisstopo Hiking",