Mappedin Logo

Developer

Mappedin Documentation

Web SDK v4: Adding interactivity

Web SDK v4: Adding interactivity

In this guide, we will expand on the loading a map guide to add interactivity to the map by making the locations clickable. Keep the files from the previous guide and continue by editing the main.js.

Once the showVenue promise returns, the map is loaded and ready to be interacted with. Using the returned MapView we can start adding functionality to the map. Add a call to addInteractivePolygonsForAllLocations on line 13.

main.js
import { getVenue, showVenue } from "https://d1p5cqqchvbqmy.cloudfront.net/websdk/v4.0.8/esm/renderer/index.js";
async function init() {
const venue = await getVenue({
venue: "mappedin-demo-mall",
clientId: "<MAPPEDIN_CLIENT_ID>",
clientSecret: "<MAPPEDIN_CLIENT_SECRET>",
});
const mapView = await showVenue(
document.getElementById("mappedin-map"),
venue
);
mapView.addInteractivePolygonsForAllLocations();
}
document.addEventListener("DOMContentLoaded", init);

Hovering over a polygon will now change it's color and the cursor to indicate that the polygon is clickable.

However, nothing will happen when we click on the polygons. Let's add a listener for E_SDK_EVENT.POLYGON_CLICKED and a callback to color the clicked polygon.

mapView.on(E_SDK_EVENT.POLYGON_CLICKED, polygon => {
mapView.setPolygonColor(polygon, "#BF4320")
})

Let's clear the colors if the user clicks outside of a polygon by listening to E_SDK_EVENT.NOTHING_CLICKED.

Result

main.js
import { getVenue, showVenue } from "https://d1p5cqqchvbqmy.cloudfront.net/websdk/v4.0.8/esm/renderer/index.js";
async function init() {
const venue = await getVenue({
venue: "mappedin-demo-mall",
clientId: "<MAPPEDIN_CLIENT_ID>",
clientSecret: "<MAPPEDIN_CLIENT_SECRET>",
});
const mapView = await showVenue(
document.getElementById("mappedin-map"),
venue
);
mapView.addInteractivePolygonsForAllLocations();
mapView.on(E_SDK_EVENT.POLYGON_CLICKED, polygon => {
mapView.setPolygonColor(polygon, "#BF4320")
})
mapView.on(E_SDK_EVENT.NOTHING_CLICKED, polygon => {
mapView.clearAllPolygonColors();
})
}
document.addEventListener("DOMContentLoaded", init);

Search Our Docs

Sign Up

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