new SmartMapView(container, smartSDK)
SmartMapView is the main class of Steerpath web maps.
It allows you to navigate to objects, add markers and animate camera.
Properties:
Name | Type | Description |
---|---|---|
apiKey |
string | Your API key provided by steerpath team |
attribution |
class | Instance for controlling the attribution located in the bottom right corner |
config |
object | Your configuration JSON object |
containerElement |
html | HTML reference the root container element. |
containerId |
string | Id of the root container element |
isInitialised |
boolean | Boolean value to determine whether the layout is initialised |
layout |
class | Instance for controlling the bottom sheet actions. |
mapContainerElement |
html | HTML refrence to the map container element |
mapboxMap |
class | Instance of the Mapbox GL Js map. You can access all the Mapbox APIs through this object. Please see the detailed documentation |
originLocation |
object | Origin location object used for routing. Contains lat, lon and layerIndex properties |
smartMapMarker |
class | Instance for drawing markers on the map. We reccomend you to draw markers by using the data transfer object SmartMapObject. Please see the detailed documentation |
steerpathLive |
class | Instance for controlling the live component. Please see the detailed documentation |
steerpathMap |
class | Instance for controlling the Steerpath indoor maps. Please see the detailed documentation |
style |
object | Map's style object. |
userLocation |
object | Location which can be set from the configuration file. If configuration has static location set this will be used as the default origin location and the user location. |
Parameters
Name | Type | Description |
---|---|---|
container |
string | Either reference to the root HTML element or the root HTML element id. |
smartSDK |
class | Your instance of the SmartSDK |
Methods
(async, static) addIconImage(imageURL, imageName, callback)
Async
Adds a custom image for a particular icon name.
After you’ve set a custom image you can use the ‘addMarker()’ methods with your own custom icons.
Internally uses the Mapbox's loadImage() and addImage() APIs.
Parameters
Name | Type | Description |
---|---|---|
imageURL |
string | The URL of the image file. Image file must be in png, webp, or jpg format. |
imageName |
string | unique icon identifier. It map already contains icon with given id, request is silently ignored. |
callback |
function | Callback for the function. Will return the image if the image load was successful and the imageName is not yet used by the map. |
(static) addMarker(mapObject, layoutopt, iconImageopt, textColoropt, textHaloColoropt)
Adds one marker to the given SmartMapObject location. You can also specify the
style the position of the text, icon of the marker and text and text halo color.
Uses instance of SmartMapMarker. Please see the detailed documentation
Example
let lat = 60.220936186436944
let lon = 24.812408414519354
let floorIndex = 2
let buildingRef = "67"
let localRef = "custom-marker-xyz"
let title = "Custom Marker"
//first create SmartMapObject based on the location, building and floor
let mapObject = new steerpath.SmartMapObject(lat, lon, floorIndex, buildingRef, localRef, title)
//Either add the mapObject without the layout options
//or set the layout options. Layout options are
//layout, iconImage, textColor, textHaloColor
//smartMapView.addMarker(mapObject)
smartMapView.addMarker(mapObject, "bottom", "category_marker", "#ff2f92", "#fff")
Parameters
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
mapObject |
class | Instance of SmartMapObject class | ||
layout |
string |
<optional> |
"top" | Layout of the marker. Can be either "top", "left", "bottom" or "right". Positions the text based on this. |
iconImage |
string |
<optional> |
"category_marker" | Id of the sprite image to be displayed. You can see available sprites from the style "sprites" property. |
textColor |
string |
<optional> |
#01b2a5 | Colour of the text to be displayed |
textHaloColor |
string |
<optional> |
#ffffff | Halo colour of the text to be displayed |
(static) addMarkers(mapObjectsArray, layoutopt, iconImageopt, textColoropt, textHaloColoropt)
Adds multiple markers to given SmartMapObject locations. You can also specify the
style the position of the text, icon of the marker and text and text halo color.
Uses instance of SmartMapMarker. Please see the detailed documentation
Example
let mapObjectsArray = []
let mapObject = {}
let markerData = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"buildingRef": "67",
"localRef": "marker-1",
"layerIndex": 2,
"title": "Storage",
},
"geometry": {
"type": "Point",
"coordinates": [
24.812347779728384,
60.22096782045503
]
}
},
{
"type": "Feature",
"properties": {
"buildingRef": "67",
"localRef": "marker-2",
"layerIndex": 2,
"title": "Operations"
},
"geometry": {
"type": "Point",
"coordinates": [
24.81240749359131,
60.22089226088821
]
}
},
{
"type": "Feature",
"properties": {
"buildingRef": "67",
"localRef": "marker-3",
"layerIndex": 2,
"title": "Toilets"
},
"geometry": {
"type": "Point",
"coordinates": [
24.81246918439865,
60.22095353923612
]
}
},
{
"type": "Feature",
"properties": {
"buildingRef": "67",
"localRef": "marker-4",
"layerIndex": 2,
"title": "Mobile"
},
"geometry": {
"type": "Point",
"coordinates": [
24.812388718128204,
60.22101215320083
]
}
},
{
"type": "Feature",
"properties": {
"buildingRef": "67",
"localRef": "marker-5",
"layerIndex": 2,
"title": "Web"
},
"geometry": {
"type": "Point",
"coordinates": [
24.81227606534958,
60.22099616758448
]
}
}
]
}
function addMarkers(){
for (let i = 0; i < markerData.features.length; i++) {
const eachMarker = markerData.features[i];
let lat = eachMarker.geometry.coordinates[1]
let lon = eachMarker.geometry.coordinates[0]
let floorIndex= eachMarker.properties.layerIndex
let buildingRef = eachMarker.properties.buildingRef
let localRef = eachMarker.properties.localRef
let title= eachMarker.properties.title
let eachSmartObject = new steerpath.SmartMapObject(lat, lon, floorIndex, buildingRef, localRef, title)
mapObjectsArray.push(eachSmartObject)
}
//mapObjectsArray
smartMapView.addMarkers(mapObjectsArray)
//mapObjectsArray, layout, iconImage, textColor, textHaloColor
//smartMapView.addMarkers(mapObjectsArray, "bottom", "category_marker_pink", "#ff2f92", "#fff")
}
Parameters
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
mapObjectsArray |
class | Array of SmartMapObject classes | ||
layout |
string |
<optional> |
"top" | Layout of the marker. Can be either "top", "left", "bottom" or "right". Positions the text based on this. |
iconImage |
string |
<optional> |
"category_marker" | Id of the sprite image to be displayed. You can see available sprites from the style "sprites" property. |
textColor |
string |
<optional> |
#01b2a5 | Colour of the text to be displayed |
textHaloColor |
string |
<optional> |
#ffffff | Halo colour of the text to be displayed |
(static) animateCamera(latitude, longitude, zoomLevel, bearingopt, pitchopt, floorIndexopt, buildingRefopt)
Animate the camera to a specific location and change the visible floorIndex of a building.
The required parameters are latitude, longitude, zoomLevel.
In addition to the mandatory parameters you can specify bearing and pitch or
all paramaters latitude, longitude, zoomLevel, bearing, pitch, floorIndex, buildingRef
Example
//camera to latitude, longitude and zoomLevel
smartMapView.animateCamera(60.220945577091356, 24.812374723580888, 15)
//camera to latitude, longitude and zoomLevel and set bearing and pitch
smartMapView.animateCamera(60.220945577091356, 24.812374723580888, 17, 60, 45)
//camera according to all parameters
smartMapView.animateCamera(60.220945577091356, 24.812374723580888, 18, 0, 45, 2, "67")
Parameters
Name | Type | Attributes | Description |
---|---|---|---|
latitude |
number | gps latitude | |
longitude |
number | gps longitude | |
zoomLevel |
number | the new zoom level for the map. The bigger the value, the closer the map is zoomed, 0 is the whole world map. | |
bearing |
number |
<optional> |
The new direction for the map, measured in degrees relative to true north. |
pitch |
number |
<optional> |
The pitch (tilt) of the map. |
floorIndex |
number |
<optional> |
the floorIndex index to show |
buildingRef |
string |
<optional> |
unique identifier for the building |
(async, static) animateCameraToBuilding(buildingRef, zoomLevel, completionBlock)
Async
Animate the camera to building.
The camera will also change its bearing to the 'natural orientation' of the building if one is defined in the map data.
When camera is done the completionBlock callback will be called
Example
let building = "67"
smartMapView.animateCameraToBuilding(building, 21, completionBlock)
function completionBlock(response) {
console.log("completionBlock ", response);
}
Parameters
Name | Type | Description |
---|---|---|
buildingRef |
string | unique identifier for the building |
zoomLevel |
number | the new zoom level for the map. The bigger the value, the closer the map is zoomed, 0 is the whole world map. |
completionBlock |
function | containing success if point of interest was found and camera was moved successfully. |
(async, static) animateCameraToObject(localRef, buildingRef, zoomLevel, completionBlock)
Async
Animate the camera to a specific point of interest in a particular building.
The camera will also change its bearing to the 'natural orientation'
of the building if one is defined in the map data.
When camera is done the completionBlock callback will be called
Example
let localRef = "Kitchenette"
let building = "67"
smartMapView.animateCameraToObject(localRef, building, 21, completionBlock)
function completionBlock(response) {
console.log("completionBlock ", response);
}
Parameters
Name | Type | Description |
---|---|---|
localRef |
string | identifier for the point of interest. Corresponds to the 'localRef' property in the map data. |
buildingRef |
string | unique identifier for the building |
zoomLevel |
number | the new zoom level for the map. The bigger the value, the closer the map is zoomed, 0 is the whole world map. |
completionBlock |
function | containing success if point of interest was found and camera was moved successfully. |
(async, static) getMapObject(localRef, buildingRef, source, callback)
Async
Asynchronous getter for a Steerpath map object based on localRef and buildingRef.
If source argument is "STATIC" SDK will fetch data from the meta data. If source is set to
"MARKER" SDK will return a marker object added during the runtime.
Example
function getMapObject() {
let buildingRef = "67"
let localRef = "Kitchen"
let source = "STATIC"
smartMapView.getMapObject(localRef, buildingRef, source, onPoiRequest)
}
function onPoiRequest(data) {
console.log("onPoiRequest", data)
}
Parameters
Name | Type | Description |
---|---|---|
localRef |
string | |
buildingRef |
string | |
source |
string | |
callback |
function |
(async, static) getMapObjectByProperties(localRef, buildingRef, callback)
Async
Asynchronous getter for a Steerpath map object based on given properties object
Set a callback function when the request for Steerpath data is done.
Example
function getMapObjectByProperties() {
let buildingRef = "67"
let title = "Kitchen"
let properties = {
"buildingRef": buildingRef,
"title": title
}
smartMapView.getMapObjectByProperties(properties, onPoiRequest)
}
function onPoiRequest(data) {
console.log("onPoiRequest", data)
}
Parameters
Name | Type | Description |
---|---|---|
localRef |
string | |
buildingRef |
string | |
callback |
function |
(static) getSmartMapCameraOptions() → {SmartMapCameraOptions}
Returns current camera options
Returns
SmartMapCamera options as object containing longitude, latitude, zoomLevel, bearing and pitch
- Type
- SmartMapCameraOptions
(static) navigateToLocation(lat, lon, layerIndex)
Navigate to given coordinates and layer index. If origin location is not set routing will fail.
Example
function navigateToLocation() {
let lon = 24.812456649797355
let lat = 60.220936389073074
let layerIndex = 2
smartMapView.navigateToLocation(lat, lon, layerIndex)
}
(static) navigateToObject(SmartMapObject)
Navigate to given SmartMapObject.
Example
function navigateToObject() {
let lng = 24.812388718128204
let lat = 60.22101215320083
let buildingRef = "67"
let layerIndex = 2
let mapObject = new steerpath.SmartMapObject(lat, lng, layerIndex, buildingRef)
smartMapView.navigateToObject(mapObject)
}
(static) removeAllMarkers()
Removes all markers from the map
Example
smartMapView.removeAllMarkers()
(static) removeMap()
Remove map and layout container elements from the view.
Example
smartMapView.removeMap()
(static) removeMarker(mapObject)
Removes single marker from the map.
Example
smartMapView.removeMarker(mapObject)
Parameters
Name | Type | Description |
---|---|---|
mapObject |
class | Instance of SmartMapObject class to be removed |
(static) removeMarkers(mapObjectsArray)
Removes list of markers from the map.
Example
smartMapView.removeMarkers(mapObjectsArray)
Parameters
Name | Type | Description |
---|---|---|
mapObjectsArray |
array | List of instances of SmartMapObjects to be removed |
(async, static) selectMapObject(localRef, buildingRef)
Async
Animates map to the selected object, adds marker, opens BottomSheet with object information.
Example
function selectMapObject() {
smartMapView.selectMapObject("Kitchenette", "67")
}
Parameters
Name | Type | Description |
---|---|---|
localRef |
string | |
buildingRef |
string |
(static) setCamera(latitude, longitude, zoomLevel, bearingopt, pitchopt, floorIndexopt, buildingRefopt)
Move the camera to a specific location and change the visible floorIndex of a building.
Does not include animation. Use 'animateCamera' methods if you want the camera transition to be animated.
The required parameters are latitude, longitude, zoomLevel.
In addition to the mandatory parameters you can specify bearing and pitch or
all paramaters latitude, longitude, zoomLevel, bearing, pitch, floorIndex, buildingRef
Example
//camera to latitude, longitude and zoomLevel
smartMapView.setCamera(60.220945577091356, 24.812374723580888, 15)
//camera to latitude, longitude and zoomLevel and set bearing and pitch
smartMapView.setCamera(60.220945577091356, 24.812374723580888, 17, 60, 45)
//camera according to all parameters
smartMapView.setCamera(60.220945577091356, 24.812374723580888, 18, 0, 45, 2, "67")
Parameters
Name | Type | Attributes | Description |
---|---|---|---|
latitude |
number | gps latitude | |
longitude |
number | gps longitude | |
zoomLevel |
number | the new zoom level for the map. The bigger the value, the closer the map is zoomed, 0 is the whole world map. | |
bearing |
number |
<optional> |
The new direction for the map, measured in degrees relative to true north. |
pitch |
number |
<optional> |
The pitch (tilt) of the map. |
floorIndex |
number |
<optional> |
the floorIndex index to show |
buildingRef |
string |
<optional> |
unique identifier for the building |
(async, static) setCameraToBuilding(buildingRef, zoomLevel, completionBlock)
Async
Move the camera to building.
The camera will also change its bearing to the 'natural orientation' of the building if one is defined in the map data.
When camera is done the completionBlock callback will be called
Does not include animation. Use 'animateCamera' methods if you want the camera transition to be animated.
Example
let building = "67"
smartMapView.setCameraToBuilding(building, 21, completionBlock)
function completionBlock(response) {
console.log("completionBlock ", response);
}
Parameters
Name | Type | Description |
---|---|---|
buildingRef |
string | unique identifier for the building |
zoomLevel |
number | the new zoom level for the map. The bigger the value, the closer the map is zoomed, 0 is the whole world map. |
completionBlock |
function | containing success if point of interest was found and camera was moved successfully. |
(static) setCameraToDefault()
Move the camera to the default location if one is set. Usually default camera location is good to set to be close to the user location.
Example
smartMapView.setCameraToDefault()
(async, static) setCameraToObject(localRef, buildingRef, zoomLevel, completionBlock)
Async
Move the camera to a specific point of interest in a particular building.
The camera will also change its bearing to the 'natural orientation' of the building if one is defined in the map data.
When camera is done the completionBlock callback will be called
Does not include animation. Use 'animateCamera' methods if you want the camera transition to be animated.
Example
let localRef = "Kitchenette"
let building = "67"
smartMapView.setCameraToObject(localRef, building, 21, completionBlock)
function completionBlock(response) {
console.log("completionBlock ", response);
}
Parameters
Name | Type | Description |
---|---|---|
localRef |
string | identifier for the point of interest. Corresponds to the 'localRef' property in the map data. |
buildingRef |
string | unique identifier for the building |
zoomLevel |
number | the new zoom level for the map. The bigger the value, the closer the map is zoomed, 0 is the whole world map. |
completionBlock |
function | containing success if point of interest was found and camera was moved successfully. |
(static) setDefaultCameraLocation(defaultCamera)
Example
let defaultCamera = {
"lat": 60.220936186436944,
"lng": 24.812408414519354,
"zoomLevel": 15,
"bearing": 12,
"layerIndex": 2,
"buildingRef": "67"
}
smartMapView.setDefaultCameraLocation(defaultCamera)
Parameters
Name | Type | Description |
---|---|---|
defaultCamera |
object | The default camera location. Has the following keys: lat, lng, zoomLevel, bearing, layerIndex, buildingRef, |
(static) setGeoJson(sourceId, geoJson, callback)
Finds GeoJsonSource from the current Style
and sets the given GeoJson as its data source.
Example
function setMarkerGeoJson() {
const sourceId = "marker"
const geoJson = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"id": "category_marker",
"iconImage": "category_marker",
"title": "Mobile development",
"css_class": "category_marker",
"localRef": "Mobile development",
"buildingRef": "431",
"layerIndex": 2,
"textColor": "#104d3d",
"textHaloColor": "#fff",
},
"geometry": {
"type": "Point",
"coordinates": [
24.812406607998014, 60.22099234685879
]
}
}
]
}
clientSmartMapView.setGeoJson(sourceId, geoJson, setGeoJsonCallback)
}
function setGeoJsonCallback(response) {
console.log("setGeoJsonCallback " , response)
}
Parameters
Name | Type | Description |
---|---|---|
sourceId |
string | Name of the GeoJsonN source in the style |
geoJson |
GeoJSON | GeoJson feature collection. If null then GeoJson will be removed from map |
callback |
function | Callback when data is added or if there's an error adding it. |
(static) setMapMode(mapMode)
Set MapMode to some of the followings: "mapOnly", "search" and "static"
In "mapOnly" mode there's no BottomSheet.
In "search" mode BottomSheet will be visible. In "static" mode
interactions are disabled and map can be moved only programmatically.
Example
smartMapView.setMapMode("mapOnly")
Parameters
Name | Type | Description |
---|---|---|
mapMode |
string |
(static) setOriginLocation(originLocation)
Set origin location of your map class.
This will be used as the starting point when calucating routes.
Please note that if you have configured static location into to the
configuration you don't need to set origin location. Also setting origin location does not add Bluedot to the map
Example
function setOriginLocation() {
smartMapView.setOriginLocation({
"lng": 24.812302727304314,
"lat": 60.220955498054565,
"layerIndex": 2
})
}
Parameters
Name | Type | Description |
---|---|---|
originLocation |
object | Origin location is object with three properties "lat", "lng" and "layerIndex" |
(static) setUserLocation(staticLocation)
Set the bluedot location to indicate user location.
Please note that this does not set the routing origin location.
If you want to change routing origin location see the setOriginLocation() API
Parameters
Name | Type | Description |
---|---|---|
staticLocation |
* |
(static) setWidgetPadding(left, top, right, bottom)
Set the map widget padding to camera methods.
Do note that when showing search results on the map SmartMapView automatically calculates the bottom padding based on the bottom sheet height.
If a new widgetPadding is set it will be added to the automatic bottom padding when showing search results.
Use the getWidgetPadding() to get the current widget padding.
Parameters
Name | Type | Description |
---|---|---|
left |
number | Number of pixels in left padding |
top |
number | Number of pixels in top padding |
right |
number | Number of pixels in right padding |
bottom |
number | Number of pixels in bottom padding |
(static) startUserTask(userTask)
UserTask that prompts customizable InfoBottomSheet.
Marker can be added, Button text and icon can be changed.
After clicking the action button, UserTaskListener
will receive UserTaskResponse.COMPLETED callback.Currently POISelectionUserTask is supported.
Example
function startUserTask(userTask) {
let buildingRef = "67"
let localRef = "Kitchen"
let source = "STATIC"
smartMapView.getMapObject(localRef, buildingRef, source, function(data){
if(data){
let smartMapObject = data,
addMarker = true,
actionButtonText = "Show Details",
actionButtonIcon = "category_fun"
let poiSelectionUserTask = new window.steerpath.POISelectionUserTask(smartMapObject, addMarker, actionButtonText, actionButtonIcon)
smartMapView.startUserTask(poiSelectionUserTask)
}
})
}
function cancelUserTask(){
smartMapView.cancelCurrentUserTask()
}
//User Task Listener
window.steerpath.UserTaskListener.on("onUserTaskResponse", (event) => {
let userTask = event.userTask
let response = event.response
if (response === "COMPLETED") {
//User clicked action button and user task is completed
}
})
Parameters
Name | Type | Description |
---|---|---|
userTask |
POISelectionUserTask |
(static) stopNavigation()
Remove route from map and stop animation.