Markers (Legacy)

The Mappedin Web 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 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 the click event. Add the following to your script file:

mapView.on(E_SDK_EVENT.CLICK, ({ polygons }) => {
if (polygons.length > 0) {
const location = mapView.getPrimaryLocationForPolygon(polygons[0]);
if (!location) return;
const { name, logo } = location;
const markerTemplate = `
<div class="marker">
<img src="${logo?.original}" />
mapView.createMarker(polygons[0].entrances[0], markerTemplate);
} else {

Calling removeAllMarkers() when the user clicks outside of interactive polygons will clear all markers from the map.

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

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

Web SDK - You are here marker

Was this page helpful?