Directions Service

Sample code for Woosmap Map JavaScript API author(s): Woosmap

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Directions Service</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />

    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <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">
           ...

CSS

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
  height: 100%;
}

/*
 * Optional: Makes the sample page fill the window.
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}

#od-selector {
  width: 200px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
  margin: 10px;
  padding: 5px;
  overflow: hidden;
  z-index: 1;
}

.od-container {
  padding: 2px 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

#od-selector span {
  padding: 0 5px;
}

JavaScript

let map;
let fromSelect;
let toSelect;

function initMap() {
  const directionsService = new woosmap.map.DirectionsService();
  const directionsRenderer = new woosmap.map.DirectionsRenderer({});

  map = new woosmap.map.Map(document.getElementById("map"), {
    zoom: 7,
    center: {
      lat: 43.5,
      lng: 2.4,
    },
  });
  directionsRenderer.setMap(map);

  const onChangeHandler = () => {
    calculateAndDisplayRoute(directionsService, directionsRenderer);
  };

  fromSelect = document.getElementById("from");
  toSelect = document.getElementById("to");
  fromSelect.addEventListener("change", onChangeHandler);
  toSelect.addEventListener("change", onChangeHandler);
  calculateAndDisplayRoute(directionsService, directionsRenderer);
}

function calculateAndDisplayRoute(directionsService, directionsRenderer) {
  const displayMetadataRoute = (route) => {
    if (route) {
      document.getElementById("distance").innerText =
        route.legs[0].distance.text;
      document.getElementById("duration").innerText =
        route.legs[0].duration.text;
    }
  };

  directionsService.route(
    {
      origin: getSelectedLatLng(fromSelect),
      destination: getSelectedLatLng(toSelect),
      provideRouteAlternatives: true,
    },
    (response, status) => {
      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) {
  return {
    lat: parseFloat(
      selectElement.options[selectElement.selectedIndex]?.getAttribute(
        "data-lat",
      ),
    ),
    lng: parseFloat(
      selectElement.options[selectElement.selectedIndex]?.getAttribute(
       ...