Mappedin Logo

Developer

Mappedin Documentation

Web SDK v4: BlueDot

Web SDK v4: BlueDot

Displaying user position inside a building is not accurate with just GPS. However, there are a multitude of Indoor Positioning Systems utilizing different technological approaches to providing an accurate and reliable positioning inside.

Mappedin Web SDK reads the browser's Geolocation API for position updates and displays a Blue Dot on the maps based on the given location. This guide will introduce the basics of setting up the Blue Dot as well as demonstrating how to override the location for testing purposes. After all, it's more likely we are not coding at a Starbucks in a mall right now.

In addition to the venue download and show methods, let's import BlueDot enums and the PositionUpdater.

import {
getVenue,
showVenue,
E_BLUEDOT_EVENT,
E_BLUEDOT_STATE,
E_BLUEDOT_STATE_REASON,
PositionUpdater,
} from "https://d1p5cqqchvbqmy.cloudfront.net/websdk/v4.0.8/esm/renderer/index.js"

Let's draw the map as usual and label the map with Flat Labels.

index.js
async function init() {
venue = await getVenue({
venue: "mappedin-demo-mall",
clientId: "<MAPPEDIN_CLIENT_ID>",
clientSecret: "<MAPPEDIN_CLIENT_SECRET>",
})
mapView = await showVenue(document.getElementById("mappedin-map"), venue)
mapView.labelAllLocations({ flatLabels: true })
}
document.addEventListener("DOMContentLoaded", init)

Inside the init function, let's enable BlueDot. However, at this point we won't see anything different on the map. The browser should ask you for permission to use your location as it asks the Geolocation API for your position.

// ...
mapview.labelAllLocations({ flatLabels: true})
mapView.BlueDot.enable({})

Providing Geolocation

If we want to provide the Mappedin BlueDot with a geolocation, we can do that with a PositionUpdater and calling the update method periodically. If we only called it once, the BlueDot would appear and then fade after a while when no updated positions were available. Our static PositionUpdater will then send the highlighted position update to the Mappedin SDK every second.

const staticPositionUpdater = new PositionUpdater()
setInterval(
() =>
staticPositionUpdater.update({
timestamp: Date.now(),
coords: {
accuracy: 5,
latitude: 43.51905183293411,
longitude: -80.53701846381122,
floorLevel: 0,
},
}),
1000
)

We need to add the Position updater to our BlueDot by modifying the enable call. This is where we could customize the BlueDot in other ways as well such as displaying the bearing or disabling the smoothing.

mapView.BlueDot.enable({
positionUpdater: staticPositionUpdater,
})

There are two useful events to listen to: position update and state change. For debugging purposes, you could add the following listeners. Position updates could be useful for reacting a user entering or leaving a certain radius of a store. Status updates can help handling situations where the position lock is lost.

mapView.BlueDot.on(E_BLUEDOT_EVENT.POSITION_UPDATE, update => {
console.info(JSON.stringify(update.position, null, 2))
})
mapView.BlueDot.on(E_BLUEDOT_EVENT.STATE_CHANGE, state => {
const stateWithNames = {
state: E_BLUEDOT_STATE[state.name],
reason: state.reason && E_BLUEDOT_STATE_REASON[state.reason],
}
console.info(JSON.stringify(stateWithNames, null, 2))
})

Result

The complete index.js and a working example below:

import {
getVenue,
showVenue,
E_BLUEDOT_EVENT,
E_BLUEDOT_STATE,
E_BLUEDOT_STATE_REASON,
PositionUpdater,
} from "https://d1p5cqqchvbqmy.cloudfront.net/websdk/v4.0.8/esm/renderer/index.js"
let venue
let mapView
const staticPositionUpdater = new PositionUpdater()
setInterval(
() =>
staticPositionUpdater.update({
timestamp: Date.now(),
coords: {
accuracy: 5,
latitude: 43.51905183293411,
longitude: -80.53701846381122,
floorLevel: 0,
},
}),
1000
)
async function init() {
venue = await getVenue({
venue: "mappedin-demo-mall",
clientId: "5eab30aa91b055001a68e996", // demo keys
clientSecret: "RJyRXKcryCMy4erZqqCbuB1NbR66QTGNXVE0x3Pg6oCIlUR1", // demo keys
})
mapView = await showVenue(document.getElementById("mappedin-map"), venue)
mapView.labelAllLocations({ flatLabels: true })
mapView.BlueDot.enable({
positionUpdater: staticPositionUpdater,
})
mapView.BlueDot.on(E_BLUEDOT_EVENT.POSITION_UPDATE, update => {
console.info(JSON.stringify(update.position, null, 2))
})
mapView.BlueDot.on(E_BLUEDOT_EVENT.STATE_CHANGE, state => {
const stateWithNames = {
state: E_BLUEDOT_STATE[state.name],
reason: state.reason && E_BLUEDOT_STATE_REASON[state.reason],
}
console.info(JSON.stringify(stateWithNames, null, 2))
})
}
document.addEventListener("DOMContentLoaded", init)

Read more about BlueDot in our Web SDK API Reference, inlcuding the option to change the color, adding a bearing indicator and disabling smoothing (usually only used in testing or if another smoothing method is in use).

Search Our Docs

Sign Up

© 2020 Copyright Mappedin, All Rights Reserved. View our Privacy Policy