Merge pull request #23 from Woosmap/dev/direction-sample

Dev/direction sample
Woosmap · Feb 15, 2024 · c8bb72b · c8bb72b
2 parents 2c34bf9 + 2e07442
commit c8bb72b
Show file tree

Hide file tree

Showing 5 changed files with 210 additions and 2 deletions.
diff --git a/samples/directions-simple/directions-simple.json b/samples/directions-simple/directions-simple.json
@@ -0,0 +1,13 @@
+{
+  "title": "Directions Service",
+  "description": "Compute routes between an origin and a destination.",
+  "callback": "initMap",
+  "tag": "directions_simple",
+  "name": "directions-simple",
+  "pagination": {
+    "data": "mode",
+    "size": 1,
+    "alias": "mode"
+  },
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+}
diff --git a/samples/directions-simple/index.njk b/samples/directions-simple/index.njk
@@ -0,0 +1,85 @@
+{% extends '../../src/_includes/layout.njk' %}
+{% block html %}
+    <div id="od-selector">
+        <div class="od-container">
+            <span>from </span>
+            <select id="from">
+                <option value="Paris" data-lat="48.86288" data-lng="2.34946"
+                >Paris
+                </option
+                >
+                <option value="Montpellier" data-lat="43.61486" data-lng="3.86798"
+                >Montpellier
+                </option
+                >
+                <option value="Berlin" data-lat="52.52457" data-lng="13.42347"
+                >Berlin
+                </option
+                >
+                <option value="Milan" data-lat="45.47520" data-lng="9.18530"
+                >Milan
+                </option
+                >
+                <option value="Madrid" data-lat="40.42629" data-lng="-3.68574"
+                >Madrid
+                </option
+                >
+                <option value="Bruxelles" data-lat="50.84670" data-lng="4.35684"
+                >Bruxelles
+                </option
+                >
+                <option value="Amsterdam" data-lat="52.37342" data-lng="4.84631"
+                >Amsterdam
+                </option
+                >
+            </select>
+        </div>
+        <div class="od-container">
+            <span>to </span>
+            <select id="to">
+                <option value="Paris" data-lat="48.86288" data-lng="2.34946"
+                >Paris
+                </option
+                >
+                <option
+                        value="Montpellier"
+                        data-lat="43.61486"
+                        data-lng="3.86798"
+                        selected
+                >Montpellier
+                </option
+                >
+                <option value="Berlin" data-lat="52.52457" data-lng="13.42347"
+                >Berlin
+                </option
+                >
+                <option value="Milan" data-lat="45.47520" data-lng="9.18530"
+                >Milan
+                </option
+                >
+                <option value="Madrid" data-lat="40.42629" data-lng="-3.68574"
+                >Madrid
+                </option
+                >
+                <option value="Bruxelles" data-lat="50.84670" data-lng="4.35684"
+                >Bruxelles
+                </option
+                >
+                <option value="Amsterdam" data-lat="52.37342" data-lng="4.84631"
+                >Amsterdam
+                </option
+                >
+            </select>
+        </div>
+        <div class="od-container">
+            <span>distance </span>
+            <div id="distance"></div>
+        </div>
+        <div class="od-container">
+            <span>time </span>
+            <div id="duration"></div>
+        </div>
+    </div>
+    <!--The div element for the map -->
+    <div id="map"></div>
+{% endblock %}
diff --git a/samples/directions-simple/index.ts b/samples/directions-simple/index.ts
@@ -0,0 +1,87 @@
+// [START woosmap_directions_simple]
+let map: woosmap.map.Map;
+let fromSelect: HTMLSelectElement;
+let toSelect: HTMLSelectElement;
+
+function initMap(): void {
+  const directionsService = new woosmap.map.DirectionsService();
+  const directionsRenderer = new woosmap.map.DirectionsRenderer({});
+  map = new woosmap.map.Map(document.getElementById("map") as HTMLElement, {
+    zoom: 7,
+    center: {
+      lat: 43.5,
+      lng: 2.4,
+    },
+  });
+  directionsRenderer.setMap(map);
+
+  const onChangeHandler = (): void => {
+    calculateAndDisplayRoute(directionsService, directionsRenderer);
+  };
+  fromSelect = document.getElementById("from") as HTMLSelectElement;
+  toSelect = document.getElementById("to") as HTMLSelectElement;
+  fromSelect.addEventListener("change", onChangeHandler);
+  toSelect.addEventListener("change", onChangeHandler);
+  calculateAndDisplayRoute(directionsService, directionsRenderer);
+}
+
+function calculateAndDisplayRoute(
+  directionsService: woosmap.map.DirectionsService,
+  directionsRenderer: woosmap.map.DirectionsRenderer,
+): void {
+  const displayMetadataRoute = (route: woosmap.map.DirectionRoute): void => {
+    if (route) {
+      (document.getElementById("distance") as HTMLElement).innerText =
+        route.legs[0].distance.text;
+      (document.getElementById("duration") as HTMLElement).innerText =
+        route.legs[0].duration.text;
+    }
+  };
+  directionsService.route(
+    {
+      origin: getSelectedLatLng(fromSelect),
+      destination: getSelectedLatLng(toSelect),
+      provideRouteAlternatives: true,
+    },
+    (response: woosmap.map.DirectionResult, status: string) => {
+      if (status === "OK") {
+        directionsRenderer.setDirections(response);
+        displayMetadataRoute(response.routes[0]);
+        directionsRenderer.addListener("routeIndex_changed", () => {
+          displayMetadataRoute(
+            response.routes[directionsRenderer.get("routeIndex")],
+          );
+        });
+      } else {
+        window.alert(`Directions request failed due to ${status}`);
+      }
+    },
+  );
+}
+
+function getSelectedLatLng(
+  selectElement: HTMLSelectElement,
+): woosmap.map.LatLngLiteral {
+  return {
+    lat: parseFloat(
+      selectElement.options[selectElement.selectedIndex]?.getAttribute(
+        "data-lat",
+      ) as string,
+    ),
+    lng: parseFloat(
+      selectElement.options[selectElement.selectedIndex]?.getAttribute(
+        "data-lng",
+      ) as string,
+    ),
+  };
+}
+
+declare global {
+  interface Window {
+    initMap: () => void;
+  }
+}
+window.initMap = initMap;
+// [END woosmap_directions_simple]
+
+export {};
diff --git a/samples/directions-simple/style.scss b/samples/directions-simple/style.scss
@@ -0,0 +1,23 @@
+@use 'sass:meta'; // To enable @use via meta.load-css and keep comments in order
+
+/* [START woosmap_directions_simple] */
+@include meta.load-css("../../shared/scss/_default.scss");
+@import "../../shared/scss/mixins.scss";
+
+#od-selector {
+  width: 350px;
+  @include map-panel($top: 0, $left: 0);
+}
+
+.od-container {
+  padding: 2px 0;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+#od-selector span {
+  padding: 0 5px;
+}
+
+/* [END woosmap_directions_simple] */
diff --git a/samples/map-style-lightgrey/style.scss b/samples/map-style-lightgrey/style.scss
@@ -1,6 +1,6 @@
 @use 'sass:meta'; // To enable @use via meta.load-css and keep comments in order
 
-/* [START woosmap_add_map] */
+/* [START woosmap_map_style_lightgrey] */
 @include meta.load-css("../../shared/scss/_default.scss");
 
-/* [END woosmap_add_map] */
+/* [END woosmap_map_style_lightgrey] */