From a84ac82895f5f887bb39840dbe3278e6c009b779 Mon Sep 17 00:00:00 2001
From: Rabel Mervin <rabelmervin@gmail.com>
Date: Thu, 13 Jun 2024 18:10:25 +0530
Subject: [PATCH 1/2] direction arrow added

---
 frontend/components/media/MediaMap.vue    |  52 +++++++++++++++++++++-
 frontend/public/icons/direction-arrow.png | Bin 0 -> 234 bytes
 2 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 frontend/public/icons/direction-arrow.png

diff --git a/frontend/components/media/MediaMap.vue b/frontend/components/media/MediaMap.vue
index 0ef79c08d..794bac4f6 100644
--- a/frontend/components/media/MediaMap.vue
+++ b/frontend/components/media/MediaMap.vue
@@ -1,3 +1,5 @@
+
+
 <template>
   <div
     id="map"
@@ -6,10 +8,15 @@
 </template>
 
 <script setup lang="ts">
+
+import { onMounted } from 'vue';
+import { useI18n } from "vue-i18n";
+import maplibregl from 'maplibre-gl';
+import direction-arrow from "frontend/public/icons/direction-arrow.png";
+import { useColorMode } from '@vueuse/core';
 import MapLibreGlDirections, {
   layersFactory,
 } from "@maplibre/maplibre-gl-directions";
