JiriHoffmann / react-native-clusterer

React Native clustering library using C++ Supercluster implementation
MIT License
159 stars 20 forks source link

[IOS] The marker and the cluster do not appear #20

Closed nicolasmht closed 8 months ago

nicolasmht commented 2 years ago

Issue

The bug is that the marker does not appear when I zoom on the map but It only appears when the view is very zoomed out.

I changed the options and particularly the radius, tested with Google Maps, downgraded the react-native-maps lib version to that of the example, downgraded the react-native-clusterer package version to 1.2.1, but the bug still exists.

I test on a real mobile :

https://user-images.githubusercontent.com/6557776/196496607-bf54ad3d-cbab-44be-b278-594f1a11ebd0.MP4

Code

Click To Expand ```typescript import React, { useState } from 'react'; import { Dimensions } from 'react-native'; import { Clusterer } from 'react-native-clusterer'; import MapView, { Marker } from 'react-native-maps'; const MAP_WIDTH = Dimensions.get('window').width; const MAP_HEIGHT = Dimensions.get('window').height; const MAP_DIMENSIONS = { width: MAP_WIDTH, height: MAP_HEIGHT }; const initialRegion = { latitude: 48.86266341967402, latitudeDelta: 0.28612106852801844, longitude: 2.339449357241392, longitudeDelta: 0.25176655501127243, }; const MARKERS = [ { id: '01', type: 'Feature', geometry: { type: 'Point', coordinates: [48.85207806320952, 2.2872968444366686], }, properties: { id: 'name-01', name: 'Paris 01', }, }, { id: '02', type: 'Feature', geometry: { type: 'Point', coordinates: [48.82270138544876, 2.354931422861827], }, properties: { id: 'name-02', name: 'Paris 02', }, }, { id: '03', type: 'Feature', geometry: { type: 'Point', coordinates: [48.87624440405881, 2.353214809196214], }, properties: { id: 'name-03', name: 'Paris 03', }, }, ]; const Map = () => { const [region, setRegion] = useState(initialRegion); return ( { return ( ); }} /> ); }; export default Map; ```

Environement

Click To Expand **Package version** : - ```react-native``` 0.68.2 - ```react-native-maps``` 1.3.1 - ```react-native-clusterer``` 1.2.2 **```react-native info``` output:** ``` System: OS: macOS 12.6 CPU: (4) x64 Intel(R) Core(TM) i7-5557U CPU @ 3.10GHz Memory: 28.88 MB / 16.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 18.11.0 - /usr/local/bin/node Yarn: 1.22.19 - ~/NightCrawl/Mobile/node_modules/.bin/yarn npm: 8.19.2 - /usr/local/bin/npm Watchman: Not Found Managers: CocoaPods: 1.11.3 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.4, iOS 16.0, macOS 12.3, tvOS 16.0, watchOS 9.0 Android SDK: Not Found IDEs: Android Studio: 2021.2 AI-212.5712.43.2112.8512546 Xcode: 14.0.1/14A400 - /usr/bin/xcodebuild Languages: Java: javac 19 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 17.0.2 => 17.0.2 react-native: 0.68.2 => 0.68.2 react-native-macos: Not Found npmGlobalPackages: *react-native*: Not Found ```
benedusi commented 2 years ago

I think the marker coordinates are inverted, you probably inverted it at the point geometry too, it should be [lng, lat]

nicolasmht commented 2 years ago

I think the marker coordinates are inverted, you probably inverted it at the point geometry too, it should be [lng, lat]

@benedusi Thank you for your answer ! Indeed the positions were reversed! Everything works fine now 👌