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

[ngdbao]

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

[Adham2023]

Did you fix the issue? @ngdbao

[ngdbao]

Did you fix the issue? @ngdbao

sadly, not yet :)

[mohanedmoh]

can you share the code used for adding the markers or the vector layer

[ngdbao]

can you share the code used for adding the markers or the vector layer

it's simply a PointAnnotation with prop draggable false, wrapping a raw react native component children

[caspg]

@ngdbao Could you show more code? Maybe some small example which will help us reproduce error? Especially code related to adding your markers.

[ngdbao]

Hi, I renderred the markerpoint by Pointannotation geo coordinate and anchor like this:

    const renderMarkerPoint = useMemo(
        () =>
            dataCheckpointWithKeyid?.map((mark, index) => {
                return viewMapLoaded ? (
                    <MarkerPoint
                        key={`${(index || -1) + 1}`}
                        index={index}
                        item={mark}
                        onPressChangePoint={onPressChangePoint}
                        // onChangeViewCamera={onChangeViewCamera}
                        isLastItem={index === dataCheckpointWithKeyid.length - 1}
                        isFirstItem={index === 0}
                    />
                ) : null;
            }),
        [dataCheckpointWithKeyid, viewMapLoaded],
    );

const MarkerPoint = ({
    item,
    index,
    onPressChangePoint,
    isLastItem,
    isFirstItem,
}) => {
    const [imageLoaded, setImageLoaded] = useState(false);
    const markerRef = useRef<any>(null);

    const id = String(index);
    const handleOnLoad = useCallback(() => {
        Platform.OS === 'android' ? setImageLoaded(true) : null;
    }, []);

    useEffect(() => {
        if (imageLoaded) {
            markerRef?.current?.refresh();
            console.log(`====Image ${index} refresh====`);
        }
    }, [imageLoaded]);

    const handleSelected = useCallback(() => {
        onPressChangePoint?.(index);
    }, [index, onPressChangePoint]);

    const anchor = useMemo(() => {
        return isLastItem ? { x: 0.5, y: 0.4 } : isFirstItem ? { x: 0.5, y: 1 } : { x: 0.46, y: 0.21 };
    }, [isFirstItem, isLastItem]);

    const MapCheckPoint = (
        <MapLibreGL.PointAnnotation
            key={id}
            ref={markerRef}
            id={id}
            anchor={anchor}
            coordinate={[item?.geo?.lon || 0, item?.geo?.lat || 0]}
            draggable={false}
            onSelected={handleSelected}>
            <View style={stylesCallout.checkpointContainer}>
                <View style={stylesCallout.container}>
                    <View style={stylesCallout.content}>
                        <AppImage
                            disabled={true}
                            url={item?.images}
                            defaultSource={CHECKPOINT_ICON}
                            style={stylesCallout.startImage}
                            onLoad={handleOnLoad}
                            shouldLoading
                            resizeMode="cover"
                        />
                        <AppText style={stylesCallout.textStart}>{MapDefaultText.START || ''}</AppText>
                        <AppText numberOfLines={1} style={stylesCallout.locationStart}>
                            {truncateText(item?.location, 25) || ''}
                        </AppText>
                    </View>
                </View>
            </View>
        </MapLibreGL.PointAnnotation>
    );

    return MapCheckPoint;
};

MarkerPoint.propTypes = {
    item: PropTypes.any,
    index: PropTypes.number,
    onPressChangePoint: PropTypes.func,
    isLastItem: PropTypes.bool,
    isFirstItem: PropTypes.bool,
    onChangeViewCamera: PropTypes.func,
    viewMapLoaded: PropTypes.bool,
};

export default React.memo(MarkerPoint);

only PointAnnotation, but ShapeSource or LineLayer works fine

[brentforder]

I'm having a similar issue with PointAnnotation being detached from the basemap coordinates, but only on iOS. On Android, my PointAnnotations work wonderfully. On iOS, they are all stuck at the top-left (0,0) view coordinates of the MapView.

I've determined that the coordinate properties of the PointAnnotations are correctly being set with valid geographic coordinates. I'm exploring the idea of migrating from PointAnnotation to ShapeSource and SymbolLayer... But this is quite painful. As far as I can tell, PointAnnotation simply does not work on iOS.

I'm on the bleeding edge, with 10.0.0-alpha.10 and I've customized the iOS Podfile to work with the latest MapLibre Native 6.5.4. If anyone can point me to maplibre-react-native versions where PointAnnotation is definitely working on iOS, I would appreciate it.

[KiwiKilian]

Is anyone still seeing such problems with 10.0.0-alpha.25? I'm using MapLibreGL.PointAnnotation successfully, even with drag and drop. When setCamera is called, it stays put where it should be.

[brentforder]

Is anyone still seeing such problems with 10.0.0-alpha.25? I'm using MapLibreGL.PointAnnotation successfully, even with drag and drop. When setCamera is called, it stays put where it should be.

In my testing with 10.0.0-alpha.25, PointAnnotation is now actually being positioned properly at geographic coordinates on iOS! That's progress! Unfortunately, dragging is only working for me with PointAnnotation on Android. On iOS:

• PointAnnotation.draggable property doesn't work to enable dragging.
• PointAnnotation.onDrag(), onDragStart() etc. do not fire.

[KiwiKilian]

Will need a reproduction. It's working in our app:

https://github.com/user-attachments/assets/95aa7237-4bbe-40cb-bab0-8ef0fe3d201d

[ngdbao]

Hello, I can confirm this issue has gone in alpha26 ✅

[KiwiKilian]

Closing this, as the initial report is fixed.

@brentforder if you are experiencing problems with drag and drop, feel free to open another issue with a reproduction.