Mappedin Logo

Developer

Mappedin Documentation

React Native SDK: Markers

React Native SDK: Markers

Prerequisites

This guide goes a step deeper from the React Native Quickstart and modifies the App from that tutorial.

Drawing markers

The Mappedin React Native SDK allows you to add Markers to the map. These are elements containing arbitrary HTML that the SDK will anchor to a node or a MappedinCoordinate on the map, and automatically handle rotation and repositioning when the camera moves.

Use createMarker -method to draw a marker on the map.

onPolygonClicked={({polygon}) => {
polygon.entrances.forEach(entranceNode => {
mapView.current?.createMarker(
entranceNode,
'<div style="background-color: azure; padding: 0.6rem; border-radius: 10px">Enter here</div>',
{anchor: MARKER_ANCHOR.CENTER},
);
});
}}

This snippet reacts to the user's tap on a polygon to loop through all the entrance nodes for the given polygon and drawing a marker there. If multiple markers are too close to one another, only one will be drawn.

To keep track of the markers we have rendered on the map and to be able to remove them one by one, let's create an array and push our created markers to the arrray.

// outside onPolygonClicked
const markers: string[] = [];
// Modify onPolygonClicked
onPolygonClicked={({polygon}) => {
polygon.entrances.forEach(entranceNode => {
const marker = mapView.current?.createMarker(
entranceNode,
'<div style="background-color: azure; padding: 0.6rem; border-radius: 10px">Enter here</div>',
{anchor: MARKER_ANCHOR.CENTER},
);
if (marker) {
markers.push(marker);
}
});
}}

This will store a unique marker identifier string, which we can later use to remove the marker. For example, this removes the marker that was created first from the array.

onNothingClicked={() => {
const marker = markers.shift();
if (marker) {
mapView.current?.removeMarker(marker);
}
}}

Complete sample

import React from 'react';
import {SafeAreaView} from 'react-native';
import {
MapViewStore,
MARKER_ANCHOR,
MiMapView,
} from '@mappedin/react-native-sdk';
const App = () => {
const mapView = React.useRef<MapViewStore>(null);
const markers: string[] = [];
return (
<SafeAreaView style={{flex: 1}}>
<MiMapView
style={{flex: 1}}
key="mappedin"
ref={mapView}
options={{
clientId: '5eab30aa91b055001a68e996',
clientSecret: 'RJyRXKcryCMy4erZqqCbuB1NbR66QTGNXVE0x3Pg6oCIlUR1',
venue: 'mappedin-demo-mall',
labelAllLocationsOnInit: false,
}}
onFirstMapLoaded={() => {
mapView.current?.labelAllLocations({flatLabels: true});
}}
onPolygonClicked={({polygon}) => {
polygon.entrances.forEach(entranceNode => {
const marker = mapView.current?.createMarker(
entranceNode,
'<div style="background-color: azure; padding: 0.6rem; border-radius: 10px">Enter here</div>',
{anchor: MARKER_ANCHOR.CENTER},
);
if (marker) {
markers.push(marker);
}
});
}}
onNothingClicked={() => {
const marker = markers.shift();
if (marker) {
mapView.current?.removeMarker(marker);
}
}}
/>
</SafeAreaView>
);
};
export default App;

Search Our Docs

Sign Up

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