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 to face the camera.

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

onClick={({polygons}) => {
if (polygons?.length > 0) {
polygons[0].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},
);
});
}
}}

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

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 array. This will store a unique marker identifier string, which we can later use to remove the marker.. When no polygons are selected, the marker that was created first from the array is removed.

// outside onPolygonClicked
const markers: string[] = [];
// Modify onClicked
onClick={({polygons}) => {
if (polygons?.length > 0) {
polygons[0].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);
}
});
} else {
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={{
// See Trial API key Terms and Conditions
// https://developer.mappedin.com/guides/api-keys
clientId: '5eab30aa91b055001a68e996',
clientSecret: 'RJyRXKcryCMy4erZqqCbuB1NbR66QTGNXVE0x3Pg6oCIlUR1',
venue: 'mappedin-demo-mall',
labelAllLocationsOnInit: false,
}}
onFirstMapLoaded={() => {
mapView.current?.flatLabels.labelAllLocations();
}}
onClick={({polygons}) => {
if (polygons?.length > 0) {
polygons[0].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);
}
});
} else {
const marker = markers.shift();
if (marker) {
mapView.current?.removeMarker(marker);
}
}
}}
/>
</SafeAreaView>
);
};
export default App;
Was this page helpful?

Next Topic

Minimap