Loading...

Version 1 has been deprecated. View the latest version of this guide.

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="https://d1p5cqqchvbqmy.cloudfront.net/websdk/v1.71.12/mappedin.js/mappedin.js"></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: {
clientId: "<MAPPEDIN_CLIENT_ID>",
clientSecret: "<MAPPEDIN_CLIENT_SECRET>",
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 => polygon.id === polygonId)
)
}
function onPolygonClicked(polygonId) {
const location = getLocationForPolygonId(polygonId)
if (location) {
const { name, logo } = location
const markerTemplate = `
<div class="marker">
<img src="${logo?.original}" />
<p>${name}</p>
</div>`
mapview.createMarker(markerTemplate, mapview.getPositionPolygon(polygonId))
}
}
function initializeMapOptions() {
mapview.addInteractivePolygonsForAllLocations()
mapview.onPolygonClicked = onPolygonClicked
}
Mappedin.initialize(options, div).then(data => {
mapview = data.mapview
venue = data.venue
})

The Result

Was this page helpful?