-import maplibregl from "maplibre-gl";
 import "maplibre-gl/dist/maplibre-gl.css";
 
 const props = defineProps<{
@@ -21,6 +28,8 @@ const props = defineProps<{
 const i18n = useI18n();
 const colorMode = useColorMode();
 
+
+
 const isTouchDevice =
   // `maxTouchPoints` isn't recognized by TS. Safe to ignore.
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -76,7 +85,8 @@ onMounted(() => {
                 type: "background",
                 paint: {
                   "background-color":
-                    colorMode.preference == "dark" ? "#131316" : "#F6F8FA",
+                    
+                  colorMode.value == "dark" ? "#131316" : "#F6F8FA",
                 },
               },
               {
@@ -108,6 +118,44 @@ onMounted(() => {
             trackUserLocation: true,
           })
         );
+        map.loadImage(direction-arrow).then((image) => {}
+        if (image) {
+          map.addImage("direction-arrow", image.data);
+        }
+      });
+
+      const layers = layersFactory();
+      layers.push({
+        id : "maplibre-gl-directions-routeline-direction-arrow",
+        type : "symbol",
+        source : "maplibre-gl-directions",
+        layout: {
+          "symbol-placement" : "line-center",
+          "icon-image" : "direction-arrow",
+          "icon-size" : ["interpolate",["exponential",1.5],["zoom"], 12, 0.85, 18, 1.4],
+        },
+
+        paint: {
+        "icon-opacity": 0.5,
+      },
+      filter: ["==", ["get", "route"], "SELECTED"],
+    });
+
+    map.on("load", () => {
+      directions = new MapLibreGlDirections(map, {
+        requestOptions: {
+          alternatives: "true",
+        },
+        layers,
+      });
+
+      directions.interactive = true;
+    });
+  });
+
+
+
+      })
 
         const popup = new maplibregl.Popup({
           offset: 25,
diff --git a/frontend/public/icons/direction-arrow.png b/frontend/public/icons/direction-arrow.png
new file mode 100644
index 0000000000000000000000000000000000000000..308cf3b9d983650579c08f0c9bce08d77ff01a0b
GIT binary patch
literal 234
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`jKx9jP7LeL$-D$|mUy~2hFJJ7
zo#e>J7%1QppQ|FnlrG^e5XPriEN1q|Xijsh@`m!ZN%MFF6E8jcUwZv@e5@+he6Fuc
z7`7eX=yB<7aiZ7;=Bxz0m!J4fGPNBLoWbbrxm;a^wIlI%ykh17{f->}MqUFCH6i;*
z#_t<M8aOw+<y_&VqoXqSGQ(}<2N%>XcFfL8soDOhV<S`Cqk4wwgxH`Z79}A+Z>>HR
gYZh$&g2{$qt%H@vD}`yBf$nASboFyt=akR{0RQ1r%>V!Z

literal 0
HcmV?d00001


From 3e9a0e20b9eadc4fa676a5b4f1075041ba601fea Mon Sep 17 00:00:00 2001
From: Andrew Tavis McAllister <andrew.t.mcallister@gmail.com>
Date: Sun, 30 Jun 2024 14:51:02 +0200
Subject: [PATCH 2/2] #893 refactor map arrow code and make icon black

---
 frontend/components/media/MediaMap.vue        | 255 ++++++++++++++----
 frontend/public/icons/direction-arrow.png     | Bin 234 -> 0 bytes
 .../from_library/bootstrap_arrow_right.png    | Bin 0 -> 186 bytes
 3 files changed, 196 insertions(+), 59 deletions(-)
 delete mode 100644 frontend/public/icons/direction-arrow.png
 create mode 100644 frontend/public/icons/from_library/bootstrap_arrow_right.png

diff --git a/frontend/components/media/MediaMap.vue b/frontend/components/media/MediaMap.vue
index 794bac4f6..6c3277096 100644
--- a/frontend/components/media/MediaMap.vue
+++ b/frontend/components/media/MediaMap.vue
@@ -1,5 +1,3 @@
-
-
 <template>
   <div
     id="map"
@@ -8,15 +6,10 @@
 </template>
 
 <script setup lang="ts">
-
-import { onMounted } from 'vue';
-import { useI18n } from "vue-i18n";
-import maplibregl from 'maplibre-gl';
-import direction-arrow from "frontend/public/icons/direction-arrow.png";
-import { useColorMode } from '@vueuse/core';
 import MapLibreGlDirections, {
   layersFactory,
 } from "@maplibre/maplibre-gl-directions";
+import maplibregl from "maplibre-gl";
 import "maplibre-gl/dist/maplibre-gl.css";
 
 const props = defineProps<{
@@ -28,10 +21,8 @@ const props = defineProps<{
 const i18n = useI18n();
 const colorMode = useColorMode();
 
-
-
 const isTouchDevice =
-  // `maxTouchPoints` isn't recognized by TS. Safe to ignore.
+  // Note: `maxTouchPoints` isn't recognized by TS. Safe to ignore.
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   navigator.msMaxTouchPoints > 0 ||
@@ -55,6 +46,106 @@ function isWebglSupported() {
   return false;
 }
 
+// MARK: Routing
+
+const bikeDirectionsIcon = `/icons/map/bike_directions_${colorMode.value}.png`;
+const walkDirectionsIcon = `/icons/map/walk_directions_${colorMode.value}.png`;
+
+interface RouteProfileOption {
+  FOOT: string;
+  BIKE: string;
+  DRIVING: string;
+  CAR: string;
+}
+
+const routeProfileOptions: RouteProfileOption = {
+  FOOT: "foot",
+  BIKE: "bike",
+  DRIVING: "driving",
+  CAR: "car",
+};
+
+interface RouteProfile {
+  profile: string;
+  api: string;
+}
+
+const routingAPI = "https://routing.openstreetmap.de/routed-";
+const routingAPIVersion = "/route/v1/";
+
+const routeProfileMap: RouteProfile[] = [
+  {
+    api: `${routingAPI}${routeProfileOptions.FOOT}${routingAPIVersion}`,
+    profile: routeProfileOptions.FOOT,
+  },
+  {
+    api: `${routingAPI}${routeProfileOptions.BIKE}${routingAPIVersion}`,
+    profile: routeProfileOptions.BIKE,
+  },
+  {
+    api: `${routingAPI}${routeProfileOptions.DRIVING}${routingAPIVersion}`,
+    profile: routeProfileOptions.DRIVING,
+  },
+];
+
+const walkingRouteProfileControl = `
+  <div
+    id=${routeProfileOptions.FOOT}
+    style="
+    background-image: url(${walkDirectionsIcon});
+    width: 30px;
+    height: 30px;
+    background-size: 30px 30px;
+    border-radius: 5px;
+    box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.15);
+    cursor: pointer"
+    opacity: 5;
+  >
+  `;
+
+const bikeRouteProfileControl = `
+  <div
+    id=${routeProfileOptions.BIKE}
+    style="
+    background-image: url(${bikeDirectionsIcon});
+    width: 30px;
+    height: 30px;
+    background-size: 30px 30px;
+    border-radius: 5px;
+    box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.15);
+    cursor: pointer"
+    opacity: 5;
+  >
+  `;
+
+let currentProfile = walkingRouteProfileControl;
+
+const mapProfile = (profile: string) => {
+  return routeProfileMap.find((item) => item.profile === profile);
+};
+
+let selectedRoute = mapProfile(routeProfileOptions.FOOT);
+
+const routeProfileHandler = () => {
+  if (currentProfile === walkingRouteProfileControl) {
+    currentProfile = bikeRouteProfileControl;
+  } else {
+    currentProfile = walkingRouteProfileControl;
+  }
+  return currentProfile;
+};
+
+const setSelectedRoute = () => {
+  if (currentProfile === walkingRouteProfileControl) {
+    selectedRoute = mapProfile(routeProfileOptions.FOOT);
+  } else {
+    selectedRoute = mapProfile(routeProfileOptions.BIKE);
+  }
+  return selectedRoute;
+};
+
+// MARK: Map Creation
+
 onMounted(() => {
   const nominatimLocationRequest =
     "https://nominatim.openstreetmap.org/search?q=Brandenburg%20Gate%20Berlin&format=json";
@@ -85,8 +176,7 @@ onMounted(() => {
                 type: "background",
                 paint: {
                   "background-color":
-                    
-                  colorMode.value == "dark" ? "#131316" : "#F6F8FA",
+                    colorMode.preference == "dark" ? "#131316" : "#F6F8FA",
                 },
               },
               {
@@ -103,6 +193,8 @@ onMounted(() => {
           pitch: 20,
         });
 
+        // MARK: Basic Controls
+
         map.addControl(
           new maplibregl.NavigationControl({
             visualizePitch: true,
@@ -118,44 +210,6 @@ onMounted(() => {
             trackUserLocation: true,
           })
         );
-        map.loadImage(direction-arrow).then((image) => {}
-        if (image) {
-          map.addImage("direction-arrow", image.data);
-        }
-      });
-
-      const layers = layersFactory();
-      layers.push({
-        id : "maplibre-gl-directions-routeline-direction-arrow",
-        type : "symbol",
-        source : "maplibre-gl-directions",
-        layout: {
-          "symbol-placement" : "line-center",
-          "icon-image" : "direction-arrow",
-          "icon-size" : ["interpolate",["exponential",1.5],["zoom"], 12, 0.85, 18, 1.4],
-        },
-
-        paint: {
-        "icon-opacity": 0.5,
-      },
-      filter: ["==", ["get", "route"], "SELECTED"],
-    });
-
-    map.on("load", () => {
-      directions = new MapLibreGlDirections(map, {
-        requestOptions: {
-          alternatives: "true",
-        },
-        layers,
-      });
-
-      directions.interactive = true;
-    });
-  });
-
-
-
-      })
 
         const popup = new maplibregl.Popup({
           offset: 25,
@@ -179,19 +233,52 @@ onMounted(() => {
           .setPopup(popup)
           .addTo(map);
 
+        // Arrow icon for directions.
+        map
+          .loadImage("/icons/from_library/bootstrap_arrow_right.png")
+          .then((image) => {
+            console.log("Here1");
+            if (image) {
+              map.addImage("route-direction-arrow", image.data);
+            }
+
+            console.log("Here2", image.data);
+          });
+
         map.on("load", () => {
           const layers = layersFactory(
             isTouchDevice ? 1.5 : 1,
             isTouchDevice ? 2 : 1
           );
 
-          const directions = new MapLibreGlDirections(map, {
-            api: "https://routing.openstreetmap.de/routed-foot/route/v1/",
-            profile: "foot",
-            // api: "https://routing.openstreetmap.de/routed-bike/route/v1/",
-            // profile: "bike",
-            // api: "https://routing.openstreetmap.de/routed-car/route/v1/",
-            // profile: "driving",
+          // MARK: Directions Layer
+
+          // Add arrow to directions layer.
+          layers.push({
+            id: "maplibre-gl-directions-route-line-direction-arrow",
+            type: "symbol",
+            source: "maplibre-gl-directions",
+            layout: {
+              "symbol-placement": "line-center",
+              "icon-image": "route-direction-arrow",
+              "icon-size": [
+                "interpolate",
+                ["exponential", 1.5],
+                ["zoom"],
+                12,
+                0.85,
+                18,
+                1.4,
+              ],
+            },
+            paint: {
+              "icon-opacity": 1,
+            },
+            filter: ["==", ["get", "route"], "SELECTED"],
+          });
+
+          let directions = new MapLibreGlDirections(map, {
+            ...(selectedRoute = setSelectedRoute()),
             requestOptions: {
               alternatives: "true",
             },
@@ -199,7 +286,6 @@ onMounted(() => {
           });
 
           directions.interactive = true;
-
           marker.getElement().addEventListener("mouseenter", () => {
             directions.interactive = false;
           });
@@ -208,6 +294,57 @@ onMounted(() => {
             directions.interactive = true;
           });
 
+          // MARK: Profile Switcher
+
+          map.addControl(
+            {
+              onAdd: function () {
+                const div = document.createElement("div");
+                div.className = "maplibregl-ctrl maplibregl-ctrl-custom-image";
+                div.innerHTML = currentProfile;
+
+                const updateSelectedProfile = () => {
+                  directions.destroy();
+                  div.innerHTML = routeProfileHandler();
+
+                  directions = new MapLibreGlDirections(map, {
+                    ...(selectedRoute = setSelectedRoute()),
+                    requestOptions: {
+                      alternatives: "true",
+                    },
+                    layers,
+                  });
+
+                  directions.interactive = true;
+                  marker.getElement().addEventListener("mouseenter", () => {
+                    directions.interactive = false;
+                  });
+
+                  marker.getElement().addEventListener("mouseleave", () => {
+                    directions.interactive = true;
+                  });
+                };
+
+                if (window.innerWidth < 768) {
+                  div.addEventListener("touched", updateSelectedProfile);
+                  div.addEventListener("click", updateSelectedProfile);
+                } else {
+                  div.addEventListener("click", updateSelectedProfile);
+                  document.addEventListener("keydown", (event) => {
+                    if (event.key === "x") {
+                      updateSelectedProfile();
+                    }
+                  });
+                }
+                return div;
+              },
+              onRemove: function () {},
+            },
+            "top-right"
+          );
+
+          // MARK: Clear Directions
+
           const clearDirectionsControl = `
             <div style="
               background-color: rgba(255, 255, 255, 1);
diff --git a/frontend/public/icons/direction-arrow.png b/frontend/public/icons/direction-arrow.png
deleted file mode 100644
index 308cf3b9d983650579c08f0c9bce08d77ff01a0b..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 234
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`jKx9jP7LeL$-D$|mUy~2hFJJ7
zo#e>J7%1QppQ|FnlrG^e5XPriEN1q|Xijsh@`m!ZN%MFF6E8jcUwZv@e5@+he6Fuc
z7`7eX=yB<7aiZ7;=Bxz0m!J4fGPNBLoWbbrxm;a^wIlI%ykh17{f->}MqUFCH6i;*
z#_t<M8aOw+<y_&VqoXqSGQ(}<2N%>XcFfL8soDOhV<S`Cqk4wwgxH`Z79}A+Z>>HR
gYZh$&g2{$qt%H@vD}`yBf$nASboFyt=akR{0RQ1r%>V!Z

diff --git a/frontend/public/icons/from_library/bootstrap_arrow_right.png b/frontend/public/icons/from_library/bootstrap_arrow_right.png
new file mode 100644
index 0000000000000000000000000000000000000000..4c10498c11aae0202c43d76c8ee6e494715353de
GIT binary patch
literal 186
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`oCO|{#S9GG!XV7ZFl&wkP>``W
z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eBzQ3o7V@L(#(+h7o83Y8_9!%FsP??;-q-;1V
z(Bk8H{`jR8uYz`c-^KT%>s@V8Pw-9~v)0GXF14|GmebtV{5`Tw+Tcv|Ns%pe2NqQ)
dCVg1Oa{eHfsPN%+vw=o4c)I$ztaD0e0svT(JFfr$

literal 0
HcmV?d00001