{"id":19811829,"url":"https://github.com/laurensk/react-native-map-cluster","last_synced_at":"2026-05-09T23:32:44.006Z","repository":{"id":57338212,"uuid":"316812381","full_name":"laurensk/react-native-map-cluster","owner":"laurensk","description":"Clustered map view for React Native.","archived":false,"fork":false,"pushed_at":"2021-01-13T11:39:33.000Z","size":194,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-26T06:22:51.000Z","etag":null,"topics":["react-native","react-native-component","react-native-library","react-native-maps"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/laurensk.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}},"created_at":"2020-11-28T20:02:32.000Z","updated_at":"2021-06-01T23:42:12.000Z","dependencies_parsed_at":"2022-09-08T03:53:21.282Z","dependency_job_id":null,"html_url":"https://github.com/laurensk/react-native-map-cluster","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laurensk%2Freact-native-map-cluster","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laurensk%2Freact-native-map-cluster/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laurensk%2Freact-native-map-cluster/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laurensk%2Freact-native-map-cluster/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/laurensk","download_url":"https://codeload.github.com/laurensk/react-native-map-cluster/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241156733,"owners_count":19919341,"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":["react-native","react-native-component","react-native-library","react-native-maps"],"created_at":"2024-11-12T09:27:56.204Z","updated_at":"2026-05-09T23:32:38.966Z","avatar_url":"https://github.com/laurensk.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Map Cluster\nCreate clustered map views in React Native with current user location, custom marker rendering, custom cluster rendering and custom callout rendering.\n\n## Install\n`npm i --save react-native-map-cluster`\n\n## Usage\n\n**NOTES:**\n\n* the prop `key` of the markers rendered through `renderMarker` should not be left up to React. Instead, we strongly suggest to use an `id` in order the have unique keys while still taking advantage of React's recycling\n* `ClusteredMapView` supports usual React children. Those children **won't be affected by clustering**, i.e. the behavior for those children is exactly the same as wrapping them around an [AirBnB's react-native-maps](https://github.com/airbnb/react-native-maps) instance\n* Use `onMarkerPress` event on MapView instead of using `onPress` directly on Markers whenever possibile, in particular if you have a lot of pins and clusters. Within `onMarkerPress` you have access to the marker identifier through the `event.nativeEvent` attribute, hence you should be able to do everything you would do within an `onPress` function of a Marker\n\n```JSX\nimport React, { Component } from 'react'\nimport { Marker, Callout } from 'react-native-maps'\nimport ClusteredMapView from 'react-native-map-cluster'\n\nconst INIT_REGION = {\n  latitude: 41.8962667,\n  longitude: 11.3340056,\n  latitudeDelta: 12,\n  longitudeDelta: 12\n}\n\nexport default class MyClusteredMapView extends Component {\n\n  renderCluster = (cluster, onPress) =\u003e {\n    const pointCount = cluster.pointCount,\n          coordinate = cluster.coordinate,\n          clusterId = cluster.clusterId\n\n    const clusteringEngine = this.map.getClusteringEngine(),\n          clusteredPoints = clusteringEngine.getLeaves(clusterId, 100)\n\n    return (\n      \u003cMarker coordinate={coordinate} onPress={onPress}\u003e\n        \u003cView style={styles.myClusterStyle}\u003e\n          \u003cText style={styles.myClusterTextStyle}\u003e\n            {pointCount}\n          \u003c/Text\u003e\n        \u003c/View\u003e\n        {\n          /*\n            Eventually use \u003cCallout /\u003e to\n            show clustered point thumbs, i.e.:\n            \u003cCallout\u003e\n              \u003cScrollView\u003e\n                {\n                  clusteredPoints.map(p =\u003e (\n                    \u003cImage source={p.image}\u003e\n                  ))\n                }\n              \u003c/ScrollView\u003e\n            \u003c/Callout\u003e\n           */\n        }\n      \u003c/Marker\u003e\n    )\n  }\n\n  renderMarker = (data) =\u003e \u003cMarker key={data.id || Math.random()} coordinate={data.location} /\u003e\n\n  render() {\n    return (\n      \u003cClusteredMapView\n        style={{flex: 1}}\n        data={this.state.data}\n        initialRegion={INIT_REGION}\n        ref={(r) =\u003e { this.map = r }}\n        renderMarker={this.renderMarker}\n        renderCluster={this.renderCluster} /\u003e\n    )\n  }\n}\n```\n\n### Props\n\n**Name** | **Type** | **Required** | **Default** | **Note**\n---------|----------|--------------|-------------|---------\nshowsUserLocation | Bool | false | undefined | Show current location on map.\npermissionsAndroid | Object | false | undefined | Needed when `showsUserLocation` is set to true. See example [here](https://reactnative.dev/docs/permissionsandroid#request).\nradius | Number | false | window width * 4,5% | [SuperCluster radius](https://github.com/mapbox/supercluster#options).\nextent | Number | false | 512 | [SuperCluster extent](https://github.com/mapbox/supercluster#options).\nminZoom | Number | false | 1 | [SuperCluster minZoom](https://github.com/mapbox/supercluster#options).\nmaxZoom | Number | false | 16 | [SuperCluster maxZoom](https://github.com/mapbox/supercluster#options).\nwidth | Number | false | window width | map's width.\nheight | Number | false | window height | map's height.\ndata | Array \u003cObject\u003e | true | undefined | Objects must have an attribute `location` representing a `GeoPoint`, i.e. `{ latitude: x, longitude: y }`.\nonExplode | Function | false | undefined | TODO\nonImplode | Function | false | undefined | TODO\nonClusterPress(clusterId, ?children) | Function | false |  | Add (or completey override) behaviours to the clusterPress handler. `children` is passed when default behavior is preserved (see `preserveClusterPressBehavior` prop).\npreserveClusterPressBehavior | Bool | false | true | Whether `onClusterPress` prop should completely override module's behavior rather than integrate it.\nclusterPressMaxChildren | Function | false | 100 | Max number of cluster leaves returned as second parameter of `onClusterPress`.\nedgePadding | Object | false | { top: 10, left: 10, bottom: 10, right: 10 } | 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.\nrenderMarker | Function | true | undefined | Must return a react-native-maps' Marker component.\nrenderCluster | Function | true | undefined | Render the cluster.\nanimateClusters | Bool | false | true | Animate imploding/exploding of clusters' markers and clusters size change. **Works only on iOS**.\nlayoutAnimationConf | LayoutAnimationConfig | false | `LayoutAnimation.Presets.spring` | Custom Layout animation configuration object for clusters animation during implode / explode **Works only on iOS**.\nclusteringEnabled | Bool | false | true | Dynamically set whether to pass through clustering functions or immediately render markers as a normal mapview.\naccessor | String\\|Func | false | \"location\" | Accessor for item coordinate values. Could be a **string** (field name of an item object with latitude and longitude values) or a **function** (that describes how to access to coordinate data).\n\n### Methods\n**Name** | **Params** | **Description** | **Note**\n---------|------------|-----------------|---------\ngetMapRef | none | Getter for underlying react-native-maps instance | [Official Doc](https://github.com/react-community/react-native-maps#component-api)\ngetClusteringEngine | none | Getter for underlying SuperCluster instance | [Official Doc](https://github.com/mapbox/supercluster)\n\n## Credit\n\nThis repository is a fork of [react-native-maps-super-cluster](https://github.com/novalabio/react-native-maps-super-cluster) with many more features and updated implementations.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaurensk%2Freact-native-map-cluster","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flaurensk%2Freact-native-map-cluster","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaurensk%2Freact-native-map-cluster/lists"}