Adding interactivity

In this guide, we will expand on the Getting Started -guide to add interactivity to the map by making the locations clickable.

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

The callbacks

• onBlueDotStateChanged returns TBlueDotStateChange describing the Blue Dot state including possible errors and display state explanation
• onBlueDotPositionUpdated when a new latitude and longitude position is given to the SDK
• onCameraChanged when camera position, zoom or tilt is changed
• onClick returns the latitude, longitude position, interactive polygons under the interaction (ones with locations attached) and a boolean to express whether the touch was next to the Blue dot
• onDataLoaded is fired when the venue data is loaded
• onFirstMapLoaded when the map view is ready to be interacted with
• onMapChanged when the displayed map is changed for example by tapping on a Journey tooltip
• onPolygonClicked deprecated in favor of the more general onClick
• onNothingClicked deprecated in favor of the more general onClick
• onStateChanged when the map view changes between following the Blue Dot and free camera exploration modes
• onVenueLoadError fired when there is an error loading the venue data

Using mapView

Save a reference to the mapView so that you can access it in the callbacks.

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

  return (
    <MiMapView
      style={{flex: 1}}
      ref={mapView}
      options={options}
      onFirstMapLoaded={() => {
        mapView.current?.BlueDot.enable();
      }}
    />
  );
};

onClick

For example, coloring a polygon when it is touched can be done with

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

onFirstMapLoaded

This is the right time to enable Blue Dot

Copy
onFirstMapLoaded={() => {
  mapView.current?.BlueDot.enable();
  mapView.current?.overrideLocation({
    timestamp: 1583957906820,
    coords: {
      accuracy: 5,
      latitude: 43.52012478635707,
      longitude: -80.53951744629536,
      floorLevel: 0,
    },
    type: 0,
  });
}}