Welcome to Steerpath Web SDK documentation. Here you can find how to make the best use of our extension to Mapbox GL JS library. To start building your own web applications and websites showcasing your building please contact http://www.steerpath.com/

Current version: steerpath-3.1.5.js

Quickstart

To get started with Steerpath Maps in your web application check out this example map of our office.

<!DOCTYPE html>
<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>

Change log

Version number (3.1.5 - 27.11.2017)

New Features

  • New routing algorithm

    Bug Fixes

  • Fixed a bug in routing engine.
  • Check if tiles are loaded before hiding a bulding

Version number (3.1.4 - 23.11.2017)

Bug Fixes

  • Fixed a bug in routing engine.

Version number (3.1.3 - 22.11.2017)

Bug Fixes

  • RouteManager removes duplicate coordinates when route is set.

Version number (3.1.2 - 21.11.2017)

Breaking changes

  • directionsApi.solveAll() changed to directionsApi.solveAlternatives(numberOfAlternatives)

    New Features

  • Route engine's directionsApi can return alternative routes for RouteManager to show
  • RouteManager.initRouteManager(routes) will handle the initialisation of route visualisation. If RouteManager was given numberOfAlternatives option it will show all the alternatives given in initRouteManager method. If there's no alternative routes initRouteManager will visualise default route.
  • New options for RouteManager regarding alternative routes: altRouteLineColor and numberOfAlternatives

    Bug Fixes

  • Sometimes when zooming or panning aggressively tiles were not yet loaded on moveend event. This caused buildings to disappear from the view since queryRenderedFeatures couldn't find Steerpath building data. Now SteerpathMap waits for tiles to load and retries to find building data. If building data is not found then hideActiveBuilding() will be called.

Version number (3.1.1 - 20.11.2017)

Bug Fixes

  • Fixed a bug in route engine

Version number (3.1.0-beta - 30.10.2017)

New Features

  • Visualise alternative routes with RouteManager.

    Bug Fixes

  • Fixed a bug in SteerpathMap when querying map view for building data.
  • Check that building_outline layer exists

Version number (3.0.2-beta - 15.9.2017)

Bug Fixes

  • Fixed a bug in building query which caused issues with IE11

Version number (3.0.1) - 18.7.2017

New features

  • steerpath.SteerpathMap.queryForSteerpathBuilding(analyseQueriedView) optional boolean parameter analyseQueriedView which sets whether or not the view will be updated if there was a steerpath building in the view.
  • steerpath.SteerpathMap.queryInFixedPosition(point, analyseQueriedView) method to query the map in certain x,y-point and update the view if there was a steerpath building in the position.
  • steerpath.RouteAnimationManager optional boolean option showRoutePreview. Which will trigger an animation to show first fit the map view to route's bounds and then fly to a starting point.
  • steerpath.RouteAnimationManager new optional option slowSpeedOnTurns which slows down animation to third of the animationSpeed by default. Can be changed from RouteAnimationManager instance.

    Bug fixes

  • Simplified route points in RouteAnimationManager.
  • Route animation performance improvement. Update the map center when bluedot source data is updated on('sourcedata')-event. This will also reduce the flickering with the bluedot.

Version number (3.0.0) - 30.6.2017

New features

  • steerpath.SteerpathMap.queryForSteerpathBuilding() which gets called on map.moveend and map.onload but it can now be called programmatically. It queries map view for Steerpath buildings and update the view accordingly. It returns the building in the view.
  • Showcase
  • RouteManager
  • RouteAnimationManager

Version number (3.0.0-beta) - 23.6.2017

