maplibre-react-native icon indicating copy to clipboard operation
maplibre-react-native copied to clipboard

[10.0.0-alpha.5] _cameraRef?.current?.setCamera causing markerpoint get detached from maps-base

Open ngdbao opened this issue 8 months ago • 7 comments

<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]

ngdbao avatar Jun 18 '24 15:06 ngdbao