Mappedin Logo

Developer

Mappedin Documentation

Web SDK v4: Adding Markers to the Map

Web SDK v4: 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 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: 32px;
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. The below shows the complete example with the marker creation highlighted:

main.js
import { E_SDK_EVENT, getVenue, showVenue } from "@mappedin/mappedin-js";
const options = {
venue: "mappedin-demo-mall",
clientId: "5eab30aa91b055001a68e996",
clientSecret: "RJyRXKcryCMy4erZqqCbuB1NbR66QTGNXVE0x3Pg6oCIlUR1"
};
async function init() {
const venue = await getVenue(options);
const mapView = await showVenue(document.getElementById("app")!, venue);
mapView.addInteractivePolygonsForAllLocations();
mapView.labelAllLocations({ flatLabels: true });
mapView.on(E_SDK_EVENT.POLYGON_CLICKED, (polygon) => {
const location = mapView.getPrimaryLocationForPolygon(polygon);
if (!location) return;
const { name, logo } = location;
const markerTemplate = `
<div class="marker">
<img src="${logo?.original}" />
<p>${name}</p>
</div>`;
mapView.createMarker(polygon.entrances[0], markerTemplate);
});
}
init();

To remove markers, you could add the following:

mapView.on(E_SDK_EVENT.NOTHING_CLICKED, () => {
mapView.removeAllMarkers()
})

The Result

On this page

Search Our Docs

Sign Up

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