{"id":16714689,"url":"https://github.com/yoshidan/react-native-map-cluster","last_synced_at":"2026-05-18T02:31:52.882Z","repository":{"id":84112705,"uuid":"218488253","full_name":"yoshidan/react-native-map-cluster","owner":"yoshidan","description":" 8xplorer or cmapper like Smooth map clustering library for react-native","archived":false,"fork":false,"pushed_at":"2019-11-01T06:36:23.000Z","size":3266,"stargazers_count":0,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-24T14:32:20.110Z","etag":null,"topics":["react-native","react-native-maps","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/yoshidan.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,"zenodo":null}},"created_at":"2019-10-30T09:18:05.000Z","updated_at":"2019-11-14T00:27:43.000Z","dependencies_parsed_at":"2023-03-12T20:15:43.749Z","dependency_job_id":null,"html_url":"https://github.com/yoshidan/react-native-map-cluster","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/yoshidan/react-native-map-cluster","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yoshidan%2Freact-native-map-cluster","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yoshidan%2Freact-native-map-cluster/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yoshidan%2Freact-native-map-cluster/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yoshidan%2Freact-native-map-cluster/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yoshidan","download_url":"https://codeload.github.com/yoshidan/react-native-map-cluster/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yoshidan%2Freact-native-map-cluster/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33162607,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-17T22:39:12.733Z","status":"online","status_checked_at":"2026-05-18T02:00:06.436Z","response_time":71,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-maps","typescript"],"created_at":"2024-10-12T21:06:32.937Z","updated_at":"2026-05-18T02:31:52.873Z","avatar_url":"https://github.com/yoshidan.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-map-cluster\r\n\r\n[cmapper](https://apps.apple.com/jp/app/cmapper/id935586290) or [8xplorer](https://apps.apple.com/app/apple-store/id1460433285?mt=8\u0026l=ja) like smooth map clustering library for both iOS and Android. \r\n\r\niOS  \r\n![demo](/image/anim.gif) \r\n\r\nAndroid   \r\n![demo](/image/anim_android.gif)\r\n\r\n## Installation\r\n\r\n1. install dependency\r\n```\r\nyarn add react-native-maps\r\nyarn add supercluster\r\nyarn add @mapbox/geo-viewport\r\n```\r\n\r\n2. install library\r\n\r\n```\r\nyarn add https://github.com/yoshidan/react-native-map-cluster\r\n```\r\n\r\n## Usage\r\n\r\nComplete examples is [Here](/example/sampleProject)\r\n\r\nThere are only keypoint in this README.\r\n\r\n* use `withAnimatedCluster`\r\n* use `onRegionChanged` for MapView#onRegionChangeComplete\r\n\r\n```\r\nimport React, {Fragment} from 'react';\r\nimport {Dimensions,Image,SafeAreaView,StatusBar,StyleSheet,Text,View } from 'react-native';\r\nimport { AnimatedMarker, withAnimatedCluster } from '@yoshidan/react-native-map-cluster';\r\nimport MapView, {MarkerAnimated} from 'react-native-maps';\r\nimport Supercluster from 'supercluster';\r\n\r\nconst {width, height} = Dimensions.get('window');\r\nconst Component = withAnimatedCluster({\r\n  moveSpeed: 600, \r\n  deltaOffset: 1.3,\r\n  width,\r\n  height,\r\n  superClusterProvider: () =\u003enew Supercluster(),\r\n})(class Map extends React.Component\u003cProps, State\u003e {\r\n\r\n  // render map \r\n  public render() {\r\n \r\n      const { initialRegion } = this.props;\r\n      \r\n      // here is the property that the HoC injects.\r\n      const {animatedMarkers, onRegionChanged} = this.props;\r\n      \r\n      return (\r\n        \u003cMapView \r\n        \r\n          // recreate cluster when the region changes\r\n          onRegionChangeComplete={onRegionChanged}\r\n          \r\n          initialRegion={initialRegion}\r\n          style={styles.map}\u003e\r\n          \r\n          // render markers \r\n          {animatedMarkers.map(this.renderMarker)}\r\n          \r\n        \u003c/MapView\u003e\r\n      );\r\n    }\r\n} \r\n```\r\n\r\n* Use wrapped component with required props `markers` and `initialRegion` \r\n\r\n```\r\nconst App = () =\u003e {\r\n  return (\r\n    \u003cFragment\u003e\r\n      \u003cStatusBar barStyle=\"dark-content\" /\u003e\r\n      \u003cSafeAreaView style={{flex: 1}}\u003e\r\n        \u003cComponent\r\n        \r\n          // {id , coorinates: { latitude, longitude}} is required for each markers\r\n          markers={markers}\r\n          \r\n          initialRegion={{\r\n            ...markers[0].coordinate,\r\n            latitudeDelta: 0,\r\n            longitudeDelta: 0,\r\n          }}\r\n        /\u003e\r\n      \u003c/SafeAreaView\u003e\r\n    \u003c/Fragment\u003e\r\n  );\r\n};\r\n```\r\n\r\n## Props\r\n\r\n### withAnimatedCluster\r\n\r\n#### Arguments\r\n\r\n| Name| Type | Default | Note |\r\n|-------|-------|-------|-----|\r\n| moveSpeed | number | 600 | the animating speed of split or synthesize cluster | \r\n| deltaOffset | number | 1.3 | the value to suppress marker spreading to the outside of the window when splitting cluster. Set smaller value if the icon is small or bigger value if the icon is big.\r\n| width | number | null | dimension width of map |\r\n| height | number | null | dimension height of map |\r\n| superClusterProvider | () =\u003e Supercluster | null | the function to create the Supercluster |\r\n\r\n#### Required props to use wrapped component\r\n\r\n| Name| Type | Note |\r\n|-------|-------|-------|\r\n| markers | Marker[] | Markers to display on the MapView |\r\n| initialRegion | Region | initial region of MapView |\r\n\r\n```\r\ntype Marker = {\r\n  coordinate: Region;\r\n  id: number | string\r\n}\r\n```\r\n\r\n#### Injected props\r\n\r\n| Name| Type | Note |\r\n|-------|-------|-------|\r\n| animatedMarkers | AnimatedMarkers[] | Converted to markers to animate. render this markers |\r\n| region | Region | Current region |\r\n| clusters | Cluster[] | Current clusters |\r\n| onRegionChanged | (region:Region) =\u003e void | function to cluster markers with current region. Set as MapView#onRegionChangeCompleted |\r\n\r\n```\r\ntype AnimatedMarkers = {\r\n  coordinate: AnimatedRegion;\r\n  id: number | string;\r\n  getCluster: (clusters: Cluster[]) =\u003e Cluster | undefined;\r\n}\r\n```\r\n\r\n```\r\ntype Clusters = {  \r\n  properties: {\r\n      point_count: number // count of markers in this cluster \r\n  },  \r\n  userExtension: {\r\n    getCenterPosition: () =\u003e Region;\r\n  }\r\n}\r\n```\r\n\r\n`getCenterPosition` is required for splitting cluster on marker pressed\r\n\r\n```\r\nrenderMarker(marker: AnimatedMarker) {\r\n\r\n    const {clusters, region} = this.props;\r\n\r\n    const currentCluster = marker.getCluster(clusters);\r\n    const markersInClusterCount = currentCluster ? currentCluster.properties.point_count : 0;\r\n      \r\n    return (\r\n       \u003cMarkerAnimated\r\n         key={marker.id}\r\n         coordinate={marker.coordinate}\r\n          \r\n         // split clster when markers is pressed.\r\n         onPress={() =\u003e markersInClusterCount \u0026\u0026 this.map.animateToRegion(currentCluster.userExtension.getCenterPosition()}\u003e\r\n         \u003c...\u003e\r\n       \u003c/MarkerAnimated\u003e\r\n    );\r\n}\r\n\r\n```\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyoshidan%2Freact-native-map-cluster","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyoshidan%2Freact-native-map-cluster","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyoshidan%2Freact-native-map-cluster/lists"}