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