Adding Interactivity

This guide explains how 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, interactivity can be enabled for the map. Call addInteractivePolygonsForAllLocations to do so.

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. To capture the click event, add a listener for E_SDK_EVENT.CLICK and change the color of the polygon in the callback function. Colors get cleared when a user clicks outside of interactive polygons.

mapView.on(E_SDK_EVENT.CLICK, ({ polygons }) => {
    if (polygons.length > 0) {
      mapView.setPolygonColor(polygons[0], "#BF4320");
    } else {
      mapView.clearAllPolygonColors();
    }
  });

The CodeSandbox below demonstrates this functionality.

Interactive Floating Labels

Interactivity can be enabled for FloatingLabels by calling the labelAllLocations method and passing interactive: true. The E_SDK_EVENT.CLICK event will then be fired when a user clicks on a FloatingLabel.

The code sample below enables interactivity for all FloatingLabels and captures their click event. When a label is clicked, the polygon it is attached to turns red. If the user clicks outside of a label, all polygons are reset to their original colors.

mapView.FloatingLabels.labelAllLocations({ interactive: true });

//Clicking on a FloatingLabel will turn the polygon it is attached to red.
//Clicking anywhere else resets all polygon colors.
mapView.on(E_SDK_EVENT.CLICK, ({ floatingLabels }) => {
  if (floatingLabels && floatingLabels.length > 0) {
    mapView.setPolygonColor(floatingLabels[0].node.polygon, "red");
  } else {
    mapView.clearAllPolygonColors();
  }
});

For more information on FloatingLabels, refer to the Floating Labels Guide.

The following Codesandbox demonstrates the sample code above within a full app.

Interactive Paths

Interactivity can be enabled for Journey and Paths by setting interactive: true in the TPathOptions.

Start by generating directions from a start and end location.

const startLocation = venue.locations.find(
  (location) => location.name === "ThinkKitchen"
)!;
const endLocation = venue.locations.find(
  (location) => location.name === "American Eagle"
)!;
const directions = startLocation.directionsTo(endLocation);

For more information on directions and wayfinding, read the A-B Wayfinding guide.

Next, draw the Journey or Path for the directions and enable the interactive option.

// Journey
mapView.Journey.draw(directions, {
  pathOptions: {
    interactive: true,
  },
});

// Paths
mapView.Paths.add(directions.path, {
  interactive: true,
});

The mouse cursor will adapt to a pointer when hovering an interactive Path. On mouse click the E_SDK_EVENT.CLICK listener will return the array of Paths at the selected point on the map.

To make changes to the Journey or Path selected, redraw it with the Path passed to the event and new options.

// Journey
mapView.on(E_SDK_EVENT.CLICK, ({ paths }) => {
  paths?.forEach((path) => {
    mapView.Journey.clear();
    const directions = path.nodes[0].directionsTo(
      path.nodes[path.nodes.length - 1]
    );
    mapView.Journey.draw(directions, {
      pathOptions: { color: "#BF4320", animateDrawing: false },
    });
  });
});

// Paths
mapView.on(E_SDK_EVENT.CLICK, ({ paths }) => {
  paths?.forEach((path) => {
    mapView.Paths.remove(path);
    mapView.Paths.add(path.nodes, {
      color: "#BF4320",
      animateDrawing: false,
    });
  });
});

The following sample shows two interactive Paths. When clicked, they will be drawn in a new color. Clicking anywhere else on the map will reset them both.

Interactive Floating Labels

Interactive Paths

Additional Reading

Sign up for developer updates

For more information