Breaking changes

  • Changed steerpath.SteerpathAPI into steerpath.SteerpathMap
  • Changed steerparth.steerpathMarker into steerpath.Marker
  • Changed steerpath.SteerpathFloorSwitcherControl into steerpath.FloorSwitcherControl
  • Changed steerpath.SteerpathAPI.latestVisibleBuilding into steerpath.SteerpathMap.latestActiveBuilding

    New features

  • in SteerpathMap added option filterPrefix true/false which will enable API to be compatible with Mapbox GL Draw.
  • in SteerpathMap new methods: setInspectionZoomLevel, setInspectionBoundaries, setQueryOnceMapLoad, setShowFloorsWithSameIndex
  • in FloorSwitcherControl methods hide- and showFloorSwitcher() don't require parameter floorLists anymore.

    Bug fixes

  • Fixed bug in floor switcher when changing floor programmatically
  • Fixed bug in changeLayerIndex() method

floorswitchercontrol.js

marker.js

Extends Mapbox's marker components with a two new parameters: buildingRef and layerIndex. SteerpathMarker compares given buildingRef and layerIndex to currently visible/active building and shows and hides marker accordingly.
See:

routeanimationmanager.js

Handles the animation of the route. It's methods and properties can be accessed from your RouteManager instance.
See:

routemanager.js

RouteManager provides a way to visualize a route from one point to another. Route lines are represented as GeoJSON line strings.
See:

Example

var options = {
   zoomedInRouteLineColor:  "#1cb3a5",
   zoomedOutRouteLineColor: "#df1d80",
   altRouteLineColor: "#6b476a",
   lineWidth: 10,
   showRoutePreview: true,
   handleUserInteractions: true,
   animationSpeed: 0.01,
   slowSpeedOnTurns: true,
   numberOfAlternatives: 2
}

//your instance of RouteManager
var routeManager = new steerpath.RouteManager(mapboxMap, options);

var originLocation = {
  lng: 24.828643998977213,
  lat:  60.18696834433061,
  layerIndex: 0
};
var destinationLocation = {
  lng: 24.82686080911617,
  lat: 60.18696834433061,
  layerIndex: 2
};

//url to your route data which is given to loadDirections() as first parameter
var url = "./assets/all_routes.json";

//loadDirections() returns directionsApi as a promise.
//By setting origin and destination directionsApi will solve the route.
//Finally in order to visualize route on the map call routeManager.initRouteManager.
//If you set optional option numberOfAlternatives to be higher than 0 RouteManager will show them as well.
steerpath.loadDirections(url).then((directionsApi) => {
  directionsApi.setOrigin(originLocation.lat, originLocation.lng, originLocation.layerIndex);
  directionsApi.addDestination(destinationLocation.lat, destinationLocation.lng, destinationLocation.layerIndex);
  let routes = directionsApi.solveAlternatives(2);
  routeManager.initRouteManager(routes);
});

showcase.js

Steerpath Showcase provides a way to present your map with a nice circular animation. In the animation the view circles around given focus point with adjustable radius and speed.
See:

Example

var options = {
  focusPoint: mapboxMap.getCenter(),
  originBearing: mapboxMap.getBearing(),
  radius: 20,
  rotationSpeed: 0.02,
  handleUserInteractions: true
}

var showcase = new steerpath.Showcase(mapboxMap, options);

steerpathmap.js

The Steerpath Web SDK provides an easy to use extension to the popular mapbox widget, adding features related to showing annotations and markers on floors and browsing the individual floors or a building. It is a quick way to integrate the Steerpath maps into a website. The extensions handle things such as switching buildings, showing and hiding level switchers without requiring any work from the website developer. It also allows the developer to add overlays and pins to specific floors. Internally it monitors map interactions and manages what the map widget displays. As the map view's state changes, it automatically fires various events both before and after changes to make it easy to time external interactions to the map. It consists of individual components that can be customized or replaced completely if needed. You can find examples below on how to use and integrate the widget into your own website.
See:
  • SteerpathMap for the complete description of the methods and properties of the object.

Example

var options = {
    inspectionZoomLevel: 15,
    inspectionBoundaries: 0.5,
    queryOnceMapLoad: true
  };

  var steerpathMap = new steerpath.SteerpathMap(mapboxMap, options);
  var floorSwitcher = new steerpath.FloorSwitcherControl(steerpathMap);
  mapboxMap.addControl(floorSwitcher, 'bottom-right');