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
returnsTBlueDotStateChange
describing the Blue Dot state including possible errors and display state explanationonBlueDotPositionUpdated
when a new latitude and longitude position is given to the SDKonCameraChanged
when camera position, zoom or tilt is changedonClick
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 dotonDataLoaded
is fired when the venue data is loadedonFirstMapLoaded
when the map view is ready to be interacted withonMapChanged
when the displayed map is changed for example by tapping on a Journey tooltiponPolygonClicked
deprecated in favor of the more generalonClick
onNothingClicked
deprecated in favor of the more generalonClick
onStateChanged
when the map view changes between following the Blue Dot and free camera exploration modesonVenueLoadError
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, });}}