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 a coordinate 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 CSS for the markers in a style.css file and import it in your HTML or Javascript.
.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;}mapView.createMarker() creates and draws the marker on screen inside the callback funtion for the click event. Add the following to your script file:
mapView.on(E_SDK_EVENT.CLICK, ({ polygons }) => { if (polygons.length > 0) { const location = mapView.getPrimaryLocationForPolygon(polygons[0]); if (!location) return;
const { name, logo } = location;
const markerTemplate = ` <div class="marker"> <img src="${logo?.original}" /> <p>${name}</p> </div>`;
mapView.createMarker(polygons[0].entrances[0], markerTemplate); } else { mapView.removeAllMarkers(); } });Calling removeAllMarkers() when the user clicks outside of interactive polygons will clear all markers from the map.
Markers can also be created with geocoordinates by first creating a MappedinCoordinate.
const coordinate = mapView.currentMap.createCoordinate( 43.51905183293411, -80.53701846381122);mapView.createMarker(coordinate, `<div style="background-color: blue; color: white; padding: 0.3rem; border-radius: 5px;"> You are here </div>`);
