Mappedin Logo

Developer

Mappedin Documentation

Web SDK: Quickstart - 15m

Web SDK: Quickstart - 15m

Follow this 15-minute guide to embed a Mappedin map onto your website.

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 options
var 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:

PropertyValue
venuemappedin-demo-mall
clientIdSee Here
clientSecretSee Here

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 Documentation for more information.

Result

This is what you will get!

 


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.

onPolygonClicked function

This function determines the associated location, and displays its details in the left sidebar.

Result

Search Our Docs

Sign Up

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