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.

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

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

onFirstMapLoaded

This is the right time to enable Blue Dot

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

Next Topic

Floating Labels