Steerpath SDK for Web

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

Latest version: 3.3.3 Mapbox GL Js version 0.51.0


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

<!DOCTYPE html>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        Steerpath Maps

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src=""></script>
<link href="" rel="stylesheet">

        body { margin:0; padding:0; }
        #mapboxMap { position:absolute; width:100%; height: 100%}



    <div id="mapboxMap"></div>

        var apiKey = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzY29wZXMiOiJiYXNlOnI7c3RlZXJwYXRoX3N0YXRpYzpyO3N0ZWVycGF0aF9keW5hbWljOnIiLCJtZXRhQWNjZXNzIjoieSIsImp0aSI6IjhlNTA2OWRhLTViNDEtNGYxZS1iYjYzLTE3NmE0Y2FjMDcyOCIsInN1YiI6InN0ZWVycGF0aCIsImVkaXRSaWdodHMiOiIiLCJlaWRBY2Nlc3MiOiJ5In0.in8zIUm_ZlVhmYPhRMsMxShlqCH0nJnof0kRlWyKuQw";

        let styleFile = "default.json"

        var styleUrl = ""+styleFile+"?access_token="+apiKey

        var mapboxMap = new mapboxgl.Map({
            container: 'mapboxMap',
            style: styleUrl,
            center: [24.81249496, 60.22095443],
            zoom: 18,
            customAttribution: '© <a target="_blank" href="">Steerpath</a>',

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




Change Log

Version number (3.3.3 - 13.12.2018)

Bug Fixes

  • Fixed a bug in floor based tiles floor switching where the source min and max zoom properties went missing.

Version number (3.3.2 - 10.12.2018)

New Features

  • SteerpathMap verifies style after it is loaded. This means that the SDK checks if resources urls (glyph, sprite and tiles) contain access token paramater. This means that API key which is used in the intialisation of mapbox is also required in the initialisation of the steerpathMap. Please see updated example.

Breaking Changes

  • SteerpathMap class needs to have API key parameters when it is initialised.
    var apiKey = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzY29wZXMiOiJiYXNlOnI7c3RlZXJwYXRoX3N0YXRpYzpyO3N0ZWVycGF0aF9keW5hbWljOnIiLCJtZXRhQWNjZXNzIjoieSIsImp0aSI6IjhlNTA2OWRhLTViNDEtNGYxZS1iYjYzLTE3NmE0Y2FjMDcyOCIsInN1YiI6InN0ZWVycGF0aCIsImVkaXRSaWdodHMiOiIiLCJlaWRBY2Nlc3MiOiJ5In0.in8zIUm_ZlVhmYPhRMsMxShlqCH0nJnof0kRlWyKuQw";
    var steerpathMap = new steerpath.SteerpathMap(mapboxMap, apiKey);

Version number (3.3.1 - 29.11.2018)

New Features

  • Handle new source naming convention in SteerpathMap's floor switcher

Bug Fixes

  • Removed logging from the minified build

Version number (3.3.0 - 16.11.2018)

Breaking Changes

  • Steerpath Web SDK now comes combined with the latest supported Mapbox GL Js library. So you no longer don't need to include it seperately.
  • Steerpath Web SDK has a style file which need to be included in the application or web page. You can add the style to the head part of your html code just like you have added the Steerpath Web SDK JavaScript file.
    <script src=""></script>
      <link href="" rel="stylesheet">

    New Features

  • In SteerpathMap if map's style has "underground_background" layer floor switcher will set it visible if new selected floor is below ground. This will dim the outdoor area in the map.
  • SteerpathMap supports floor based tiles. Floor based tiles improve the map's performance and reduce the overall memory consumption.

    Bug Fixes

  • SteerpathMap component's building detection. Prioritise building data found from the center point and if building is same as the one in current selection keep that building active.

Version number (3.2.3 - 29.10.2018)

New Features
  • LongTouch Event on touch screen devices. When using touch screen devices a single long touch press will trigger steerpathLongTouch event which will return location and building data on the touch location. * Events

Version number (3.2.2 - 10.10.2018)

Breaking changes

  • SteerpathLive components parameter group (string) ahs been changed to groups (array) which means that SteerpathLive supports monitoring multiple user / asset groups. For example groups: ["Managers", "Employees"]

New Features

  • SteerpathLive supports monitoring multiple groups at the same time with option groups.

Bug Fixes

  • SteerpathLive Use subType to determine which of the features in assetData are individual assets/users and which are not instead of just the css_class property

Version number (3.2.0 - 7.6.2018)

New Features

  • SteerpathLive class which will monitor server for any asset data and visualise the data on the map. Allows overwriting certain properties of the asset data.

Version number (3.1.6 - 5.1.2018)

New Features

  • Store route data in SDK
  • function preloadRouteData() to get route data and store it. This allows direction solver to calculate route faster.

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


SteerpathLive class which will monitor server for any asset data and visualise the data on the map. Allows overwriting certain properties of the asset data.


var liveOptions = {
  apiKey: "your_live_apiKey",
var steerpathLive = new steerpath.SteerpathLive(mapboxMap, liveOptions);



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.


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


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


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 GeoJSON 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.lng, originLocation.layerIndex);
  directionsApi.addDestination(, destinationLocation.lng, destinationLocation.layerIndex);
  let routes = directionsApi.solveAll();


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.


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

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


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.
  • SteerpathMap for the complete description of the methods and properties of the object.


let steerpathMap = new steerpath.SteerpathMap(mapboxMap);
	let floorSwitcher = new steerpath.FloorSwitcherControl(steerpathMap);
	mapboxMap.addControl(floorSwitcher, "bottom-right");