Blue Dot | React Native SDK v5 | Mappedin Developer Portal
Loading...

Blue Dot

Displaying user position inside a building is not accurate with just GPS. However, there are a multitude of Indoor Positioning Systems (IPS) utilizing different technological approaches to providing an accurate and reliable positioning inside. Mappedin works with any IPS capable of providing the SDK with latitude, longitude and floor level information.

Display the Blue Dot

To display a Blue Dot with the SDK, you'll need the position information. The following is a point in the fictional Mappedin Demo Mall. You can create positions and paths for your venue using the Blue Dot Data Faker tool. Below is an example of the geolocation object:

const location = {
timestamp: 1583957906820,
coords: {
accuracy: 5,
latitude: 43.52012478635707,
longitude: -80.53951744629536,
floorLevel: 0
},
type: 0
}

Inside the onFirstMapLoaded callback enable Blue Dot with default settings and then give it the position object to display it on the map.

mapView.current?.BlueDot.enable();
mapView.current?.overrideLocation(location);

This is a full sample for overriding Blue Dot location with a given position and displaying it on the map:

import React from 'react';
import {MapViewStore, MiMapView} from '@mappedin/react-native-sdk';
// See Trial API key Terms and Conditions
// https://developer.mappedin.com/guides/api-keys
const options = {
clientId: '5eab30aa91b055001a68e996',
clientSecret: 'RJyRXKcryCMy4erZqqCbuB1NbR66QTGNXVE0x3Pg6oCIlUR1',
venue: 'mappedin-demo-mall',
labelAllLocationsOnInit: false,
};
const App = () => {
const mapView = React.useRef<MapViewStore>(null);
const location = {
timestamp: 1583957906820,
coords: {
accuracy: 5,
latitude: 43.52012478635707,
longitude: -80.53951744629536,
floorLevel: 0,
},
type: 0,
};
return (
<MiMapView
style={{flex: 1}}
ref={mapView}
options={options}
onFirstMapLoaded={() => {
mapView.current?.BlueDot.enable();
mapView.current?.overrideLocation(location);
}}
/>
);
};
export default App;

Blue Dot Display States

  • When the Blue Dot position given to the Mappedin SDK has a high accuracy (within a few meters) and is on the floor currently displayed, it is displayed as bright blue.

Blue Dot - Accurate

  • If the Mappedin Blue Dot is able to detect that a given position update is inaccurate, a semi-transparent blue shadow is displayed underneath the Blue Dot to indicate uncertainty range.

Bluedot Inaccurate

  • When the BlueDot is on another floor it will look semi-transparent.

Blue Dot - Accurate on another floor

  • The uncertainty range is shown also when displaying the Blue Dot on another floor than the currently viewed one.

Blue Dot Inaccurate on another floor

  • 30 seconds after the latest position update, the BlueDot is displayed as greyed out as it's possible that the user has moved but no updates have been received.

Blue Dot - Outdated

Follow mode

To keep the camera following the Blue Dot (unless user moves the view), you can set the SDK to FOLLOW mode.

mapView.current?.setState(STATE.FOLLOW);

Get live position with react-native-location

react-native-location is one of the many packages providing positioning service access. The sample code below shows the quickest way to integrate that with the Mappedin React Native SDK. The code is edited for brevity to only display the relevant bits.

import RNLocation from 'react-native-location';
const App = () => {
RNLocation.requestPermission({
ios: 'whenInUse',
android: {
detail: 'coarse',
},
}).then((granted) => {
if (granted) {
// Enable blue dot
mapView.current.BlueDot.enable();
RNLocation.subscribeToLocationUpdates((locations) => {
const {
accuracy,
floor,
latitude,
longitude,
timestamp,
} = locations[0];
const location = {
timestamp,
coords: {
latitude,
longitude,
accuracy,
floorLevel: floor,
},
};
// pass locations in
mapView.current.overrideLocation(location);
});
}
});
};

Directions from Blue Dot to a location

The following is a full sample for displaying wayfinding directions from the user's current position to a selected location.

import React from 'react';
import {
MappedinLocation,
MappedinNode,
MapViewStore,
MiMapView,
} from '@mappedin/react-native-sdk';
import {Button} from 'react-native';
// See Trial API key Terms and Conditions
// https://developer.mappedin.com/guides/api-keys
const options = {
clientId: '5eab30aa91b055001a68e996',
clientSecret: 'RJyRXKcryCMy4erZqqCbuB1NbR66QTGNXVE0x3Pg6oCIlUR1',
venue: 'mappedin-demo-mall',
labelAllLocationsOnInit: false,
};
const App = () => {
const mapView = React.useRef<MapViewStore>(null);
const nearestNode = React.useRef<MappedinNode>();
const [selectedLocation, setSelectedLocation] =
React.useState<MappedinLocation>({});
const location = {
timestamp: 1583957906820,
coords: {
accuracy: 5,
latitude: 43.52012478635707,
longitude: -80.53951744629536,
floorLevel: 0,
},
type: 0,
};
return (
<>
<MiMapView
style={{flex: 1}}
ref={mapView}
options={options}
onFirstMapLoaded={() => {
mapView.current?.BlueDot.enable();
mapView.current?.overrideLocation(location);
}}
onBlueDotPositionUpdated={({update}) => {
nearestNode.current = update.nearestNode;
}}
onPolygonClicked={({polygon}) => {
setSelectedLocation(polygon.locations[0]);
mapView.current?.setPolygonColor(polygon, '#ff0000');
}}
/>
<Button
title="Get Directions"
onPress={async () => {
try {
const directions =
nearestNode.current.directionsTo(selectedLocation);
// draw path and connections on map
await mapView.current?.Journey.draw(directions);
// focus on the path
mapView.current?.Camera.focusOn({
nodes: directions.path,
});
} catch (e) {
console.error(e);
}
}}
/>
</>
);
};
export default App;

Additional Reading

Was this page helpful?

Next Topic

Search