{"id":19488564,"url":"https://github.com/tomekvenits/react-native-map-clustering","last_synced_at":"2025-05-16T14:07:16.301Z","repository":{"id":38428881,"uuid":"102126680","full_name":"tomekvenits/react-native-map-clustering","owner":"tomekvenits","description":"React Native map clustering both for Android and iOS.","archived":false,"fork":false,"pushed_at":"2024-02-15T14:09:50.000Z","size":6396,"stargazers_count":713,"open_issues_count":78,"forks_count":232,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-05-09T14:01:32.330Z","etag":null,"topics":["clustering","map","maps","mapview","markers","react","react-native"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tomekvenits.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-09-01T15:25:34.000Z","updated_at":"2025-04-25T11:37:55.000Z","dependencies_parsed_at":"2024-06-18T15:31:19.847Z","dependency_job_id":null,"html_url":"https://github.com/tomekvenits/react-native-map-clustering","commit_stats":{"total_commits":130,"total_committers":18,"mean_commits":7.222222222222222,"dds":0.5769230769230769,"last_synced_commit":"4bb33f3e5806760748b8c94622e76917ca56b613"},"previous_names":["tomekvenits/react-native-map-clustering","venits/react-native-map-clustering"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomekvenits%2Freact-native-map-clustering","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomekvenits%2Freact-native-map-clustering/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomekvenits%2Freact-native-map-clustering/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomekvenits%2Freact-native-map-clustering/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tomekvenits","download_url":"https://codeload.github.com/tomekvenits/react-native-map-clustering/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254509476,"owners_count":22082891,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["clustering","map","maps","mapview","markers","react","react-native"],"created_at":"2024-11-10T21:01:27.833Z","updated_at":"2025-05-16T14:07:16.283Z","avatar_url":"https://github.com/tomekvenits.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# React Native Map Clustering\n\nReact Native module that handles map clustering for you.\n\nWorks with **Expo** and **react-native-cli** 🚀\n\nThis repo is proudly sponsored by:\n\n\u003ca href=\"https://reactnativemarket.com/\" rel=\"nofollow\" target=\"_blank\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/venits/react-native-market/master/assets/banner.png\" width=\"280\"\u003e\u003cbr /\u003e\n  React Native Templates \u0026 Starter Kits and Apps for easier start.\n\u003c/a\u003e\n\n## Demo\n\n![Demo](https://raw.githubusercontent.com/venits/react-native-map-clustering/assets/assets/demo.gif)\n\n## Installation\n\n```js\nnpm install react-native-map-clustering react-native-maps --save\n// yarn add react-native-map-clustering react-native-maps\n```\n\n### Full example\n\n```js\nimport React from \"react\";\nimport MapView from \"react-native-map-clustering\";\nimport { Marker } from \"react-native-maps\";\n\nconst INITIAL_REGION = {\n  latitude: 52.5,\n  longitude: 19.2,\n  latitudeDelta: 8.5,\n  longitudeDelta: 8.5,\n};\n\nconst App = () =\u003e (\n  \u003cMapView initialRegion={INITIAL_REGION} style={{ flex: 1 }}\u003e\n    \u003cMarker coordinate={{ latitude: 52.4, longitude: 18.7 }} /\u003e\n    \u003cMarker coordinate={{ latitude: 52.1, longitude: 18.4 }} /\u003e\n    \u003cMarker coordinate={{ latitude: 52.6, longitude: 18.3 }} /\u003e\n    \u003cMarker coordinate={{ latitude: 51.6, longitude: 18.0 }} /\u003e\n    \u003cMarker coordinate={{ latitude: 53.1, longitude: 18.8 }} /\u003e\n    \u003cMarker coordinate={{ latitude: 52.9, longitude: 19.4 }} /\u003e\n    \u003cMarker coordinate={{ latitude: 52.2, longitude: 21 }} /\u003e\n    \u003cMarker coordinate={{ latitude: 52.4, longitude: 21 }} /\u003e\n    \u003cMarker coordinate={{ latitude: 51.8, longitude: 20 }} /\u003e\n  \u003c/MapView\u003e\n);\n\nexport default App;\n```\n\n## Props\n\n| Name                                        | Type                  | Default                                      | Note                                                                                                                                                                                                                            |\n| ------------------------------------------- | --------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **clusterColor**                            | String                | #00B386                                      | Background color of cluster.                                                                                                                                                                                                    |\n| **clusterTextColor**                        | String                | #FFFFFF                                      | Color of text in cluster.                                                                                                                                                                                                       |\n| **clusterFontFamily**                       | String                | undefined                                    | Font family of text in cluster.                                                                                                                                                                                                 |\n| **onClusterPress(cluster, markers)**        | Function              | () =\u003e {}                                     | Allows you to control cluster on click event. Function returns information about cluster and its markers.                                                                                                                       |\n| **tracksViewChanges**                       | Bool                  | false                                        | Sets whether the cluster markers should track view changes. It's turned off by default to improve cluster markers performance.                                                                                                  |\n| **width**                                   | Number                | window width                                 | map's width.                                                                                                                                                                                                                    |\n| **height**                                  | Number                | window height                                | map's height.                                                                                                                                                                                                                   |\n| **radius**                                  | Number                | window.width \\* 6%                           | [SuperCluster radius](https://github.com/mapbox/supercluster#options).                                                                                                                                                          |\n| **extent**                                  | Number                | 512                                          | [SuperCluster extent](https://github.com/mapbox/supercluster#options).                                                                                                                                                          |\n| **minZoom**                                 | Number                | 1                                            | [SuperCluster minZoom](https://github.com/mapbox/supercluster#options).                                                                                                                                                         |\n| **maxZoom**                                 | Number                | 20                                           | [SuperCluster maxZoom](https://github.com/mapbox/supercluster#options).                                                                                                                                                         |\n| **minPoints**                               | Number                | 2                                            | [SuperCluster minPoints](https://github.com/mapbox/supercluster#options).                                                                                                                                                       |\n| **preserveClusterPressBehavior**            | Bool                  | false                                        | If set to true, after clicking on cluster it will not be zoomed.                                                                                                                                                                |\n| **edgePadding**                             | Object                | { top: 50, left: 50, bottom: 50, right: 50 } | Edge padding for [react-native-maps's](https://github.com/react-community/react-native-maps/blob/master/docs/mapview.md#methods) `fitToCoordinates` method, called in `onClusterPress` for fitting to pressed cluster children. |\n| **animationEnabled**                        | Bool                  | true                                         | Animate imploding/exploding of clusters' markers and clusters size change. **Works only on iOS**.                                                                                                                               |\n| **layoutAnimationConf**                     | LayoutAnimationConfig | LayoutAnimation.Presets.spring               | `LayoutAnimation.Presets.spring`                                                                                                                                                                                                | Custom Layout animation configuration object for clusters animation during implode / explode **Works only on iOS**. |\n| **onRegionChangeComplete(region, markers)** | Function              | () =\u003e {}                                     | Called when map's region changes. In return you get current region and markers data.                                                                                                                                            |\n| **onMarkersChange(markers)**                | Function              | () =\u003e {}                                     | Called when markers change. In return you get markers data.                                                                                                                                                                     |\n| **superClusterRef**                         | MutableRefObject      | {}                                           | Return reference to `supercluster` library. You can read more about options it has [here.](https://github.com/mapbox/supercluster)                                                                                              |\n| **clusteringEnabled**                       | Bool                  | true                                         | Set true to enable and false to disable clustering.                                                                                                                                                                             |\n| **spiralEnabled**                           | Bool                  | true                                         | Set true to enable and false to disable spiral view.                                                                                                                                                                            |\n| **renderCluster**                           | Function              | undefined                                    | Enables you to render custom cluster with custom styles and logic.                                                                                                                                                              |\n| **spiderLineColor**                         | String                | #FF0000                                      | Enables you to set color of spider line which joins spiral location with center location.                                                                                                                                       |\n\n## How to animate to region?\n\nFull example of how to use `animateToRegion()`.\n\n```js\nimport React, { useRef } from \"react\";\nimport { Button } from \"react-native\";\nimport MapView from \"react-native-map-clustering\";\nimport { Marker } from \"react-native-maps\";\n\nconst INITIAL_REGION = {\n  latitude: 52.5,\n  longitude: 19.2,\n  latitudeDelta: 8.5,\n  longitudeDelta: 8.5,\n};\n\nconst App = () =\u003e {\n  const mapRef = useRef();\n\n  const animateToRegion = () =\u003e {\n    let region = {\n      latitude: 42.5,\n      longitude: 15.2,\n      latitudeDelta: 7.5,\n      longitudeDelta: 7.5,\n    };\n\n    mapRef.current.animateToRegion(region, 2000);\n  };\n\n  return (\n    \u003c\u003e\n      \u003cMapView\n        ref={mapRef}\n        initialRegion={INITIAL_REGION}\n        style={{ flex: 1 }}\n      /\u003e\n      \u003cButton onPress={animateToRegion} title=\"Animate\" /\u003e\n    \u003c/\u003e\n  );\n};\n\nexport default App;\n```\n\n### Support\n\nFeel free to create issues and pull requests. I will try to provide as much support as possible over GitHub. In case of questions or problems, contact me at:\n[tony@venits.com](tony@venits.com)\n\n### Happy Coding 💖🚀\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomekvenits%2Freact-native-map-clustering","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomekvenits%2Freact-native-map-clustering","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomekvenits%2Freact-native-map-clustering/lists"}