From 4e56b8bfdcaeb8f446d3a45988fe8ce87aac5b49 Mon Sep 17 00:00:00 2001
From: wkyoshida <wkyoshida.dev@gmail.com>
Date: Sat, 17 Aug 2024 22:48:30 -0300
Subject: [PATCH 1/4] feat(map): Add cycling raster layer from CyclOSM and a
 visibility toggle

---
 frontend/components/media/MediaMap.vue | 31 ++++++++++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/frontend/components/media/MediaMap.vue b/frontend/components/media/MediaMap.vue
index 6c3277096..6f2d8876a 100644
--- 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;
@@ -169,6 +177,13 @@ onMounted(() => {
                 attribution:
                   '<a href="https://www.openstreetmap.org/about" target="_blank">Data &copy; OpenStreetMap contributors</a>',
               },
+              "cycle-raster-tiles": {
+                type: "raster",
+                tiles: ["https://c.tile-cyclosm.openstreetmap.fr/cyclosm-lite/{z}/{x}/{y}.png"],
+                tileSize: 256,
+                attribution:
+                  '<a href="https://www.openstreetmap.org/about" target="_blank">CyclOSM Data &copy; OpenStreetMap contributors</a>',
+              },
             },
             layers: [
               {
@@ -180,12 +195,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 +329,8 @@ onMounted(() => {
                 div.innerHTML = currentProfile;
 
                 const updateSelectedProfile = () => {
+                  toggleLayerHandler(map);
+
                   directions.destroy();
                   div.innerHTML = routeProfileHandler();
 

From 36666cb4c16f14ed635e2679a3ba8699ebf45cc9 Mon Sep 17 00:00:00 2001
From: wkyoshida <wkyoshida.dev@gmail.com>
Date: Sun, 18 Aug 2024 23:19:09 -0300
Subject: [PATCH 2/4] lint(map): fix formatting for 4e56b8b changes to
 MediaMap.vue

---
 frontend/components/media/MediaMap.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/components/media/MediaMap.vue b/frontend/components/media/MediaMap.vue
index 6f2d8876a..89fd32cfb 100644
--- a/frontend/components/media/MediaMap.vue
+++ b/frontend/components/media/MediaMap.vue
@@ -126,7 +126,7 @@ const mapProfile = (profile: string) => {
 
 let selectedRoute = mapProfile(routeProfileOptions.FOOT);
 
-const toggleLayerHandler = (map : Map) => {
+const toggleLayerHandler = (map: Map) => {
   if (currentProfile === walkingRouteProfileControl) {
     map.setLayoutProperty("cycle-layer", "visibility", "visible");
   } else {
@@ -179,7 +179,9 @@ onMounted(() => {
               },
               "cycle-raster-tiles": {
                 type: "raster",
-                tiles: ["https://c.tile-cyclosm.openstreetmap.fr/cyclosm-lite/{z}/{x}/{y}.png"],
+                tiles: [
+                  "https://c.tile-cyclosm.openstreetmap.fr/cyclosm-lite/{z}/{x}/{y}.png",
+                ],
                 tileSize: 256,
                 attribution:
                   '<a href="https://www.openstreetmap.org/about" target="_blank">CyclOSM Data &copy; OpenStreetMap contributors</a>',
@@ -208,7 +210,7 @@ onMounted(() => {
                 minzoom: 0,
                 maxzoom: 20,
                 layout: {
-                    visibility: "none"
+                  visibility: "none",
                 },
               },
             ],

From 7282d5f450f3a96a2be3682daa5b58dac6a77f4f Mon Sep 17 00:00:00 2001
From: wkyoshida <wkyoshida.dev@gmail.com>
Date: Mon, 19 Aug 2024 22:41:16 -0300
Subject: [PATCH 3/4] refac(map): Add other CyclOSM urls to spread requests
 between subdomains

---
 frontend/components/media/MediaMap.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/components/media/MediaMap.vue b/frontend/components/media/MediaMap.vue
index 89fd32cfb..ad48d6822 100644
--- a/frontend/components/media/MediaMap.vue
+++ b/frontend/components/media/MediaMap.vue
@@ -180,6 +180,8 @@ onMounted(() => {
               "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,

From 462d1ee7792905f0cc0fa3cded6c715251055904 Mon Sep 17 00:00:00 2001
From: wkyoshida <wkyoshida.dev@gmail.com>
Date: Sat, 24 Aug 2024 21:11:27 -0300
Subject: [PATCH 4/4] fix(map): Update attribution with more references and
 link to copyright

---
 frontend/components/media/MediaMap.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/components/media/MediaMap.vue b/frontend/components/media/MediaMap.vue
index ad48d6822..053bffb30 100644
--- a/frontend/components/media/MediaMap.vue
+++ b/frontend/components/media/MediaMap.vue
@@ -175,7 +175,7 @@ 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",
@@ -186,7 +186,7 @@ onMounted(() => {
                 ],
                 tileSize: 256,
                 attribution:
-                  '<a href="https://www.openstreetmap.org/about" target="_blank">CyclOSM Data &copy; OpenStreetMap contributors</a>',
+                  '<a href="https://www.cyclosm.org" target="_blank">CyclOSM</a> tiles hosted by <a href="https://openstreetmap.fr" target="_blank">OpenStreetMap France</a>',
               },
             },
             layers: [