Adding 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.

src/main.ts
import { getVenue, showVenue, TGetVenueOptions, E_SDK_EVENT } from "@mappedin/mappedin-js";
import "@mappedin/mappedin-js/lib/mappedin.css";
// See Trial API key Terms and Conditions
// https://developer.mappedin.com/guides/api-keys
const options: TGetVenueOptions = {
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.

In Mappedin SDK v5, POLYGON_CLICKED and NOTHING_CLICKED has been deprecated in favor of CLICK. Let's add a listener for the E_SDK_EVENT.CLICK 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.CLICK, ({ polygons }) => {
if (polygons.length > 0) {
mapView.setPolygonColor(polygons[0], "#BF4320");
} else {
mapView.clearAllPolygonColors();
}
});

Below CodeSandbox demonstrates this functionality.

Was this page helpful?

Next Topic

Flat Labels