Adding Interactivity

The MiMapView component takes several callbacks as props, which can be used to add interactivity between the map component and the rest of the application.

Callback Functions

onBlueDotStateChanged is called when Blue Dot State has changed. It returns TBlueDotStateChange describing the Blue Dot state including possible errors and display state explanation.
onBlueDotPositionUpdated is called when Blue Dot receives a new position update. It returns TBlueDotPositionUpdate containing the new latitude and longitude position given to the SDK.
onCameraChanged is called when a camera property has changed. It returns the current camera position, rotation, tilt and zoom.
onClick returns a TMapClickEvent containing the items interacted with and additional properties.
onDataLoaded is called when the venue data has been loaded.
onFirstMapLoaded is called when the MapView is ready to be interacted with.
onMapChanged is called when the MapView changes to a new map, for example when the user changes floors levels.
onStateChanged is called when the MapView changes between following the Blue Dot and free camera exploration modes.
onVenueLoadError is called when there is an error loading the venue data.

The following callbacks are deprecated. Going forward, use the more general onClick.

[Deprecated] onNothingClicked is called when clicking outside of any interactive polygons.
[Deprecated] onPolygonClicked is called when an interactive polygon is clicked.

Using the MapViewStore

Add a ref attribute to <MiMapView /> to save a reference of the MapViewStore. This reference is used to interact with the MapView inside a callback.

const App = () => {
  const mapView = React.useRef<MapViewStore>(null);

  return <MiMapView ref={mapView} />;
};

Read more about the useRef hook in the React documentation.

Interactive Polygons

By default, all polygons have interactivity enabled. The TMapClickEvent which have been interacted with.

The selected polygons are passed as a property through the onClick function. To change the color of an interacted polygon, use the MapViewStore reference's setPolygonColor function.

onClick={({ polygons }) => {
  if (polygons.length > 0) {
    mapView.current?.setPolygonColor(polygons[0], "#BF4320");
  }
}}

Interactive Floating Labels

FloatingLabels are enabled by default for all locations, but they lack interactivity. To add interactive FloatingLabels they must be created manually after map initialization.

For more information on directions and wayfinding, read the Floating Labels guide.

Begin by setting labelAllLocationsOnInit: false in the MiMapView options property.

options={{
  venue: "<VENUE_SLUG>",
  clientId: "<MAPPEDIN_CLIENT_ID>",
  clientSecret: "<MAPPEDIN_CLIENT_SECRET>",
  labelAllLocationsOnInit: false,
}}

Then, in the onFirstMapLoaded callback create the labels and pass the option interactive: true.

onFirstMapLoaded={() => {
  mapView.current?.FloatingLabels.labelAllLocations({
    interactive: true,
  });
}}

With interactive FloatingLabels enabled, the onClick callback will now pass the array of selected labels via the TMapClickEvent. The following snippet will set the polygon to red when the label is tapped. Tapping outside of the labels will reset all colors.

onClick={({floatingLabels}) => {
  if (floatingLabels && floatingLabels.length > 0) {
    mapView.current?.setPolygonColor(
      floatingLabels[0].node.polygon,
      'red',
    );
  } else {
    mapView.current?.clearAllPolygonColors();
  }
}}

Interactive Paths

Interactivity can be enabled for Journey and Paths by setting interactive: true in the TPathOptions. The TMapClickEvent contains the array of Paths which have been interacted with.

This could be used to enable tapping on inactive paths to set the Journey step. To do this, start by creating multi-destination directions when the map finishes loading.

onFirstMapLoaded={() => {
  const departure = mapView.current?.venueData?.locations.find(
    (location) => location.name === "ThinkKitchen"
  )!;
  const directions = departure.directionsTo(
    new MappedinDestinationSet([
      mapView.current?.venueData?.locations.find(
        (location) => location.name === "American Eagle"
      )!,
      mapView.current?.venueData?.locations.find(
        (location) => location.name === "Target"
      )!,
    ])
  );
  mapView.current?.Journey.draw(directions, {
    inactivePathOptions: {
      interactive: true,
    },
  });
}}

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

When the map is touched, the onClick callback will trigger with the array of tapped Paths passed through. Activity the selected Path by providing the array item to the Journey.setStepByPath function.

onClick={({ paths }) => {
  paths?.forEach((path) => {
    mapView.current?.Journey.setStepByPath(path);
  });
}}

Interactive Markers

Markers can be set to interactive to allow an app to detect when the user clicks on them. This is done by setting interactive to true in the TCreateMarkerOptions object when adding the marker. Refer to the Marker Guide for more information on using Markers.

Adding an interactive marker:

const markerTemplate = `
  <div class="marker">
    <p>It's a Marker!</p>
  </div>`;

mapView.Markers.add(nodeOrCoordinate, markerTemplate
    { interactive: true });

Interactive Tooltips

Enabling interactivity for a tooltip allows an app to perform an action when the user clicks on it. This is accomplished by setting interactive to true in the TCreateTooltipOptions object when adding the marker. Refer to the Tooltips Guide for more information on using tooltips.

Creating an interactive tooltip:

mapView.createTooltip(nodeOrCoordinate, 
    `<div tabindex="0" style="padding: 10px;">A Tooltip!</div>`,
    { interactive: true });