Interactivity

In this guide, we will expand on the Getting Started -guide to add interactivity to the map by making the locations clickable.

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.

import { getVenue, showVenue, E_SDK_EVENT } from '@mappedin/mappedin-js';

// See Trial API key Terms and Conditions
// https://developer.mappedin.com/docs/demo-keys-and-maps
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();
}
init();

Hovering over a polygon that has a location attached to it will now change its color and the cursor to indicate that the polygon is clickable. However, nothing will happen when clicking on the polygons. Let's add a listener for the E_SDK_EVENT.POLYGON_CLICKED and change the color of the polygon in the callback function. Let's also clear the colors if we click outside of interactive polygons.

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

mapView.on(E_SDK_EVENT.NOTHING_CLICKED, (polygon) => {
	mapView.clearAllPolygonColors();
});

Below CodeSandbox demonstrates this functionality.