SmartMapView

SmartMapView

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.

(static) animateRoute()

Animate bluedot along the route

(static) cancelCurrentUserTask()

Cancel current UserTask, if any.Previous MapMode will be resumed.

(static) getCurrentUserTask()

Return current UserTask.

(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) getWidgetPadding()

* Get the current widget padding

(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)
}
Parameters
Name Type Description
lat number
lon number
layerIndex number

(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)
}
Parameters
Name Type Description
SmartMapObject object

(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

(static) resetWidgetPadding()

* Reset the current widget padding

(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.