Skip to main content

Usage

In case of Library and WebView integrations it is possible to directly access the map instance API. Below you can find the events and methods that are allowed to leverage map behavior.

Events​

The map allows to subscribe (on/once) to the map events and unsubscribe (off) from the map events.

PCMap#Initialized​

Emitted after the map gets initialized

map.on('PCMap#Initialized', () => {})

SearchBox#OccupantSelected​

Emitted when the occupant is selected by clicking on the item in the search box

map.on('SearchBox#OccupantSelected', (occupant) => {})
  • occupant - argument of callback that contains all data of the selected occupant

SearchBox#OccupantUnselected​

Emitted when the search box is cleared

map.on('SearchBox#OccupantUnselected', () => {})

Directions#Open​

Emitted when the directions dialog is opened

map.on('Directions#Open', () => {})

Directions#Close​

Emitted when the directions dialog is closed

map.on('Directions#Close', () => {})

Route#Open​

Emitted when the route dialog is opened

map.on('Route#Open', ({ from, to, qrcode }) => {})
  • from - contains information about the start point of the route
  • end - contains information about the end point of the route
  • qrcode - contains svg image of the QR code of the route

Route#Close​

Emitted when the route dialog is closed

map.on('Route#Close', ({ from, to }) => {})
  • from - contains information about the start point of the route
  • end - contains information about the end point of the route

Marker#Click​

Emitted when the marker is clicked

map.on('Marker#Click', (occupant) => {})
  • occupant - argument of callback that contains all data of the occupant corresponding to the marker

Map#Click​

Emitted when the user clicks on the map but not on the marker

map.on('Map#Click', () => {})

Map#OrdinalChanged​

Emitted when the ordinal changed

map.on('Map#OrdinalChanged', ({ ordinal }) => {})
  • ordinal - argument of callback that contains selected ordinal identificator

Map#ViewChange​

Emitted when the map view changed

map.on('Map#ViewChange', ({ center }) => {})
  • center - argument of callback that contains new map view center

Map#ZoomChange​

Emitted when the map zoom changed

map.on('Map#ZoomChange', ({ zoom }) => {})
  • zoom - argument of callback that contains new map zoom level

Map#RotationChange​

Emitted when the map rotation changed

map.on('Map#RotationChange', ({ rotation }) => {})
  • rotation - argument of callback that contains new map rotation value

Map#TiltChange​

Emitted when the map tilt changed

map.on('Map#TiltChange', ({ tilt }) => {})
  • tilt - argument of callback that contains new map tilt value

Methods​

setDirections​

Set the start/end points and avoid stairs value of the directions dialog

map.setDirections({
  sourceId,
  sourceName,
  destinationId,
  destinationName,
  avoidStairs,
})
  • sourceId (optional) - id of the occupant/point
  • sourceName (optional) - name of the occupant/point (make sure that there is only one occupant with that name)
  • destinationId (optional) - id of the occupant/point
  • destinationName (optional) - name of the occupant/point (make sure that there is only one occupant with that name)
  • avoidStairs (optional) - force avoiding stairs and escalators

showDirections​

Open the directions dialog with the start and end points filled by the provided arguments

map.showDirections({
  sourceId,
  sourceName,
  destinationId,
  destinationName,
  avoidStairs,
})
  • sourceId (optional) - id of the occupant/point
  • sourceName (optional) - name of the occupant/point (make sure that there is only one occupant with that name)
  • destinationId (optional) - id of the occupant/point
  • destinationName (optional) - name of the occupant/point (make sure that there is only one occupant with that name)
  • avoidStairs (optional) - force avoiding stairs and escalators

hideDirections​

Close directions dialog

map.hideDirections()

clearDirections​

Clear directions dialog (start/end point inputs and avoid stairs checkbox)

map.clearDirections()

showRoute​

Open the route dialog and show the path from the source to destination points

