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
.
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-keysconst 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. We'll 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.