Mappedin Web SDK v1 is deprecated. Please use the latest version for new projects.
Display a Map
Setup HTML
Load the Mappedin Web SDK and create a div element where the map will be rendered
<html> <head> <script src="https://d1p5cqqchvbqmy.cloudfront.net/websdk/v1.71.12/mappedin.js" /> </head> <body> <div id="mapView" /> </body></html>Configure Options for SDK
Write this code inside a <script> tag beneath the body tag:
var div = document.getElementById('mapView')
//setup Mappedin SDK optionsvar options = { mapview: { antialias: "AUTO", //auto apply antialiasing mode: Mappedin.modes.TEST, //automatically test for 3d or 2d mode }, venue: { venue: "mappedin-demo-mall", clientId: "<MAPPEDIN_CLIENT_ID>", clientSecret: "<MAPPEDIN_CLIENT_SECRET>", perspective: "Website", //pick the perspective you would like to load things: { //fetch some data venue: ['slug', 'name'], maps: ['name', 'elevation', 'shortName'] }, },}
Mappedin.initialize(options, div);The mapview settings object is used to specify the initial settings for our map.
Further Reading: Handling Loading Callbacks & Showing a Loading Screen
The venue object is where you configure options to download data from the Mappedin platform. Use the credentials provided by your Mappedin representative or these demo keys and venue:
To minimize transfer time, the SDK will only download the data that you specify in the venue.things object. Refer to the Mappedin Web SDK v1 API Reference for more information.
Add Interactivity to the Map
Let's add labels to locations in our map and allow clicking on the locations to see more information. Start by updating your document's HTML and CSS.
Sample Code
<html> <head> <script src="https://d1p5cqqchvbqmy.cloudfront.net/websdk/v1.71.12/mappedin.js"></script> </head> <body> <div class="container"> <div id="sidebar"> <h2>Selected Location:</h2> <div id="location-details"></div> </div> <div id="mapView" /> </div> </body></html>body { margin: 0; padding: 0;}
.container { display: grid; grid-template-columns: minmax(200px, 25%) 1fr; height: 400px;}
#sidebar { height: 100%; margin: 0; padding: 0 12px; overflow-y: scroll; border-right: 1px dashed grey;}
#sidebar img { max-width: 100%; max-height: 128px; object-fit: contain;}
#mapview { position: relative;}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 detailsContainer = document.getElementById("location-details"); detailsContainer.innerHTML = "";
const title = document.createElement("h3"); title.textContent = location.name; detailsContainer.append(title);
const logoSrc = location?.logo?.original; if (logoSrc) { const logo = document.createElement("img"); logo.src = logoSrc; detailsContainer.append(logo); }
const description = document.createElement("p"); description.textContent = location.description; detailsContainer.append(description); }}
function initializeMapOptions() { mapview.addInteractivePolygonsForAllLocations(); mapview.onPolygonClicked = onPolygonClicked; mapview.labelAllLocations({ smartLabels: true });}
const div = document.getElementById("mapView");
Mappedin.initialize(options, div).then((data) => { mapview = data.mapview; venue = data.venue;});initializeMapOptions function
mapview.addInteractivePolygonsForAllLocations will automatically highlight any location's polygons when the user hovers above them.
mapview.onPolygonClicked is a function that gets triggered when the polygon is clicked.
mapview.labelAllLocations displays labels for all locations. smartLabels: true enables the new style of 3D labels that hover as pins above their respective locations. Omitting this option is not recommended as this invokes the deprecated labels functionality.
