Skip to main content
Version: 5.0

Markers

Using Mappedin SDK for React Native with your own map requires an Enterprise license. Try a demo map for free or refer to the Pricing page for more information.

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

Drawing Markers​

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

onClick={({polygons}) => {
  if (polygons.length > 0) {
    const location = polygons[0].locations[0];
    const entrance = polygons[0].entrances[0];

    if (!location || !entrance) return;

    mapView.current?.createMarker(
      entrance,
      `<div style="background-color: white; border: 2px solid black; padding: 0.4rem; border-radius: 0.4rem;">${location.name}</div>`,
      {
        anchor: MARKER_ANCHOR.CENTER,
        rank: COLLISION_RANKING_TIERS.ALWAYS_VISIBLE,
      },
    );
  }
}}

This snippet reacts to a user's tap on a polygon to draw a marker with location name at the entrance node. If multiple markers are too close to one another, only one will be displayed.

markers

The complete code sample demonstrating creating markers on polygon touch is available in Mappedin's React Native samples repo on GitHub.

Alternatively, pass a MappedinCoordinate to draw a marker at a specified latitude/longitude.

const coordinate = mapView.current?.currentMap.createCoordinate(
	43.51905183293411, // latitude
	-80.53701846381122, // longitude
);
mapView.current?.createMarker(coordinate, `<div>Marker</div>`, {});

Using a coordinate you don't require a preconfigured node and can place the marker at any arbitrary location on the map.

Removing Markers​

Markers can be removed from the map by passing the marker id returned from createMarker to the removeMarker method.

The following code snippet demonstrates creating a marker on polygon touch and storing the id in state. If a marker exists when the map is touched subsequently then the existing marker is removed.

const mapView = useRef<MapViewStore>(null);
const [marker, setMarker] = useState<string>();

return (
	<SafeAreaView>
		<MiMapView
			key="mappedin"
			ref={mapView}
			options={{
				venue: 'mappedin-demo-mall',
				clientId: '5eab30aa91b055001a68e996',
				clientSecret: 'RJyRXKcryCMy4erZqqCbuB1NbR66QTGNXVE0x3Pg6oCIlUR1',
			}}
			onClick={({ polygons }) => {
				if (marker) {
					mapView.current?.removeMarker(marker);
				}
				if (polygons.length > 0) {
					const newMarker = mapView.current?.createMarker(polygons[0].entrances[0], `<div>Marker</div>`, {
						anchor: MARKER_ANCHOR.CENTER,
					});
					setMarker(newMarker);
				}
			}}
		/>
	</SafeAreaView>
);

Marker Options​

Individual marker anchoring and rank can be tweaked via the options argument of createMarker.

mapView.current?.createMarker(node, `<div>Marker</div>`, {
	anchor: MARKER_ANCHOR.CENTER,
	rank: COLLISION_RANKING_TIERS.ALWAYS_VISIBLE,
});

The anchor option sets the default position of the marker. The positions are defined in the MARKER_ANCHOR enum which contains 5 values. The default position is CENTER.

enum MARKER_ANCHOR {
	CENTER = 0,
	TOP = 1,
	LEFT = 2,
	BOTTOM = 3,
	RIGHT = 4,
}

The rank option enables you to set the priority or rank of the markers. The ranks are defined in the enum COLLISION_RANKING_TIERS. The default rank is HIGH.

Additional Reading​