Adding Map Markers

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 polygon 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 the following to your HTML <body>:

<div id="mapView" />
<script src=""></script>

Add some basic CSS to style the marker:

.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: 64px;
object-fit: contain;
margin-right: 12px;

Use the createMarker method to add a marker with the location name and logo when a polygon is clicked:

const div = document.getElementById("mapView")
let mapview, venue
const options = {
mapview: {
antialias: "AUTO",
mode: Mappedin.modes.TEST,
onDataLoaded: initializeMapOptions,
venue: {
perspective: "Website",
things: {
venue: ["slug", "name"],
categories: ["name"],
maps: ["name", "elevation", "shortName"],
venue: "mappedin-demo-mall",
function getLocationForPolygonId(polygonId) {
return venue.locations.find(location =>
location.polygons.some(polygon => === polygonId)
function onPolygonClicked(polygonId) {
const location = getLocationForPolygonId(polygonId)
if (location) {
const { name, logo } = location
const markerTemplate = `
<div class="marker">
<img src="${logo?.original}" />
mapview.createMarker(markerTemplate, mapview.getPositionPolygon(polygonId))
function initializeMapOptions() {
mapview.onPolygonClicked = onPolygonClicked
Mappedin.initialize(options, div).then(data => {
mapview = data.mapview
venue = data.venue

The Result

Was this page helpful?