Markers

Mappedin JS allows you to add Markers to the map. These are elements containing arbitrary HTML that the SDK will anchor to a node or a coordinate on the map, and automatically handle rotation and repositioning when the camera moves. In the following example, we will create an experience that allows a user to click on a location on the map to view its name and logo.

Add some CSS for the markers in a style.css file and import it in your HTML or Javascript.

.marker {
	display: flex;
	align-items: center;
	background-color: #fff;
	max-height: 64px;
	border: 2px solid grey;
	padding: 4px 12px;
	font-weight: bold;
	font-family: sans-serif;
}

.marker img {
	max-width: 64px;
	max-height: 32px;
	object-fit: contain;
	margin-right: 12px;
}

mapView.createMarker() creates and draws the marker on screen inside the callback funtion for polygon click. Add the following to your script file:

mapView.on(E_SDK_EVENT.POLYGON_CLICKED, (polygon) => {
	const location = mapView.getPrimaryLocationForPolygon(polygon);
	if (!location) return;

	const { name, logo } = location;

	const markerTemplate = `
      <div class="marker">
        <img src="${logo?.original}" />
        <p>${name}</p>
      </div>`;

	mapView.createMarker(polygon.entrances[0], markerTemplate);
});

To remove markers call removeAllMarkers() when the user clicks outside of interactive polygons:

mapView.on(E_SDK_EVENT.NOTHING_CLICKED, () => {
	mapView.removeAllMarkers();
});

Markers can also be created with geocoordinates by first creating a MappedinCoordinate.

const coordinate = mapView.currentMap.createCoordinate(43.51905183293411, -80.53701846381122);
mapView.createMarker(
	coordinate,
	`<div style="background-color: blue; color: white; padding: 0.3rem; border-radius: 5px;">
  You are here
  </div>`,
);