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.

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 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.

// 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={{
					// See Trial API key Terms and Conditions
					// https://developer.mappedin.com/docs/demo-keys-and-maps
					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;