map.showRoute({
  sourceId,
  sourceName,
  destinationId,
  destinationName,
  avoidStairs,
})
  • sourceId (required if sourceName is undefined) - id of the occupant/point (use __your-location__ to select current user position)
  • sourceName (required if sourceId is undefined) - name of the occupant/point (make sure that there is only one occupant with that name)
  • destinationId (required if destinationName is undefined) - id of the occupant/point (use __your-location__ to select current user position)
  • destinationName (required if destinationId is undefined) - name of the occupant/point (make sure that there is only one occupant with that name)
  • avoidStairs (optional) - force avoiding stairs and escalators

hideRoute​

Close route dialog

map.hideRoute()

filterMarkers​

Show only markers those are fit filter options.
For reseting certain filter set the null value of that filter. For reseting all filters call the filterMarkers function without arguments or provide null as an argument.

map.filterMarkers(filter, options)
  • filter (optional) - is a function that is executed for every POI (occupant/point)
  • options (optional) - an object that contains filtering options
    • addDistanceToPOIs - an array of POIs ID to which a distance should be calculated for every POI
    • addDistanceToUserPosition - a boolean value that enables calculating distance between user location and POIs
    • addDistanceToRoute - an object that contains properties of the route to which a distance should be calculated for every POI
      • sourceId (required if sourceName is undefined) - id of the occupant/point
      • sourceName (required if sourceId is undefined) - name of the occupant/point (make sure that there is only one occupant with that name)
      • destinationId (required if destinationName is undefined) - id of the occupant/point
      • destinationName (required if destinationId is undefined) - name of the occupant/point (make sure that there is only one occupant with that name)
      • avoidStairs (optional) - force avoiding stairs and escalators
    • maxZoom - max allowed zoom
// Filtering by distance to the POI (less than 15 meters) and GeoJSON category `Shopping`
map.filterMarkers(
  (poi) =>
    poi.distanceToPOIs.every((d) => d < 15) && poi.category.name === 'Shopping',
  { addDistanceToPOIs: ['500'], maxZoom: 20 },
)

// Filtering by distance to the route `E18 => E62` (less than 15 meters)
map.filterMarkers((poi) => poi.distanceToRoute < 15, {
  addDistanceToRoute: { sourceName: 'E18', destinationName: 'E62' },
})

// Filtering by distance to the current user position
map.filterMarkers((poi) => poi.distanceToUserPosition < 15, {
  addDistanceToUserPosition: true,
})

showOrdinal​

Show the ordinal with the corresponding settings from the ordinalsOptions

map.showOrdinal(ordinal)
  • ordinal (required) - ordinal id (number)

setView​

Set center of the map

map.setView(center)
  • center (required) - coordinates of the center ([latitude: number, longitude: number])

setZoom​

Set zoom level of the map

map.setZoom(zoomLevel)
  • zoomLevel (required) - zoom level (number)

setZoomRange​

Set allowed zoom range of the map

map.setZoomRange(minZoomLevel, maxZoomLevel)
  • minZoomLevel (required) - min zoom level (number)
  • maxZoomLevel (required) - max zoom level (number)

setRotation​

Set rotation of the map

map.setRotation(rotation)
  • rotation (required) - rotation degree (number) (-360...360)

setRotationRange​

Set allowed rotation range of the map

map.setRotationRange(minRotation, maxRotation)
  • minRotation (required) - min rotation degree (number)
  • maxRotation (required) - max rotation degree (number)

setTilt​

Set tilt of the map

map.setTilt(tilt)
  • tilt (required) - tilt degree (number) (-360...360)

setTiltRange​

Set allowed tilt range of the map

map.setTiltRange(minTilt, maxTilt)
  • minTilt (required) - min tilt degree (number)
  • maxTilt (required) - max tilt degree (number)

setUserPosition​

Update user position on the map

map.setUserPosition({ latitude, longitude, ordinal })
  • latitude (required) - latitude part of coordinate
  • longitude (required) - longitude part of coordinate
  • ordinal (optional) - on which floor user is now

setLanguage​

Set language of the map

map.setLanguage(languageCode)
  • languageCode (required) - language code ('ar', 'fr', 'de', 'it', 'jp', 'ru', 'es')

dispose​

Releases map resources.

map.dispose()