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;

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;
Was this page helpful?