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-keysconst 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-keysconst 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;