Open ngdbao opened 3 months ago
Did you fix the issue? @ngdbao
Did you fix the issue? @ngdbao
sadly, not yet :)
can you share the code used for adding the markers or the vector layer
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
@ngdbao Could you show more code? Maybe some small example which will help us reproduce error? Especially code related to adding your markers.
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
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.
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)
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