Blue Dot
Using Mappedin SDK for React Native with your own map requires an Enterprise license. Try a demo map for free or refer to the Pricing page for more information.
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/docs/demo-keys-and-maps
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.
- 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.
- When the BlueDot is on another floor it will look semi-transparent.
- The uncertainty range is shown also when displaying the Blue Dot on another floor than the currently viewed one.
- 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.
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/docs/demo-keys-and-maps
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;