maplibre-react-native
maplibre-react-native copied to clipboard
[10.0.0-alpha.5] _cameraRef?.current?.setCamera causing markerpoint get detached from maps-base
<MapLibreGL.MapView
ref={_mapRef}
style={mapStyle}
styleURL={mapStyleUrl}
zoomEnabled={true}
logoEnabled={false}
compassEnabled={false}
attributionEnabled={true}
attributionPosition={{ bottom: getSize.m(8), left: getSize.m(8) }}
pitchEnabled
rotateEnabled
compassViewPosition={2}
onDidFinishLoadingMap={handleMapLoaded}>
<MapLibreGL.Camera
ref={_cameraRef}
defaultSettings={{
bounds: boundingBox,
}}
followUserLocation={showMyLocation}
followUserMode={'normal'}
followZoomLevel={13}
/>
<MapLibreGL.UserLocation
renderMode={Platform.OS === 'ios' ? 'normal' : 'native'}
showsUserHeadingIndicator={true}
visible={showMyLocation}
/>
{renderMarkerPoint}
{renderUnSelectedMarkerPoint}
{renderSelectedMarkerPoint}
</MapLibreGL.MapView>
context:
{renderMarkerPoint} {renderUnSelectedMarkerPoint} {renderSelectedMarkerPoint}
are using
MapLibreGL.PointAnnotation MapLibreGL.ShapeSource MapLibreGL.LineLayer
tap on any of them, would trigger this function to move camera (which triggered by onSelected prop)
const onChangeViewCamera = React.useCallback(({ lon, lat }) => {
console.log('Moving camera to: ', lon, lat);
_cameraRef?.current?.setCamera({
centerCoordinate: [lon, lat],
animationDuration: 800,
animationMode: 'flyTo',
zoomLevel: 14,
padding: handlePadding(getSize.m(30)),
});
}, []);
Expected Behavior
Everything works well on v8 or v9 as normal, just move camera only when tapping markers
Actual Behavior
On pre-release version v10 all of markers, and camera view get detached from map base, please take a look on this video:
https://github.com/maplibre/maplibre-react-native/assets/77522114/340d9615-b5a2-428d-8c51-599b01846e1f
Version(s) affected
- Platform: [Android, iOS]
- maplibre-react-native Version [10.0.0-alpha.5]
- React Native Version [0.72.10]