eegeo.js

Finding a route in an indoor map

Calculate and show a route between points in an indoor map. Click the blue entrance marker to begin, and 'Get Route' to query the eeGeo Routing API. To draw the route at the appropriate levels, we specify preserveAltitude: true as an option when creating the polyline.

<!DOCTYPE HTML>
<html>
  <head>
    <script src="https://cdn-webgl.eegeo.com/eegeojs/early_access/latest/eegeo.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.css" rel="stylesheet" />
    <style>
      #floorButtons {
        position: absolute;
        z-index: 20;
      }

      #floorButtons button {
        display: block;
        width: 100%;
      }
    </style>
  </head>
  
  <body>
  <div style="position: relative">
    <div id="floorButtons" style="visibility: hidden">
      <button type="button" onclick="getRoute()">Get Route</button>
      <button type="button" onclick="moveUp()">Move Up</button>
      <button type="button" onclick="moveDown()">Move Down</button>
      <button type="button" onclick="exitIndoors()">Exit</button>
    </div>

    <div id="map" style="height: 400px"></div>
    <script>
      var map = L.eeGeo.map("map", "your_api_key_here", {
        center: [56.4602727, -2.9786788],
        zoom: 18,
        indoorsEnabled: true
      });
 
      var routeLine = null;

      var _onRoutesLoaded = function(routes) {
          routeLine = new L.Polyline(routes[0], {preserveAltitude: true});
          routeLine.addTo(map);
      }

      var getRoute = function() {
          var startPoint = [-2.978629, 56.46024, 0];
          var endPoint = [-2.9783117, 56.4600344, 2]; 

          map.routes.getRoute([startPoint, endPoint], _onRoutesLoaded);
      }

      function moveUp() {
        map.indoors.moveUp();
      }

      function moveDown() {
        map.indoors.moveDown();
      }

      function exitIndoors() {
        map.indoors.exit();
      }

      function toggleIndoorButtonVisibility() {
        var element = document.getElementById("floorButtons");
        element.style.visibility = element.style.visibility == "visible" ? "hidden" : "visible";
      }

      function onIndoorMapEntered(event) {
        toggleIndoorButtonVisibility();
      }

      function onIndoorMapExited(event) {
        toggleIndoorButtonVisibility();

        if (routeLine)
        {
          map.removeLayer(routeLine);
        }
      }

      map.indoors.on("indoormapenter", onIndoorMapEntered);
      map.indoors.on("indoormapexit", onIndoorMapExited);
    </script>

  </div>
  </body>
</html>