<html>
  <head>
    <meta charset='utf-8' />
    <title>Steerpath Example</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.1/mapbox-gl.css' rel='stylesheet' />

    <script src="https://s3-eu-west-1.amazonaws.com/steerpath-web-sdk/v3.1.5/steerpath-3.1.5.min.js"></script>

    <style>
        body { margin:0; padding:0; }
        #mapboxMap { position:absolute; width:100%; height: 100%}
    </style>
  </head>
  <body>
    <div id='mapboxMap'></div>
    <script>
      //initialise Mapbox
      mapboxgl.accessToken = '';
      var token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzY29wZXMiOiJiYXNlOnI7c3RlZXJwYXRoX3N0YXRpYzpyO3N0ZWVycGF0aF9keW5hbWljOnIiLCJtZXRhQWNjZXNzIjoieSIsImp0aSI6IjhlNTA2OWRhLTViNDEtNGYxZS1iYjYzLTE3NmE0Y2FjMDcyOCIsInN1YiI6InN0ZWVycGF0aCIsImVkaXRSaWdodHMiOiIiLCJlaWRBY2Nlc3MiOiJ5In0.in8zIUm_ZlVhmYPhRMsMxShlqCH0nJnof0kRlWyKuQw";
      var styleUrl = "https://mapdata.eu.steerpath.com/style/web.json?access_token="+token

      var mapboxMap = new mapboxgl.Map({
          container: 'mapboxMap',
          style: styleUrl,
          center: [24.81249496, 60.22095443],
          zoom: 18,
          bearing: 0,
          pitch: 0
      });

      //options for SteerpathMap class
      var options = {
        inspectionZoomLevel: 15,
        inspectionBoundaries: 0.5,
        queryOnceMapLoad: true
      };

      //create instance of SteerpathMap
      var steerpathMap = new steerpath.SteerpathMap(mapboxMap, options);
      //create floor switcher control and add it to the map
      var floorSwitcher = new steerpath.FloorSwitcherControl(steerpathMap);
      mapboxMap.addControl(floorSwitcher, 'bottom-right');

    </script>
  </body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.