Interactivity

Mappedin SDK for React Native version 6 is currently in an alpha state while Mappedin perfects new features and APIs. Open the v6 release notes to view the latest changes.

Using Mappedin SDK for React Native with your own map requires a Pro license. Try a demo map for free or refer to the Pricing page for more information.

This guide explains how to enhance a map's interactivity by making components clickable. Interactivity can greatly improve the user experience and user engagement with a map.

A complete example demonstrating interactivity can be found in the Mappedin React Native Github repo: interactivity.tsx

Interactive Spaces

Spaces can be set to interactive to allow a user to click on them. When interactivity is enabled for a space, it enables a hover effect that highlights the space when the cursor is moved over the space.

The following code enables interactivity for all spaces:

// Set each space to be interactive.
mapData.getByType('space').forEach((space: Mappedin.Space) => {
	mapView.updateState(space, {
		interactive: true,
	});
});

Hover Interactivity

When interactivity is enabled for a space, it enables a hover effect that highlights the space when the cursor is moved over the space. The highlight color can also be customised to match the style of the map.

The following code sample enables interactivity for all spaces on the map and sets the hover color to red.

// Set each space to be interactive and its hover color to red.
mapData.getByType('space').forEach((space: Mappedin.Space) => {
	mapView.updateState(space, {
		interactive: true,
		hoverColor: 'red',
	});
});

Interactive Labels

Labels added to the map can be set to interactive to allow users to click on them and have the click event captured by an app. The code sample below adds a label to each space with a name and sets the label's interactivity to true.

Declarative

// Get all spaces with names
const spaces = mapData.getByType('space').filter(space => space.name);

// Label all spaces with its space name and make them interactive.
return (
<>
  {spaces.map(space => (
    <Label
      key={space.externalId}
      target={space}
      text={space.name} // label text
      options={{
        interactive: true,
      }}
      onLoad={(label) => {
        console.log("Label loaded:", label);
      }}
    />
  ))}
</>
);

Imperative

// Label all spaces with its space name and make them interactive.
mapData.getByType('space').forEach((space: Mappedin.Space) => {
  if (space.name) {
    mapView.Labels.add(space, space.name, { options: { interactive: true }});
  }
});

After enabling interactivity, click events on the label can be captured using the useEvent hook. The Mappedin.TClickPayload object passed into the hook will contain an array of labels that were clicked.

The following code sample captures the click event and checks if the user clicked on a label. If they did, it logs the id of the label that was clicked and focuses the camera on the label.

// Act on the click event to log the id of the label and
// focus the camera on the label.
  useEvent("click", (payload: Mappedin.TClickPayload) => {
      if (payload.labels && payload.labels.length > 0) {
        const label = payload.labels[0];
        console.log("Clicked on label: " + label.id);

        mapView.Camera.focusOn(label, {
          maxZoomLevel: 20,
          duration: 300,
          easing: "ease-in-out",
        });
      }
  });

Interactive Markers

Markers are another component that can be set to interactive, allowing them to be clickable and have an app act on the click event. The interactive property of a Marker can be set to true, false or pointer-events-auto.

• false - The Marker is not interactive.
• true - The Marker is interactive and the click event is captured by the 'MapView' event handler.
• pointer-events-auto - The Marker is interactive and mouse events are passed to the Marker's HTML content.

The code sample below adds a marker to each space with a name and sets the marker's interactivity to true.

// Get all spaces with names
const spaces = mapData.getByType('space').filter(space => space.name);

// Add a Marker on all spaces with its space name and make them interactive.
return (
<>
  {spaces.map(space => (
    <Marker
      key={space.externalId}
      target={space}
      html={`
        <div>
          ${space.name}
        </div>
      `}
      options={{
        interactive: true,
      }}
      onLoad={(marker: Mappedin.Marker) => {
        console.log("Marker marker loaded:" + marker.id);
      }}
    />
  ))}
</>
);

After enabling interactivity, click events on the marker can be captured using the useEvent hook. The Mappedin.TClickPayload object passed into the hook will contain an array of markers that were clicked.

The following code sample captures the click event and checks if the user clicked on a marker. If they did, it logs the id of the marker that was clicked and focuses the camera on the marker.

// Act on the click event to log the id of the marker and
// focus the camera on the marker.
  useEvent("click", (payload: Mappedin.TClickPayload) => {
      if (payload.markers && payload.markers.length > 0) {
        const marker = payload.markers[0];
        console.log("Clicked on marker: " + marker.id);

        mapView.Camera.focusOn(marker, {
          maxZoomLevel: 20,
          duration: 300,
          easing: "ease-in-out",
        });
      }
  });

Handling Click and Hover Events

Mappedin SDK for React Native enables capturing and responding to click and hover events through its event handling system. After enabling interactivity, click or hover events on the space can be captured using useEvent hook.

The Mappedin.TEvents click and hover events pass Mappedin.TClickPayload that contains the objects the user clicked or hovered on. It allows developers to obtain information about user interactions with various elements on the map, such as:

1. blueDot: A boolean value indicating if the user clicked on the blue dot.
2. coordinate - A Mappedin.Coordinate object that contains the latitude and longitude of the point where the user clicked.
3. facades - An array of Mappedin.Facade objects that were clicked.
4. floors - An array of Mappedin.Floor objects. If the map contains multiple floors, floors under the click point are included.
5. labels - An array of Mappedin.Label objects that were clicked.
6. markers - An array of Mappedin.Marker objects that were clicked.
7. models - An array of Mappedin.Model objects that were clicked.
8. objects - An array of Mappedin.MapObject objects that were clicked.
9. paths - An array of Mappedin.Path objects that were clicked.
10. pointerEvent - A Mappedin.PointerEvent object that contains the pointer event data.
11. shapes - An array of Mappedin.Shape objects that were clicked.
12. spaces - An array of Mappedin.Space objects that were clicked.

Use useEvent("click"... or useEvent("hover"... to capture click or hover events as shown below.

useEvent("click", (payload: Mappedin.TClickPayload) => {
  // The user clicked!
});

  useEvent("hover", (payload: Mappedin.THoverPayload) => {
  // The user hovered!
});

A complete example demonstrating interactivity can be found in the Mappedin React Native Github repo: interactivity.tsx