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})