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.

Copy
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 contains the array of MappedinPolygons 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.

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

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

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

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

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

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

Additional Reading

• Using Digital Maps to Improve Security Personnel Safety and Response Times
• Create a leasing map for a mall with Mappedin Web SDK
• Integrate Office Maps with Workspace Reservations
• Build Your Own Directory: Displaying the Map and Mobile Pass