[IOS] The marker and the cluster do not appear

[nicolasmht]

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 :

RPReplay_Final1666112191.MP4

Code

Click To Expand

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 (
    <MapView style={MAP_DIMENSIONS} onRegionChangeComplete={setRegion}>
      <Clusterer
        data={MARKERS}
        region={region}
        mapDimensions={MAP_DIMENSIONS}
        options={{ radius: 18 }}
        renderItem={item => {
          return (
            <Marker
              key={item.id}
              coordinate={{
                latitude: item.geometry.coordinates[0],
                longitude: item.geometry.coordinates[1],
              }}
            />
          );
        }}
      />
    </MapView>
  );
};

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]

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

[nicolasmht]

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 👌