From 680fc49a440ea66cdb33e9ab8f27afd88ec9d1d3 Mon Sep 17 00:00:00 2001 From: Cyril Marceau Date: Sat, 6 Sep 2025 15:03:29 +0200 Subject: [PATCH 1/5] feat(mapview:android): gestures click and longClick event --- .../rnmapboxtoolkit/RnMapboxToolkitView.kt | 45 +++++++++++++++---- .../RnMapboxToolkitViewManager.kt | 2 + .../events/OnMapLongClickListenerEvent.kt | 23 ++++++++++ example/src/App.tsx | 3 ++ src/Mapview.tsx | 2 +- src/Mapview.type.ts | 14 ++++++ src/specs/NativeComponentsMapView.ts | 15 +++++++ 7 files changed, 95 insertions(+), 9 deletions(-) create mode 100644 android/src/main/java/com/rnmapboxtoolkit/events/OnMapLongClickListenerEvent.kt diff --git a/android/src/main/java/com/rnmapboxtoolkit/RnMapboxToolkitView.kt b/android/src/main/java/com/rnmapboxtoolkit/RnMapboxToolkitView.kt index 8d15a14..dea3879 100644 --- a/android/src/main/java/com/rnmapboxtoolkit/RnMapboxToolkitView.kt +++ b/android/src/main/java/com/rnmapboxtoolkit/RnMapboxToolkitView.kt @@ -15,6 +15,7 @@ import com.mapbox.maps.plugin.attribution.generated.AttributionSettings import com.mapbox.maps.plugin.compass.compass import com.mapbox.maps.plugin.compass.generated.CompassSettings import com.mapbox.maps.plugin.gestures.OnMapClickListener +import com.mapbox.maps.plugin.gestures.OnMapLongClickListener import com.mapbox.maps.plugin.gestures.generated.GesturesSettings import com.mapbox.maps.plugin.gestures.gestures import com.mapbox.maps.plugin.logo.generated.LogoSettings @@ -26,6 +27,7 @@ import com.rnmaps.fabric.event.OnMapClickListenerEvent import com.rnmaps.fabric.event.OnMapIdleEvent import com.rnmaps.fabric.event.OnMapLoadedEvent import com.rnmaps.fabric.event.OnMapLoadingErrorEvent +import com.rnmaps.fabric.event.OnMapLongClickListenerEvent import com.rnmaps.fabric.event.OnRenderFrameFinishedEvent import com.rnmaps.fabric.event.OnRenderFrameStartedEvent import com.rnmaps.fabric.event.OnSourceAddedEvent @@ -43,7 +45,10 @@ class RnMapboxToolkitView : ViewGroup { private var mapView: MapView? = null private val subscriptions = mutableListOf() + private val gestureListeners = mutableListOf() private var clickListener: OnMapClickListener? = null + private var longClickListener: OnMapLongClickListener? = null + constructor(context: Context?) : super(context) { initialize() @@ -237,8 +242,8 @@ class RnMapboxToolkitView : ViewGroup { val surfaceId = UIManagerHelper.getSurfaceId(reactContext) val eventDispatcher = UIManagerHelper.getEventDispatcherForReactTag(reactContext, id) - mapView?.let { map -> - val mClickListener = OnMapClickListener { point -> + mapView?.gestures?.let { gestures -> + OnMapClickListener { point -> val position = mapView?.mapboxMap?.cameraState val payload = Arguments.createMap().apply { @@ -253,11 +258,30 @@ class RnMapboxToolkitView : ViewGroup { } val event = OnMapClickListenerEvent(surfaceId, id, properties) eventDispatcher?.dispatchEvent(event) - true // Consume the event + true + }.also { + gestures.addOnMapClickListener(it) + gestureListeners.add(it) } + OnMapLongClickListener { point -> + val position = mapView?.mapboxMap?.cameraState + val payload = Arguments.createMap().apply { + putMap("coordinates", point.toReadableMap()) + putDouble("zoom", position?.zoom ?: 0.0) + putDouble("bearing", position?.bearing ?: 0.0) + putDouble("pitch", position?.pitch ?: 0.0) + } - mapView?.gestures?.addOnMapClickListener(mClickListener) - clickListener = mClickListener + val properties = Arguments.createMap().apply { + putMap("properties", payload) + } + val event = OnMapLongClickListenerEvent(surfaceId, id, properties) + eventDispatcher?.dispatchEvent(event) + true + }.also { + gestures.addOnMapLongClickListener(it) + gestureListeners.add(it) + } } } private fun cleanupMapListeners() { @@ -266,10 +290,15 @@ class RnMapboxToolkitView : ViewGroup { } private fun cleanupGestureListeners() { - clickListener?.let { it -> - mapView?.gestures?.removeOnMapClickListener(it) - clickListener = null + mapView?.gestures?.let { gestures -> + gestureListeners.forEach { listener -> + when (listener) { + is OnMapClickListener -> gestures.removeOnMapClickListener(listener) + is OnMapLongClickListener -> gestures.removeOnMapLongClickListener(listener) + } + } } + gestureListeners.clear() } fun setStyleURL(style: String) { diff --git a/android/src/main/java/com/rnmapboxtoolkit/RnMapboxToolkitViewManager.kt b/android/src/main/java/com/rnmapboxtoolkit/RnMapboxToolkitViewManager.kt index 4628cfc..c88552a 100644 --- a/android/src/main/java/com/rnmapboxtoolkit/RnMapboxToolkitViewManager.kt +++ b/android/src/main/java/com/rnmapboxtoolkit/RnMapboxToolkitViewManager.kt @@ -13,6 +13,7 @@ import com.rnmaps.fabric.event.OnMapClickListenerEvent import com.rnmaps.fabric.event.OnMapIdleEvent import com.rnmaps.fabric.event.OnMapLoadedEvent import com.rnmaps.fabric.event.OnMapLoadingErrorEvent +import com.rnmaps.fabric.event.OnMapLongClickListenerEvent import com.rnmaps.fabric.event.OnRenderFrameFinishedEvent import com.rnmaps.fabric.event.OnRenderFrameStartedEvent import com.rnmaps.fabric.event.OnSourceAddedEvent @@ -58,6 +59,7 @@ class RnMapboxToolkitViewManager : SimpleViewManager(), OnStyleImageMissingEvent.EVENT_NAME to mapOf("registrationName" to OnStyleImageMissingEvent.EVENT_NAME), OnSourceRemovedEvent.EVENT_NAME to mapOf("registrationName" to OnSourceRemovedEvent.EVENT_NAME), OnMapClickListenerEvent.EVENT_NAME to mapOf("registrationName" to OnMapClickListenerEvent.EVENT_NAME), + OnMapLongClickListenerEvent.EVENT_NAME to mapOf("registrationName" to OnMapLongClickListenerEvent.EVENT_NAME), ) } diff --git a/android/src/main/java/com/rnmapboxtoolkit/events/OnMapLongClickListenerEvent.kt b/android/src/main/java/com/rnmapboxtoolkit/events/OnMapLongClickListenerEvent.kt new file mode 100644 index 0000000..945368c --- /dev/null +++ b/android/src/main/java/com/rnmapboxtoolkit/events/OnMapLongClickListenerEvent.kt @@ -0,0 +1,23 @@ +package com.rnmaps.fabric.event + +import com.facebook.react.bridge.WritableMap +import com.facebook.react.uimanager.events.Event + +class OnMapLongClickListenerEvent( + surfaceId: Int, + viewId: Int, + private val payload: WritableMap +) : Event(surfaceId, viewId) { + + companion object { + const val EVENT_NAME = "onMapLongClick" + } + + override fun getEventName(): String { + return EVENT_NAME + } + + override fun getEventData(): WritableMap { + return payload + } +} diff --git a/example/src/App.tsx b/example/src/App.tsx index 81d8d2f..090c7f4 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -53,6 +53,9 @@ export default function App() { console.log('onSourceRemoved', e.nativeEvent.properties.sourceId) } onMapClick={(e) => console.log('onMapClick', e.nativeEvent.properties)} + onMapLongClick={(e) => + console.log('onMapLongClick', e.nativeEvent.properties) + } /> ); } diff --git a/src/Mapview.tsx b/src/Mapview.tsx index 90aa79a..88d33ff 100644 --- a/src/Mapview.tsx +++ b/src/Mapview.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import NativeComponentsMapView from './specs/NativeComponentsMapView'; import type { MapViewProps } from './Mapview.type'; +import NativeComponentsMapView from './specs/NativeComponentsMapView'; const MapView: React.FC = (props) => { return ; diff --git a/src/Mapview.type.ts b/src/Mapview.type.ts index 35ae689..b82a309 100644 --- a/src/Mapview.type.ts +++ b/src/Mapview.type.ts @@ -69,6 +69,18 @@ export type OnMapClickEvent = NativeSyntheticEvent<{ }; }>; +export type OnMapLongClickEvent = NativeSyntheticEvent<{ + properties: { + pitch: number; + bearing: number; + zoom: number; + coordinate: { + latitude: number; + longitude: number; + }; + }; +}>; + export type MapViewProps = ViewProps & { color?: string; styleUrl?: StyleURL; @@ -439,4 +451,6 @@ export type MapViewProps = ViewProps & { onSourceRemoved?: (e: OnSourceRemovedEvent) => void; onMapClick?: (e: OnMapClickEvent) => void; + + onMapLongClick?: (e: OnMapLongClickEvent) => void; }; diff --git a/src/specs/NativeComponentsMapView.ts b/src/specs/NativeComponentsMapView.ts index 6f61001..458d99c 100644 --- a/src/specs/NativeComponentsMapView.ts +++ b/src/specs/NativeComponentsMapView.ts @@ -62,6 +62,20 @@ export type OnMapClickEventHandler = DirectEventHandler< }> >; +export type OnMapLongClickEventHandler = DirectEventHandler< + Readonly<{ + properties: { + pitch: Double; + bearing: Double; + zoom: Double; + coordinate: { + latitude: Double; + longitude: Double; + }; + }; + }> +>; + export type StyleURL = | 'standard' | 'standard-satellite' @@ -154,6 +168,7 @@ interface NativeComponentsMapViewProps extends ViewProps { onSourceRemoved?: OnSourceRemovedHandler; onMapClick?: OnMapClickEventHandler; + onMapLongClick?: OnMapClickEventHandler; } export default codegenNativeComponent( From db32011296f08eb644cd28f0bc065897285e33e6 Mon Sep 17 00:00:00 2001 From: Cyril Marceau Date: Mon, 8 Sep 2025 22:41:55 +0200 Subject: [PATCH 2/5] feat(mapview:android): implement native module for retrieve zoom level --- .../rnmapboxtoolkit/RnMapboxToolkitPackage.kt | 6 +- .../{ => fabric}/RnMapboxToolkitView.kt | 19 ++- .../RnMapboxToolkitViewManager.kt | 35 +++-- .../modules/NativeMapViewModule.kt | 37 +++++ example/src/App.tsx | 127 ++++++++++-------- src/Mapview.tsx | 29 +++- src/index.ts | 4 +- src/specs/NativeMapViewModule.ts | 7 + 8 files changed, 179 insertions(+), 85 deletions(-) rename android/src/main/java/com/rnmapboxtoolkit/{ => fabric}/RnMapboxToolkitView.kt (96%) rename android/src/main/java/com/rnmapboxtoolkit/{ => fabric}/RnMapboxToolkitViewManager.kt (71%) create mode 100644 android/src/main/java/com/rnmapboxtoolkit/modules/NativeMapViewModule.kt create mode 100644 src/specs/NativeMapViewModule.ts diff --git a/android/src/main/java/com/rnmapboxtoolkit/RnMapboxToolkitPackage.kt b/android/src/main/java/com/rnmapboxtoolkit/RnMapboxToolkitPackage.kt index a7e0256..eb496dd 100644 --- a/android/src/main/java/com/rnmapboxtoolkit/RnMapboxToolkitPackage.kt +++ b/android/src/main/java/com/rnmapboxtoolkit/RnMapboxToolkitPackage.kt @@ -4,6 +4,8 @@ import com.facebook.react.ReactPackage import com.facebook.react.bridge.NativeModule import com.facebook.react.bridge.ReactApplicationContext import com.facebook.react.uimanager.ViewManager +import com.rnmapboxtoolkit.fabric.RnMapboxToolkitViewManager +import com.rnmapboxtoolkit.modules.NativeMapViewModule import java.util.ArrayList class RnMapboxToolkitViewPackage : ReactPackage { @@ -14,6 +16,8 @@ class RnMapboxToolkitViewPackage : ReactPackage { } override fun createNativeModules(reactContext: ReactApplicationContext): List { - return emptyList() + val modulesManager: MutableList = ArrayList() + modulesManager.add(NativeMapViewModule(reactContext)) + return modulesManager } } diff --git a/android/src/main/java/com/rnmapboxtoolkit/RnMapboxToolkitView.kt b/android/src/main/java/com/rnmapboxtoolkit/fabric/RnMapboxToolkitView.kt similarity index 96% rename from android/src/main/java/com/rnmapboxtoolkit/RnMapboxToolkitView.kt rename to android/src/main/java/com/rnmapboxtoolkit/fabric/RnMapboxToolkitView.kt index dea3879..828ed66 100644 --- a/android/src/main/java/com/rnmapboxtoolkit/RnMapboxToolkitView.kt +++ b/android/src/main/java/com/rnmapboxtoolkit/fabric/RnMapboxToolkitView.kt @@ -1,4 +1,4 @@ -package com.rnmapboxtoolkit +package com.rnmapboxtoolkit.fabric import android.content.Context import android.util.AttributeSet @@ -8,8 +8,9 @@ import com.facebook.react.bridge.Arguments import com.facebook.react.bridge.ReactContext import com.facebook.react.uimanager.UIManagerHelper import com.mapbox.common.Cancelable -import com.mapbox.geojson.Point +import com.mapbox.maps.EdgeInsets import com.mapbox.maps.MapView +import com.mapbox.maps.plugin.PuckBearing import com.mapbox.maps.plugin.attribution.attribution import com.mapbox.maps.plugin.attribution.generated.AttributionSettings import com.mapbox.maps.plugin.compass.compass @@ -18,10 +19,15 @@ import com.mapbox.maps.plugin.gestures.OnMapClickListener import com.mapbox.maps.plugin.gestures.OnMapLongClickListener import com.mapbox.maps.plugin.gestures.generated.GesturesSettings import com.mapbox.maps.plugin.gestures.gestures +import com.mapbox.maps.plugin.locationcomponent.location import com.mapbox.maps.plugin.logo.generated.LogoSettings import com.mapbox.maps.plugin.logo.logo import com.mapbox.maps.plugin.scalebar.generated.ScaleBarSettings import com.mapbox.maps.plugin.scalebar.scalebar +import com.mapbox.maps.plugin.viewport.data.FollowPuckViewportStateBearing +import com.mapbox.maps.plugin.viewport.data.FollowPuckViewportStateOptions +import com.mapbox.maps.plugin.viewport.state.FollowPuckViewportState +import com.mapbox.maps.plugin.viewport.viewport import com.rnmapboxtoolkit.extensions.toReadableMap import com.rnmaps.fabric.event.OnMapClickListenerEvent import com.rnmaps.fabric.event.OnMapIdleEvent @@ -36,7 +42,6 @@ import com.rnmaps.fabric.event.OnStyleDataLoadedEvent import com.rnmaps.fabric.event.OnStyleImageMissingEvent import com.rnmaps.fabric.event.OnStyleLoadedEvent - class RnMapboxToolkitView : ViewGroup { companion object { @@ -46,8 +51,6 @@ class RnMapboxToolkitView : ViewGroup { private var mapView: MapView? = null private val subscriptions = mutableListOf() private val gestureListeners = mutableListOf() - private var clickListener: OnMapClickListener? = null - private var longClickListener: OnMapLongClickListener? = null constructor(context: Context?) : super(context) { @@ -333,4 +336,10 @@ class RnMapboxToolkitView : ViewGroup { fun setGestureOptions(block: (GesturesSettings.Builder) -> Unit) { mapView?.gestures?.updateSettings(block) } + + fun getZoom(): Double? { + return mapView?.mapboxMap?.cameraState?.zoom + } + + } diff --git a/android/src/main/java/com/rnmapboxtoolkit/RnMapboxToolkitViewManager.kt b/android/src/main/java/com/rnmapboxtoolkit/fabric/RnMapboxToolkitViewManager.kt similarity index 71% rename from android/src/main/java/com/rnmapboxtoolkit/RnMapboxToolkitViewManager.kt rename to android/src/main/java/com/rnmapboxtoolkit/fabric/RnMapboxToolkitViewManager.kt index c88552a..542d509 100644 --- a/android/src/main/java/com/rnmapboxtoolkit/RnMapboxToolkitViewManager.kt +++ b/android/src/main/java/com/rnmapboxtoolkit/fabric/RnMapboxToolkitViewManager.kt @@ -1,4 +1,4 @@ -package com.rnmapboxtoolkit +package com.rnmapboxtoolkit.fabric import com.facebook.react.bridge.ReadableMap import com.facebook.react.module.annotations.ReactModule @@ -6,8 +6,8 @@ import com.facebook.react.uimanager.SimpleViewManager import com.facebook.react.uimanager.ThemedReactContext import com.facebook.react.uimanager.ViewManagerDelegate import com.facebook.react.uimanager.annotations.ReactProp -import com.facebook.react.viewmanagers.RnMapboxToolkitViewManagerInterface import com.facebook.react.viewmanagers.RnMapboxToolkitViewManagerDelegate +import com.facebook.react.viewmanagers.RnMapboxToolkitViewManagerInterface import com.rnmapboxtoolkit.mapper.MapStyleURL import com.rnmaps.fabric.event.OnMapClickListenerEvent import com.rnmaps.fabric.event.OnMapIdleEvent @@ -27,10 +27,10 @@ import toGestureSettingsBlock import toLogoSettingsBlock import toScaleBarSettingsBlock - @ReactModule(name = RnMapboxToolkitViewManager.NAME) class RnMapboxToolkitViewManager : SimpleViewManager(), RnMapboxToolkitViewManagerInterface { + private val mDelegate: ViewManagerDelegate = RnMapboxToolkitViewManagerDelegate(this) @@ -48,23 +48,21 @@ class RnMapboxToolkitViewManager : SimpleViewManager(), override fun getExportedCustomDirectEventTypeConstants(): Map? { return mapOf( - OnMapIdleEvent.EVENT_NAME to mapOf("registrationName" to OnMapIdleEvent.EVENT_NAME), - OnStyleLoadedEvent.EVENT_NAME to mapOf("registrationName" to OnStyleLoadedEvent.EVENT_NAME), - OnMapLoadedEvent.EVENT_NAME to mapOf("registrationName" to OnMapLoadedEvent.EVENT_NAME), - OnMapLoadingErrorEvent.EVENT_NAME to mapOf("registrationName" to OnMapLoadingErrorEvent.EVENT_NAME), - OnRenderFrameFinishedEvent.EVENT_NAME to mapOf("registrationName" to OnRenderFrameFinishedEvent.EVENT_NAME), - OnRenderFrameStartedEvent.EVENT_NAME to mapOf("registrationName" to OnRenderFrameStartedEvent.EVENT_NAME), - OnSourceAddedEvent.EVENT_NAME to mapOf("registrationName" to OnSourceAddedEvent.EVENT_NAME), - OnStyleDataLoadedEvent.EVENT_NAME to mapOf("registrationName" to OnStyleDataLoadedEvent.EVENT_NAME), - OnStyleImageMissingEvent.EVENT_NAME to mapOf("registrationName" to OnStyleImageMissingEvent.EVENT_NAME), - OnSourceRemovedEvent.EVENT_NAME to mapOf("registrationName" to OnSourceRemovedEvent.EVENT_NAME), - OnMapClickListenerEvent.EVENT_NAME to mapOf("registrationName" to OnMapClickListenerEvent.EVENT_NAME), - OnMapLongClickListenerEvent.EVENT_NAME to mapOf("registrationName" to OnMapLongClickListenerEvent.EVENT_NAME), + OnMapIdleEvent.Companion.EVENT_NAME to mapOf("registrationName" to OnMapIdleEvent.Companion.EVENT_NAME), + OnStyleLoadedEvent.Companion.EVENT_NAME to mapOf("registrationName" to OnStyleLoadedEvent.Companion.EVENT_NAME), + OnMapLoadedEvent.Companion.EVENT_NAME to mapOf("registrationName" to OnMapLoadedEvent.Companion.EVENT_NAME), + OnMapLoadingErrorEvent.Companion.EVENT_NAME to mapOf("registrationName" to OnMapLoadingErrorEvent.Companion.EVENT_NAME), + OnRenderFrameFinishedEvent.Companion.EVENT_NAME to mapOf("registrationName" to OnRenderFrameFinishedEvent.Companion.EVENT_NAME), + OnRenderFrameStartedEvent.Companion.EVENT_NAME to mapOf("registrationName" to OnRenderFrameStartedEvent.Companion.EVENT_NAME), + OnSourceAddedEvent.Companion.EVENT_NAME to mapOf("registrationName" to OnSourceAddedEvent.Companion.EVENT_NAME), + OnStyleDataLoadedEvent.Companion.EVENT_NAME to mapOf("registrationName" to OnStyleDataLoadedEvent.Companion.EVENT_NAME), + OnStyleImageMissingEvent.Companion.EVENT_NAME to mapOf("registrationName" to OnStyleImageMissingEvent.Companion.EVENT_NAME), + OnSourceRemovedEvent.Companion.EVENT_NAME to mapOf("registrationName" to OnSourceRemovedEvent.Companion.EVENT_NAME), + OnMapClickListenerEvent.Companion.EVENT_NAME to mapOf("registrationName" to OnMapClickListenerEvent.Companion.EVENT_NAME), + OnMapLongClickListenerEvent.Companion.EVENT_NAME to mapOf("registrationName" to OnMapLongClickListenerEvent.Companion.EVENT_NAME), ) } - - @ReactProp(name = "color") override fun setColor(view: RnMapboxToolkitView?, color: String?) { @@ -75,7 +73,7 @@ class RnMapboxToolkitViewManager : SimpleViewManager(), view: RnMapboxToolkitView?, value: String? ) { - val style = MapStyleURL.toMapboxStyleUrl(value) + val style = MapStyleURL.Companion.toMapboxStyleUrl(value) view?.setStyleURL(style) } @@ -143,6 +141,7 @@ class RnMapboxToolkitViewManager : SimpleViewManager(), } } + companion object { const val NAME = "RnMapboxToolkitView" } diff --git a/android/src/main/java/com/rnmapboxtoolkit/modules/NativeMapViewModule.kt b/android/src/main/java/com/rnmapboxtoolkit/modules/NativeMapViewModule.kt new file mode 100644 index 0000000..b909a63 --- /dev/null +++ b/android/src/main/java/com/rnmapboxtoolkit/modules/NativeMapViewModule.kt @@ -0,0 +1,37 @@ +package com.rnmapboxtoolkit.modules + +import android.view.View +import com.facebook.react.bridge.Promise +import com.facebook.react.bridge.ReactApplicationContext +import com.facebook.react.bridge.UiThreadUtil +import com.facebook.react.module.annotations.ReactModule +import com.rnmapboxtoolkit.NativeMapViewModuleSpec +import com.rnmapboxtoolkit.fabric.RnMapboxToolkitView + +@ReactModule(name = NativeMapViewModule.NAME) +class NativeMapViewModule(private val reactContext: ReactApplicationContext): NativeMapViewModuleSpec(reactContext) { + override fun getName(): String = "NativeMapViewModule" + + companion object { + const val NAME = "NativeMapViewModule" + } + + override fun getZoomLevel(viewTag: Double, promise: Promise) { + try { + UiThreadUtil.runOnUiThread { + val view = reactContext.currentActivity?.findViewById(viewTag.toInt()) + + if (view != null) { + val zoomLevel = view.getZoom() + promise.resolve(zoomLevel) + } else { + promise.reject("VIEW_NOT_FOUND", "Could not find MapView with tag: $viewTag") + } + } + } catch (e: Exception) { + promise.reject("GET_ZOOM_LEVEL_ERROR", "Error getting zoom level: ${e.message}") + } + } + + +} diff --git a/example/src/App.tsx b/example/src/App.tsx index 090c7f4..dc2ce50 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -1,62 +1,77 @@ -import { StyleSheet } from 'react-native'; -import { MapView } from 'rn-mapbox-toolkit'; +import React from 'react'; +import { Button, StyleSheet } from 'react-native'; +import { MapView, type MapViewRef } from 'rn-mapbox-toolkit'; export default function App() { + const mapRef = React.useRef(null); + + const handleGetZoom = async () => { + try { + console.log(await mapRef.current?.getZoomLevel()); + } catch (error) { + console.error('An error occured', error); + } + }; + return ( - - console.log( - 'onMapIdle', - JSON.stringify(e.nativeEvent.properties, null, 2) - ) - } - onMapLoaded={() => console.log('onMapLoaded trigger')} - onStyleDataLoaded={(e) => console.log(e.nativeEvent.properties.type)} - onStyleLoaded={() => console.log('onStyleLoaded trigger')} - onMapLoadingError={(e) => - console.log('onMapLoadingError', e.nativeEvent.properties.type) - } - onSourceAdded={(e) => - console.log('onSourceAdded', e.nativeEvent.properties.sourceId) - } - onStyleImageMissing={(e) => - console.log('onStyleImageMissing', e.nativeEvent.properties.imageId) - } - // onRenderFrameStarted={() => console.log('onRenderFrameStarted')} - // onRenderFrameFinished={() => console.log('onRenderFrameFinished')} - onSourceRemoved={(e) => - console.log('onSourceRemoved', e.nativeEvent.properties.sourceId) - } - onMapClick={(e) => console.log('onMapClick', e.nativeEvent.properties)} - onMapLongClick={(e) => - console.log('onMapLongClick', e.nativeEvent.properties) - } - /> + <> + + console.log( + 'onMapIdle', + JSON.stringify(e.nativeEvent.properties, null, 2) + ) + } + onMapLoaded={() => console.log('onMapLoaded trigger')} + onStyleDataLoaded={(e) => console.log(e.nativeEvent.properties.type)} + onStyleLoaded={() => console.log('onStyleLoaded trigger')} + onMapLoadingError={(e) => + console.log('onMapLoadingError', e.nativeEvent.properties.type) + } + onSourceAdded={(e) => + console.log('onSourceAdded', e.nativeEvent.properties.sourceId) + } + onStyleImageMissing={(e) => + console.log('onStyleImageMissing', e.nativeEvent.properties.imageId) + } + // onRenderFrameStarted={() => console.log('onRenderFrameStarted')} + // onRenderFrameFinished={() => console.log('onRenderFrameFinished')} + onSourceRemoved={(e) => + console.log('onSourceRemoved', e.nativeEvent.properties.sourceId) + } + onMapClick={(e) => console.log('onMapClick', e.nativeEvent.properties)} + onMapLongClick={(e) => + console.log('onMapLongClick', e.nativeEvent.properties) + } + /> +