Mappedin Logo

Developer

Mappedin Documentation

Web SDK: Adding Markers to the Map

Web SDK: Adding Markers to the Map

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

On this page

Search Our Docs

Sign Up

© 2020 Copyright Mappedin, All Rights Reserved. View our Privacy Policy