wrld.js

Finding a multipart route

Calculate and show a route between points in different buildings. Click the blue entrance marker for Westport House to begin, and 'Get Route' to query the WRLD Routing API. Outdoor route data is currently limited to Dundee.

<!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) {
          for (var stepIndex = 0; stepIndex < routes[0].length; ++stepIndex) {
             var step = routes[0][stepIndex];
             var options = {};
             if (step.indoorMapId) {
               options.indoorMapId = step.indoorMapId;
               options.indoorMapFloorId = step.indoorMapFloorId;
             }
             var routeLine = new L.polyline(step.points, options);
             routeLine.addTo(map);
             routeLines.push(routeLine);
          }
      }

      var getRoute = function() {
          var startPoint = [-2.983122836389253, 56.461231653264029, 2];
          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();
        var buildingId = event.indoorMap.getIndoorMapId();
      }

      function onIndoorMapExited(event) {
        toggleIndoorButtonVisibility();
      }

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

  </div>
  </body>
</html>
v0.1.1452