wrld.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 WRLD Routing API. The indoor map id and floor id are passed to each polyline to ensure it is drawn on the correct floor.

<!DOCTYPE HTML>
<html>
  <head>
    <script src="https://cdn-webgl.wrld3d.com/wrldjs/dist/latest/wrld.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.Wrld.map("map", "your_api_key_here", {
        center: [56.4602727, -2.9786788],
        zoom: 18,
        indoorsEnabled: true
      });
 
      var routeLines = [];

      var _onRoutesLoaded = function(routes) {
          // Each step in the route will be on a single floor.
          for (var stepIndex = 0; stepIndex < routes[0].length; ++stepIndex) {
             var step = routes[0][stepIndex];
             routeLine = new L.polyline(step.points, 
             {
               indoorMapId: step.indoorMapId, 
               indoorMapFloorId: step.indoorMapFloorId
            });
             routeLine.addTo(map);
             routeLines.push(routeLine);
          }
      }

      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();

        for (var routeIndex = 0; routeIndex < routeLines.length; ++routeIndex)
        {
          map.removeLayer(routeLines[routeIndex]);
        }
      }

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

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