Merge pull request activist-org#949 from wkyoshida/718

feat(map): Add cycling raster layer from CyclOSM and a visibility toggle
aasimsyed · Aug 30, 2024 · a3f52b8 · a3f52b8
2 parents 2f027b2 + 859005f
commit a3f52b8
Showing 1 changed file with 34 additions and 3 deletions.
diff --git a/frontend/components/media/MediaMap.vue b/frontend/components/media/MediaMap.vue
@@ -9,7 +9,7 @@
 import MapLibreGlDirections, {
   layersFactory,
 } from "@maplibre/maplibre-gl-directions";
-import maplibregl from "maplibre-gl";
+import maplibregl, { Map } from "maplibre-gl";
 import "maplibre-gl/dist/maplibre-gl.css";
 
 const props = defineProps<{
@@ -126,6 +126,14 @@ const mapProfile = (profile: string) => {
 
 let selectedRoute = mapProfile(routeProfileOptions.FOOT);
 
+const toggleLayerHandler = (map: Map) => {
+  if (currentProfile === walkingRouteProfileControl) {
+    map.setLayoutProperty("cycle-layer", "visibility", "visible");
+  } else {
+    map.setLayoutProperty("cycle-layer", "visibility", "none");
+  }
+};
+
 const routeProfileHandler = () => {
   if (currentProfile === walkingRouteProfileControl) {
     currentProfile = bikeRouteProfileControl;
@@ -167,7 +175,18 @@ onMounted(() => {
                 tiles: ["https://tile.openstreetmap.org/{z}/{x}/{y}.png"],
                 tileSize: 256,
                 attribution:
-                  '<a href="https://www.openstreetmap.org/about" target="_blank">Data &copy; OpenStreetMap contributors</a>',
+                  '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>',
+              },
+              "cycle-raster-tiles": {
+                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,
+                attribution:
+                  '<a href="https://www.cyclosm.org" target="_blank">CyclOSM</a> tiles hosted by <a href="https://openstreetmap.fr" target="_blank">OpenStreetMap France</a>',
               },
             },
             layers: [
@@ -180,12 +199,22 @@ onMounted(() => {
                 },
               },
               {
-                id: "simple-tiles",
+                id: "default-layer",
                 type: "raster",
                 source: "raster-tiles",
                 minzoom: 0,
                 maxzoom: 24,
               },
+              {
+                id: "cycle-layer",
+                type: "raster",
+                source: "cycle-raster-tiles",
+                minzoom: 0,
+                maxzoom: 20,
+                layout: {
+                  visibility: "none",
+                },
+              },
             ],
           },
           center: [parseFloat(location["lon"]), parseFloat(location["lat"])],
@@ -304,6 +333,8 @@ onMounted(() => {
                 div.innerHTML = currentProfile;
 
                 const updateSelectedProfile = () => {
+                  toggleLayerHandler(map);
+
                   directions.destroy();
                   div.innerHTML = routeProfileHandler();