{"id":17856801,"url":"https://github.com/codempireio/react-native-cluster-map","last_synced_at":"2025-04-08T04:18:31.557Z","repository":{"id":48034203,"uuid":"177807363","full_name":"codempireio/react-native-cluster-map","owner":"codempireio","description":"ReactNative MapView clustering component for iOS + Android","archived":false,"fork":false,"pushed_at":"2024-09-27T05:47:28.000Z","size":6617,"stargazers_count":76,"open_issues_count":5,"forks_count":15,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-28T18:11:59.956Z","etag":null,"topics":["cluster","clustering","custom-cluster-marker","google-maps","map-cluster","marker","react","react-native","supercluser","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codempireio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2019-03-26T14:39:40.000Z","updated_at":"2025-02-14T15:52:43.000Z","dependencies_parsed_at":"2024-10-14T01:16:25.170Z","dependency_job_id":null,"html_url":"https://github.com/codempireio/react-native-cluster-map","commit_stats":{"total_commits":31,"total_committers":8,"mean_commits":3.875,"dds":0.4838709677419355,"last_synced_commit":"a9e85a2febcc500a2dbf86ec29573ee5062859ad"},"previous_names":["codempireio/react-native-maps-clusterize"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codempireio%2Freact-native-cluster-map","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codempireio%2Freact-native-cluster-map/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codempireio%2Freact-native-cluster-map/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codempireio%2Freact-native-cluster-map/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codempireio","download_url":"https://codeload.github.com/codempireio/react-native-cluster-map/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247685617,"owners_count":20979085,"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":["cluster","clustering","custom-cluster-marker","google-maps","map-cluster","marker","react","react-native","supercluser","typescript"],"created_at":"2024-10-28T03:09:20.157Z","updated_at":"2025-04-08T04:18:31.532Z","avatar_url":"https://github.com/codempireio.png","language":"TypeScript","readme":"# react-native-cluster-map\n\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg)]()\n[![Version](https://img.shields.io/npm/v/react-native-cluster-map.svg)](https://www.npmjs.com/package/react-native-cluster-map)\n[![npm](https://img.shields.io/npm/dt/react-native-cluster-map.svg)](https://www.npmjs.com/package/react-native-cluster-map)\n[![Email](https://img.shields.io/badge/contact-CODEMPIRE-blue.svg?style=flat)](mailto:sales@codempire.io)\n\nReact Native MapView clustering component for iOS + Android\n\n---\n\nMade by [CODEMPIRE](http://codempire.io/)\n\n## Examples\n\n| Zoom in                                                   | Zoom out                                                                |\n| --------------------------------------------------------- | ----------------------------------------------------------------------- |\n| ![Example zoom out](demo/images/zoom-in.gif)              | ![Example zoom in](demo/images/zoom-out.gif)                            |\n| **Cluster Expand**                                        | **Nested Cluster Expand**                                               |\n| ![Example cluster expand](demo/images/cluster-expand.gif) | ![Example nested cluster expand](demo/images/nested-cluster-expand.gif) |\n\n## Installation\n\n1. Install [`react-native-maps`](https://github.com/react-native-community/react-native-maps/blob/master/docs/installation.md)\n\n2. Install this component\n\n```bash\nnpm install --save react-native-cluster-map\n```\n\n## Usage\n\n```javascript\nimport { Marker } from 'react-native-maps';\nimport { ClusterMap } from 'react-native-cluster-map';\n\n\u003cClusterMap\n  region={{\n    latitude: 37.78825,\n    longitude: -122.4324,\n    latitudeDelta: 0.0922,\n    longitudeDelta: 0.0421,\n  }}\n\u003e\n  \u003cMarker coordinate={{ latitude: 37.78725, longitude: -122.434 }} /\u003e\n  \u003cMarker coordinate={{ latitude: 37.789, longitude: -122.431 }} /\u003e\n  \u003cMarker coordinate={{ latitude: 37.78825, longitude: -122.4324 }} /\u003e\n\u003c/ClusterMap\u003e;\n```\n\n### Custom Cluster Marker\n\nYou can customize cluster marker with **renderClusterMarker** prop\n\n\u003e _MyMap.jsx_\n\n```javascript\nimport { Marker } from \"react-native-maps\";\nimport { MyCluster } from \"./MyCluster\";\n\n// ...\n\nrenderCustomClusterMarker = (count) =\u003e \u003cMyCluster count={count} /\u003e\n\nrender () {\n  const { markers, region } = this.state;\n  return (\n    \u003cClusterMap\n      renderClusterMarker={this.renderCustomClusterMarker}\n      region={region}\n    \u003e\n      {markers.map((marker) =\u003e (\n          \u003cMarker {...marker} /\u003e\n      ))}\n    \u003cClusterMap\u003e\n  )\n}\n\n```\n\n\u003e _MyCluster.jsx_\n\n```javascript\nimport * as React from 'react';\nimport { View, Text, StyleSheet } from 'react-native';\n\nexport const MyCluster = (props) =\u003e {\n  const { count } = props;\n  return (\n    \u003cView style={styles}\u003e\n      \u003cText\u003e{count}\u003c/Text\u003e\n    \u003c/View\u003e\n  );\n};\n\nconst styles = StyleSheet.create({\n  width: 50,\n  height: 50,\n  borderRadius: 25,\n  backgroundColor: 'red',\n  justifyContent: 'center',\n  alignItems: 'center',\n});\n```\n\n### Result\n\n![Custom Marker Example](demo/images/custom-marker.png)\n\n## Props\n\n| Props                    | Type         | Default value                                         | Note                                     |\n| ------------------------ | ------------ | ----------------------------------------------------- | ---------------------------------------- |\n| **superClusterOptions**  | _Options_    | { radius: 16, maxZoom: 15, minZoom: 1, nodeSize: 16 } | SuperCluster lib options                 |\n| **isClusterExpandClick** | _boolean_    | true                                                  | Enables cluster zoom on click            |\n| **region**               | _Region_     | **_required_**                                        | Google Map Region                        |\n| **priorityMarker**       | _ReactNode_  | null                                                  | Marker which will be outside of clusters |\n| **renderClusterMarker**  | (_object_):ReactNode |      undefined                                | Returns cluster marker component         |\n| **clusterMarkerProps**   | _object_     | undefined                                             | Additional ClusterMarker props           |\n| **provider**             | _'google'_ or _null_  | 'google'                                     | Map provider. If null will use the platform default one (Google Maps for Android and MapKit for iOS)                     |\n| **style**                | _StyleProp_  | absoluteFillObject                                    | Styling for MapView                      |\n\n---\n\n## Children Props\n\n| Props                    | Type         | Default                                               | Note                                     |\n| ------------------------ | ------------ | ----------------------------------------------------- | ---------------------------------------- |\n| **isOutsideCluster**  | _boolean_    | false | Prevent child from clusterization. **_Required_** for not a Marker children (e.g.  Polygon, Polyline, Circle) |\n\n---\n\n\u003e Also contains react-native-maps [\\\u003cMapView /\u003e Props](https://github.com/react-native-community/react-native-maps/blob/master/docs/mapview.md#props)\n\n## Events\n\n| Event Name         | Returns                                                          | Notes                                                                     |\n| ------------------ | ---------------------------------------------------------------- | ------------------------------------------------------------------------- |\n| **onClusterClick** | ({ clusterId: number, coordinate : LatLng }, children: Marker[]) | Callback that is called when the user pressed on the **_cluster_** marker |\n| **onZoomChange**   | void                                                             | Callback that is called with updated map zoom in **number**               |\n\n---\n\n\u003e Also contains react-native-maps [\\\u003cMapView /\u003e Events](https://github.com/react-native-community/react-native-maps/blob/master/docs/mapview.md#events)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodempireio%2Freact-native-cluster-map","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodempireio%2Freact-native-cluster-map","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodempireio%2Freact-native-cluster-map/lists"}