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 http://www.steerpath.com/
Quickstart
To get started with Steerpath Maps in your web application check out this example map of our office.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>
Steerpath Maps
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://s3-eu-west-1.amazonaws.com/steerpath-web-sdk/releases/core/3.8.6/steerpath-core.min.js"></script>
<link href="https://s3-eu-west-1.amazonaws.com/steerpath-web-sdk/releases/core/3.8.6/steerpath-core.css" rel="stylesheet">
<style>
body { margin:0; padding:0; }
#mapboxMap { position:absolute; width:100%; height: 100%}
</style>
</head>
<body>
<div id="mapboxMap"></div>
<script>
let apiKey = "eyJhbGciOiJSUzI1NiJ9.eyJpYXQ6IjoxNTY4MDI5MTc0LCJqdGkiOiJiYTlhYjA1NC1hODNjLTQwNWYtYmI0Mi0wZDE4MmMwYzAwYWEiLCJzY29wZXMiOiJ2Mi0zYWU0MTdiYS0wMzg3LTRlNzktYTUxOS03ZWU5MjE3NmRjNjgtcHVibGlzaGVkOnIiLCJzdWIiOiJ2Mi0zYWU0MTdiYS0wMzg3LTRlNzktYTUxOS03ZWU5MjE3NmRjNjgifQ.PpVIhgyZvSU00uz0IG42ii59_FNIZkkPDfCdHNbPUDFcSEvU9wRh0UPIax-fzMuoG7rYmJ4rMBn7v2TN3-dvb25lmfaUkQ53cWU_Fir8w1ljEL_1PnmtgtqDOO9KTWKXB4dwZjdUtMG8sJBD3WLanJJ94cS2Uk2J3_7fSgSr2gZU3JRBvrZVtWnriOItgM0sX08wJEN92iWNvpEQLDDTC32SEIt2GHQvBEuPex6QmUux3FALdN_NL73XTDsBqE11ZGFc2Cj6MVI70BX8peHeeT-0hPHg_02JrHOW4y7SXvX6buqzmyT8Kk1ikol7bWgewKIc5ZlOD1CNOqb77Da5qQ";
let styleFile = "default.json"
let styleUrl = "https://mapdata.eu.steerpath.com/style/"+styleFile+"?access_token="+apiKey
let mapboxMap = new mapboxgl.Map({
container: 'mapboxMap',
style: styleUrl,
center: [24.81249496, 60.22095443],
zoom: 18,
customAttribution: '© <a target="_blank" href="https://www.steerpath.com/">Steerpath</a>',
});
let options = {
"showFloorsWithSameIndex": false,
"inspectionZoomLevel": 14,
}
//create instance of SteerpathMap
let steerpathMap = new steerpath.SteerpathMap(mapboxMap, apiKey, options);
//create floor switcher control and add it to the map
let floorSwitcher = new steerpath.FloorSwitcherControl(steerpathMap);
mapboxMap.addControl(floorSwitcher, 'bottom-right');
</script>
</body>
</html>
Change Log
Version number (3.8.6)
- Make sure mapbox is initialised before firing events
Version number (3.8.5)
New Features
- Skip actual style filtering in changeLayerIndex() if it's called with the same parameters as the current map view has. (same building and same floor)
- Use https://static.steerpath.net instead of .com when downloading rtl-text plugin
- improve the logic how floor switching is triggered and latest active building is tracked
Version number (3.8.4)
New Features
- Improve the performance of floor switcher. Especially when using floor-based-tiles floor switching is now faster
Bug Fixes
- Updated popup remove method in RouteManager.js to match Mapbox new API
- in RouteAnimationManager.js check if buildingRef is changed before switching floor during animation
Breaking Changes
- SteerpathMap no longer adds LongTouchControl automatically. If ou want to have LongTouchControl you can use the addLongTouch() method.
- Update Mapbox GL Js library to 1.12.0
Version number (3.8.3)
Bug fixes
- Use static.steerpath.com to get mapbox-gl-rtl-text plugin
Version number (3.8.2)
New Features
- Init mapbox-gl-rtl-text plugin automatically when SDK is loaded.
Version number (3.8.1)
New Features
- Init mapbox-gl-rtl-text plugin automatically
Version number (3.8.0)
Breaking Changes
- SteerpathMap getActiveBuildingRef() is now getActiveBuildingBuildingRef()
- SteerpathMap getListOfBuildings() is now getBuildings()
- SteerpathMap, renamed API to get building from current view into getSteerpathBuildingFromView(). Similar to queryForSteerpathBuilding() but it does not allow to update the current view with the found building
- SteerpathMap queryInFixedPosition() is now getSteerpathBuildingFromFixedPosition() which allows you to update view with found building
- SteerpathMap setQueryOnceMapLoad() is removed as this should be set in the SteerpathMap constructor.
- SteerpathMap "listOfBuildings" property is now "buildings"
- Version number is no longer included in the SDK file names. See the Quickstart example
New Features
- New version of Mapbox GL Js 1.6.1 library.
- Loading routing data and calculating route from one destination to another is more streamlined. See the example in RouteManager
- Support for mapbox-gl-rtl-text plugin. Init the plugin by calling window.steerpath.loadRTLTextPlugin() before creating the map
Bug Fixes
- when extracting geofences from Steerpath Live Server SDK uses the subType===geofence instead of subType===poi
- fix a bug when opening building for the first time defaultLayerIndex was not handled properly
Version number (3.3.4 - 25.4.2019)
Bug Fixes
- Fixed a bug in how changeLayerIndex-handles storing the latestActiveBuilding-values
- Removing route also removes animation
- Animate movable live objects
- Fixed a bug in setBuildingDefaultLayerIndex()
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.
let apiKey = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzY29wZXMiOiJiYXNlOnI7c3RlZXJwYXRoX3N0YXRpYzpyO3N0ZWVycGF0aF9keW5hbWljOnIiLCJtZXRhQWNjZXNzIjoieSIsImp0aSI6IjhlNTA2OWRhLTViNDEtNGYxZS1iYjYzLTE3NmE0Y2FjMDcyOCIsInN1YiI6InN0ZWVycGF0aCIsImVkaXRSaWdodHMiOiIiLCJlaWRBY2Nlc3MiOiJ5In0.in8zIUm_ZlVhmYPhRMsMxShlqCH0nJnof0kRlWyKuQw";
let 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="https://s3-eu-west-1.amazonaws.com/steerpath-web-sdk/v3.3.0/steerpath-3.3.0.min.js"></script>
<link href="https://s3-eu-west-1.amazonaws.com/steerpath-web-sdk/v3.3.0/steerpath-3.3.0.css" 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