├── .circleci └── config.yml ├── .clang-format ├── .editorconfig ├── .gitattributes ├── .github └── FUNDING.yml ├── .gitignore ├── .husky ├── .npmignore ├── commit-msg └── pre-commit ├── .yarnrc ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── android ├── CMakeLists.txt ├── build.gradle ├── cpp-adapter.cpp └── src │ └── main │ ├── AndroidManifest.xml │ └── java │ └── com │ └── reactnativeclusterer │ ├── ClustererModule.java │ └── ClustererPackage.java ├── babel.config.js ├── cpp ├── SuperclusterHostObject.cpp ├── SuperclusterHostObject.h ├── helpers.cpp ├── helpers.h ├── react-native-clusterer.cpp ├── react-native-clusterer.h └── supercluster.hpp ├── example ├── .bundle │ └── config ├── .ruby-version ├── .watchmanconfig ├── Gemfile ├── _node-version ├── android │ ├── app │ │ ├── build.gradle │ │ ├── debug.keystore │ │ ├── proguard-rules.pro │ │ └── src │ │ │ ├── debug │ │ │ ├── AndroidManifest.xml │ │ │ └── java │ │ │ │ └── com │ │ │ │ └── clustererexample │ │ │ │ └── ReactNativeFlipper.java │ │ │ ├── main │ │ │ ├── AndroidManifest.xml │ │ │ ├── java │ │ │ │ └── com │ │ │ │ │ └── clustererexample │ │ │ │ │ ├── MainActivity.java │ │ │ │ │ └── MainApplication.java │ │ │ └── res │ │ │ │ ├── drawable │ │ │ │ └── rn_edit_text_material.xml │ │ │ │ ├── mipmap-hdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-mdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xxhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xxxhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ └── values │ │ │ │ ├── strings.xml │ │ │ │ └── styles.xml │ │ │ └── release │ │ │ └── java │ │ │ └── com │ │ │ └── clustererexample │ │ │ └── ReactNativeFlipper.java │ ├── build.gradle │ ├── gradle.properties │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── gradlew │ ├── gradlew.bat │ └── settings.gradle ├── app.json ├── babel.config.js ├── index.js ├── ios │ ├── .xcode.env │ ├── ClustererExample-Bridging-Header.h │ ├── ClustererExample.xcodeproj │ │ ├── project.pbxproj │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ └── ClustererExample.xcscheme │ ├── ClustererExample.xcworkspace │ │ ├── contents.xcworkspacedata │ │ └── xcshareddata │ │ │ └── IDEWorkspaceChecks.plist │ ├── ClustererExample │ │ ├── AppDelegate.h │ │ ├── AppDelegate.mm │ │ ├── Images.xcassets │ │ │ ├── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ │ └── Contents.json │ │ ├── Info.plist │ │ ├── LaunchScreen.storyboard │ │ └── main.m │ ├── ClustererExampleTests │ │ ├── ClustererExampleTests.m │ │ └── Info.plist │ ├── File.swift │ ├── Podfile │ └── _xcode.env ├── metro.config.js ├── package.json ├── react-native.config.js └── src │ ├── App.tsx │ ├── Comparison.tsx │ ├── GetClusters.tsx │ ├── GetTile.tsx │ ├── Map.tsx │ ├── Point.tsx │ ├── Tests.tsx │ ├── places.ts │ ├── test │ └── fixtures │ │ ├── index.ts │ │ ├── places-z0-0-0-min5.json │ │ ├── places-z0-0-0.json │ │ └── places.json │ └── utils.ts ├── ios ├── Clusterer.h ├── Clusterer.mm └── Clusterer.xcodeproj │ └── project.pbxproj ├── package-lock.json ├── package.json ├── react-native-clusterer.podspec ├── scripts └── bootstrap.js ├── src ├── Clusterer.tsx ├── Supercluster.ts ├── index.ts ├── types.ts ├── useClusterer.ts └── utils.ts ├── tsconfig.build.json └── tsconfig.json /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | version: 2.1 2 | 3 | executors: 4 | default: 5 | docker: 6 | - image: circleci/node:10 7 | working_directory: ~/project 8 | 9 | commands: 10 | attach_project: 11 | steps: 12 | - attach_workspace: 13 | at: ~/project 14 | 15 | jobs: 16 | install-dependencies: 17 | executor: default 18 | steps: 19 | - checkout 20 | - attach_project 21 | - restore_cache: 22 | keys: 23 | - dependencies-{{ checksum "package.json" }} 24 | - dependencies- 25 | - restore_cache: 26 | keys: 27 | - dependencies-example-{{ checksum "example/package.json" }} 28 | - dependencies-example- 29 | - run: 30 | name: Install dependencies 31 | command: | 32 | yarn install --cwd example --frozen-lockfile 33 | yarn install --frozen-lockfile 34 | - save_cache: 35 | key: dependencies-{{ checksum "package.json" }} 36 | paths: node_modules 37 | - save_cache: 38 | key: dependencies-example-{{ checksum "example/package.json" }} 39 | paths: example/node_modules 40 | - persist_to_workspace: 41 | root: . 42 | paths: . 43 | 44 | lint: 45 | executor: default 46 | steps: 47 | - attach_project 48 | - run: 49 | name: Lint files 50 | command: | 51 | yarn lint 52 | 53 | typescript: 54 | executor: default 55 | steps: 56 | - attach_project 57 | - run: 58 | name: Typecheck files 59 | command: | 60 | yarn typescript 61 | 62 | unit-tests: 63 | executor: default 64 | steps: 65 | - attach_project 66 | - run: 67 | name: Run unit tests 68 | command: | 69 | yarn test --coverage 70 | - store_artifacts: 71 | path: coverage 72 | destination: coverage 73 | 74 | build-package: 75 | executor: default 76 | steps: 77 | - attach_project 78 | - run: 79 | name: Build package 80 | command: | 81 | yarn prepare 82 | 83 | workflows: 84 | build-and-test: 85 | jobs: 86 | - install-dependencies 87 | - lint: 88 | requires: 89 | - install-dependencies 90 | - typescript: 91 | requires: 92 | - install-dependencies 93 | - unit-tests: 94 | requires: 95 | - install-dependencies 96 | - build-package: 97 | requires: 98 | - install-dependencies 99 | -------------------------------------------------------------------------------- /.clang-format: -------------------------------------------------------------------------------- 1 | Language: Cpp 2 | BasedOnStyle: Google 3 | IndentWidth: 2 4 | MaxEmptyLinesToKeep: 1 5 | NamespaceIndentation: None 6 | ColumnLimit: 80 7 | PenaltyBreakAssignment: 2 8 | PenaltyReturnTypeOnItsOwnLine: 200 9 | PointerAlignment: Left 10 | SpaceBeforeParens: Never 11 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | [*] 8 | 9 | indent_style = space 10 | indent_size = 2 11 | 12 | end_of_line = lf 13 | charset = utf-8 14 | trim_trailing_whitespace = true 15 | insert_final_newline = true 16 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | # specific for windows script files 3 | *.bat text eol=crlf -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry 13 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # XDE 6 | .expo/ 7 | 8 | # VSCode 9 | .vscode/ 10 | jsconfig.json 11 | 12 | # Xcode 13 | # 14 | build/ 15 | *.pbxuser 16 | !default.pbxuser 17 | *.mode1v3 18 | !default.mode1v3 19 | *.mode2v3 20 | !default.mode2v3 21 | *.perspectivev3 22 | !default.perspectivev3 23 | xcuserdata 24 | *.xccheckout 25 | *.moved-aside 26 | DerivedData 27 | *.hmap 28 | *.ipa 29 | *.xcuserstate 30 | project.xcworkspace 31 | 32 | # Android/IJ 33 | # 34 | .classpath 35 | .cxx 36 | .gradle 37 | .idea 38 | .project 39 | .settings 40 | local.properties 41 | android.iml 42 | 43 | # Cocoapods 44 | # 45 | example/ios/Pods 46 | 47 | # node.js 48 | # 49 | node_modules/ 50 | npm-debug.log 51 | yarn-debug.log 52 | yarn-error.log 53 | 54 | # BUCK 55 | buck-out/ 56 | \.buckd/ 57 | android/app/libs 58 | android/keystores/debug.keystore 59 | 60 | # Expo 61 | .expo/* 62 | 63 | # generated by bob 64 | lib/ 65 | 66 | supercluster/ 67 | example/yarn.lock 68 | example/ios/Podfile.lock 69 | example/package-lock.json 70 | -------------------------------------------------------------------------------- /.husky/.npmignore: -------------------------------------------------------------------------------- 1 | _ 2 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | yarn commitlint -E HUSKY_GIT_PARAMS 5 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | yarn lint && yarn typescript 5 | -------------------------------------------------------------------------------- /.yarnrc: -------------------------------------------------------------------------------- 1 | # Override Yarn command so we can automatically setup the repo on running `yarn` 2 | 3 | yarn-path "scripts/bootstrap.js" 4 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | We want this community to be friendly and respectful to each other. Please follow it in all your interactions with the project. 4 | 5 | ## Development workflow 6 | 7 | To get started with the project, run `yarn` in the root directory to install the required dependencies for each package: 8 | 9 | ```sh 10 | yarn 11 | ``` 12 | 13 | > While it's possible to use [`npm`](https://github.com/npm/cli), the tooling is built around [`yarn`](https://classic.yarnpkg.com/), so you'll have an easier time if you use `yarn` for development. 14 | 15 | While developing, you can run the [example app](/example/) to test your changes. Any changes you make in your library's JavaScript code will be reflected in the example app without a rebuild. If you change any native code, then you'll need to rebuild the example app. 16 | 17 | To start the packager: 18 | 19 | ```sh 20 | yarn example start 21 | ``` 22 | 23 | To run the example app on Android: 24 | 25 | ```sh 26 | yarn example android 27 | ``` 28 | 29 | To run the example app on iOS: 30 | 31 | ```sh 32 | yarn example ios 33 | ``` 34 | 35 | Make sure your code passes TypeScript and ESLint. Run the following to verify: 36 | 37 | ```sh 38 | yarn typescript 39 | yarn lint 40 | ``` 41 | 42 | To fix formatting errors, run the following: 43 | 44 | ```sh 45 | yarn lint --fix 46 | ``` 47 | 48 | Remember to add tests for your change if possible. Run the unit tests by: 49 | 50 | ```sh 51 | yarn test 52 | ``` 53 | 54 | To edit the Objective-C files, open `example/ios/ClustererExample.xcworkspace` in XCode and find the source files at `Pods > Development Pods > react-native-clusterer`. 55 | 56 | To edit the Kotlin files, open `example/android` in Android studio and find the source files at `reactnativeclusterer` under `Android`. 57 | 58 | ### Commit message convention 59 | 60 | We follow the [conventional commits specification](https://www.conventionalcommits.org/en) for our commit messages: 61 | 62 | - `fix`: bug fixes, e.g. fix crash due to deprecated method. 63 | - `feat`: new features, e.g. add new method to the module. 64 | - `refactor`: code refactor, e.g. migrate from class components to hooks. 65 | - `docs`: changes into documentation, e.g. add usage example for the module.. 66 | - `test`: adding or updating tests, e.g. add integration tests using detox. 67 | - `chore`: tooling changes, e.g. change CI config. 68 | 69 | Our pre-commit hooks verify that your commit message matches this format when committing. 70 | 71 | ### Linting and tests 72 | 73 | [ESLint](https://eslint.org/), [Prettier](https://prettier.io/), [TypeScript](https://www.typescriptlang.org/) 74 | 75 | We use [TypeScript](https://www.typescriptlang.org/) for type checking, [ESLint](https://eslint.org/) with [Prettier](https://prettier.io/) for linting and formatting the code, and [Jest](https://jestjs.io/) for testing. 76 | 77 | Our pre-commit hooks verify that the linter and tests pass when committing. 78 | 79 | ### Publishing to npm 80 | 81 | We use [release-it](https://github.com/release-it/release-it) to make it easier to publish new versions. It handles common tasks like bumping version based on semver, creating tags and releases etc. 82 | 83 | To publish new versions, run the following: 84 | 85 | ```sh 86 | yarn release 87 | ``` 88 | 89 | ### Scripts 90 | 91 | The `package.json` file contains various scripts for common tasks: 92 | 93 | - `yarn bootstrap`: setup project by installing all dependencies and pods. 94 | - `yarn typescript`: type-check files with TypeScript. 95 | - `yarn lint`: lint files with ESLint. 96 | - `yarn test`: run unit tests with Jest. 97 | - `yarn example start`: start the Metro server for the example app. 98 | - `yarn example android`: run the example app on Android. 99 | - `yarn example ios`: run the example app on iOS. 100 | 101 | ### Sending a pull request 102 | 103 | > **Working on your first pull request?** You can learn how from this _free_ series: [How to Contribute to an Open Source Project on GitHub](https://app.egghead.io/playlists/how-to-contribute-to-an-open-source-project-on-github). 104 | 105 | When you're sending a pull request: 106 | 107 | - Prefer small pull requests focused on one change. 108 | - Verify that linters and tests are passing. 109 | - Review the documentation to make sure it looks good. 110 | - Follow the pull request template when opening a pull request. 111 | - For pull requests that change the API or implementation, discuss with maintainers first by opening an issue. 112 | 113 | ## Code of Conduct 114 | 115 | ### Our Pledge 116 | 117 | We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation. 118 | 119 | We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community. 120 | 121 | ### Our Standards 122 | 123 | Examples of behavior that contributes to a positive environment for our community include: 124 | 125 | - Demonstrating empathy and kindness toward other people 126 | - Being respectful of differing opinions, viewpoints, and experiences 127 | - Giving and gracefully accepting constructive feedback 128 | - Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience 129 | - Focusing on what is best not just for us as individuals, but for the overall community 130 | 131 | Examples of unacceptable behavior include: 132 | 133 | - The use of sexualized language or imagery, and sexual attention or 134 | advances of any kind 135 | - Trolling, insulting or derogatory comments, and personal or political attacks 136 | - Public or private harassment 137 | - Publishing others' private information, such as a physical or email 138 | address, without their explicit permission 139 | - Other conduct which could reasonably be considered inappropriate in a 140 | professional setting 141 | 142 | ### Enforcement Responsibilities 143 | 144 | Community leaders are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful. 145 | 146 | Community leaders have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, and will communicate reasons for moderation decisions when appropriate. 147 | 148 | ### Scope 149 | 150 | This Code of Conduct applies within all community spaces, and also applies when an individual is officially representing the community in public spaces. Examples of representing our community include using an official e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. 151 | 152 | ### Enforcement 153 | 154 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the community leaders responsible for enforcement at [INSERT CONTACT METHOD]. All complaints will be reviewed and investigated promptly and fairly. 155 | 156 | All community leaders are obligated to respect the privacy and security of the reporter of any incident. 157 | 158 | ### Enforcement Guidelines 159 | 160 | Community leaders will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct: 161 | 162 | #### 1. Correction 163 | 164 | **Community Impact**: Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community. 165 | 166 | **Consequence**: A private, written warning from community leaders, providing clarity around the nature of the violation and an explanation of why the behavior was inappropriate. A public apology may be requested. 167 | 168 | #### 2. Warning 169 | 170 | **Community Impact**: A violation through a single incident or series of actions. 171 | 172 | **Consequence**: A warning with consequences for continued behavior. No interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, for a specified period of time. This includes avoiding interactions in community spaces as well as external channels like social media. Violating these terms may lead to a temporary or permanent ban. 173 | 174 | #### 3. Temporary Ban 175 | 176 | **Community Impact**: A serious violation of community standards, including sustained inappropriate behavior. 177 | 178 | **Consequence**: A temporary ban from any sort of interaction or public communication with the community for a specified period of time. No public or private interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, is allowed during this period. Violating these terms may lead to a permanent ban. 179 | 180 | #### 4. Permanent Ban 181 | 182 | **Community Impact**: Demonstrating a pattern of violation of community standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals. 183 | 184 | **Consequence**: A permanent ban from any sort of public interaction within the community. 185 | 186 | ### Attribution 187 | 188 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 2.0, 189 | available at https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 190 | 191 | Community Impact Guidelines were inspired by [Mozilla's code of conduct enforcement ladder](https://github.com/mozilla/diversity). 192 | 193 | [homepage]: https://www.contributor-covenant.org 194 | 195 | For answers to common questions about this code of conduct, see the FAQ at 196 | https://www.contributor-covenant.org/faq. Translations are available at https://www.contributor-covenant.org/translations. 197 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Jiri Hoffmann 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Native Clusterer 2 | 3 | The most comprehensive and yet easiest to use react native point clustering library. Uses c++ implementation of [supercluster](https://github.com/mapbox/supercluster) and JSI bindings for up to 10x faster initial point loading times than its JavaScript counterpart. 4 | 5 | # Installation 6 | 7 | ```sh 8 | npm install react-native-clusterer 9 | 10 | # iOS 11 | cd ios && pod install 12 | ``` 13 | 14 | # Example 15 | 16 | Check out the example folder for a fully functional example and speed comparisons. On android make sure to update AndroidManifest.xml with com.google.android.geo.API_KEY meta data in order for Google Maps to work. 17 | 18 | # Usage 19 | 20 | This library provides three different ways to use Supercluster based on your needs: 21 | 22 | - [**useClusterer**](#useclusterer): Hook for most hassle-free implementation. 23 | - [**Clusterer**](#Clusterer): React Native component. 24 | - [**Supercluster**](#Supercluster): Class for custom functionality. 25 | 26 | If you are looking for a JS drag-and-drop replacement to speed up point clustering, you should be aware of some caveats: 27 | 28 | - Missing `Map/reduce` functionality. 29 | 30 | # useClusterer 31 | 32 | ```js 33 | import { useClusterer } from 'react-native-clusterer'; 34 | 35 | const MAP_DIMENSIONS = { width: MAP_WIDTH, height: MAP_HEIGHT } 36 | 37 | //... 38 | const [region, setRegion] = useState(initialRegion); 39 | const [points, supercluster] = useClusterer( 40 | markers, 41 | MAP_DIMENSIONS, 42 | region 43 | ); 44 | 45 | // ... 46 | return ( 47 | 51 | {points.map(point => ( 52 | // These should be memoized components, 53 | // otherwise you might see flickering 54 | 57 | {/* 58 | // ... marker children - callout, custom marker, etc. 59 | */} 60 | 61 | ); 62 | )} 63 | /> 64 | 65 | ); 66 | ``` 67 | 68 | ## useClusterer Params 69 | 70 | ### `data` 71 | 72 | Same as [points](<#load(points)>) passed to `supercluster.load()`. 73 | 74 | ### `mapDimensions` 75 | 76 | Object containing `width` and `height` of the `` Component 77 | 78 | ### `region` 79 | 80 | Region from the `` Component: Object containing `latitude`, `longitude`, `latitudeDelta` and `longitudeDelta` values. 81 | 82 | ### `options` 83 | 84 | Same as [options](#Supercluster-options) for Supercluster, not required. 85 | 86 | ## useClusterer Returns 87 | 88 | An array with two elements: 89 | 90 | - `points` - Array of points (`GeoJSON Feature point or cluster`). Clusters have an additional getExpansionRegion() which will return a region that can be used to expand the cluster (use [isPointCluster](<#isPointCluster(point)>) to check if this property is defined). Same as [getClusterExpansionRegion](<#getClusterExpansionRegion(clusterId)>) without the need for `clusterId` param. 91 | - `supercluster` - [Supercluster](#Supercluster) instance. 92 | 93 | # Clusterer 94 | 95 | ```js 96 | //... 97 | import { Clusterer } from 'react-native-clusterer'; 98 | import MapView, { Marker } from 'react-native-maps'; 99 | 100 | const MAP_DIMENSIONS = { width: MAP_WIDTH, height: MAP_HEIGHT } 101 | 102 | // ... 103 | const [markers, setMarkers] = useState([]); 104 | const [region, setRegion] = useState(initialRegion); 105 | 106 | // ... 107 | return ( 108 | 112 | { 118 | return ( 119 | // These should be memoized components, 120 | // otherwise you might see flickering 121 | 124 | {/* marker children - callout, custom marker, etc. */} 125 | {item.properties.cluster_id ? ( 126 | // render cluster 127 | ) : ( 128 | // render marker 129 | )} 130 | 131 | ); 132 | }} 133 | /> 134 | 135 | ); 136 | ``` 137 | 138 | ## Clusterer Props 139 | 140 | ### `data` 141 | 142 | Same as [points](<#load(points)>) passed to `supercluster.load()`. 143 | 144 | ### `mapDimensions` 145 | 146 | Object containing `width` and `height` of the `` Component 147 | 148 | ### `region` 149 | 150 | Region from the `` Component: Object containing `latitude`, `longitude`, `latitudeDelta` and `longitudeDelta` values. 151 | 152 | ### `options` 153 | 154 | Same as [options](#Supercluster-Options) for Supercluster. 155 | 156 | ### `renderItem` 157 | 158 | Function that takes an item (`GeoJSON Feature point or cluster`) and returns a React component. 159 | 160 | # Supercluster 161 | 162 | ```js 163 | import Supercluster from 'react-native-clusterer'; 164 | //... 165 | 166 | // Create a new instance of Supercluster 167 | const supercluster = new Supercluster(options); 168 | 169 | // Load points 170 | supercluster.load(points); 171 | 172 | // Get clusters 173 | supercluster.getClustersFromRegion(region, mapDimensions); 174 | ``` 175 | 176 | ## Supercluster Options 177 | 178 | | Option | Default | Description | 179 | | ---------- | ------- | ----------------------------------------------------------------- | 180 | | minZoom | 0 | Minimum zoom level at which clusters are generated. | 181 | | maxZoom | 16 | Maximum zoom level at which clusters are generated. | 182 | | minPoints | 2 | Minimum number of points to form a cluster. | 183 | | radius | 40 | Cluster radius, in pixels. | 184 | | extent | 512 | (Tiles) Tile extent. Radius is calculated relative to this value. | 185 | | generateId | false | Whether to generate ids for input features in vector tiles. | 186 | 187 | ## Supercluster Methods 188 | 189 | ### `load(points)` 190 | 191 | Loads an array of [GeoJSON Feature](https://tools.ietf.org/html/rfc7946#section-3.2) objects. Each feature's `geometry` must be a [GeoJSON Point](https://tools.ietf.org/html/rfc7946#section-3.1.2). Once loaded, index is immutable. 192 | 193 | #### `getClusters(bbox, zoom)` 194 | 195 | For the given `bbox` array (`[westLng, southLat, eastLng, northLat]`) and integer `zoom`, returns an array of clusters and points as [GeoJSON Feature](https://tools.ietf.org/html/rfc7946#section-3.2) objects. 196 | 197 | #### `getClustersFromRegion(region, mapDimensions)` 198 | 199 | For the given `region` from react-native-maps `` and an object containing `width` and `height` of the component, returns an array of clusters and points as [GeoJSON Feature](https://tools.ietf.org/html/rfc7946#section-3.2) objects. 200 | 201 | #### `getTile(z, x, y)` 202 | 203 | For a given zoom and x/y coordinates, returns a [geojson-vt](https://github.com/mapbox/geojson-vt)-compatible JSON tile object with cluster/point features. 204 | 205 | #### `getChildren(clusterId)` 206 | 207 | Returns the children of a cluster (on the next zoom level) given its id (`clusterId` value from feature properties). 208 | 209 | #### `getLeaves(clusterId, limit = 10, offset = 0)` 210 | 211 | Returns all the points of a cluster (given its `clusterId`), with pagination support: 212 | `limit` is the number of points to return, and `offset` is the number of points to skip (for pagination). 213 | 214 | #### `getClusterExpansionZoom(clusterId)` 215 | 216 | Returns the zoom on which the cluster expands into several children (useful for "click to zoom" feature) given the cluster's `clusterId`. 217 | 218 | #### `getClusterExpansionRegion(clusterId)` 219 | 220 | Returns a region containing the center of all the points in a cluster and the delta value by which it should be zoomed out to see all the points. Useful for animating a MapView after a cluster press. 221 | 222 | #### `destroy()` 223 | 224 | No longer needed (version 1.2.0 and up). 225 | 226 | ~~Since JS doesnt have destructors, we have to make sure the cluster stored in c++ memory is also deleted. This method is called automatically when using the `` component.~~ 227 | 228 | ## Utility Methods 229 | 230 | #### `isPointCluster(point)` 231 | 232 | Typescript type guard for checking if a point is a cluster. 233 | 234 | ##### **Example** 235 | 236 | ```js 237 | const _handlePointPress = (point: IFeature) => { 238 | if (isPointCluster(point)) { 239 | const toRegion = point.properties.getExpansionRegion(); 240 | mapRef.current?.animateToRegion(toRegion, 500); 241 | } 242 | }; 243 | 244 | { 247 | return ; 248 | }} 249 | />; 250 | ``` 251 | 252 | #### `coordsToGeoJSONFeature(coords, properties)` 253 | 254 | Converts coordinates to a GeoJSON Feature object. Accepted formats are `[longitude, latitude]` or `{longitude, latitude}` or `{lng, lat}`. Properties can be anything and are optional. 255 | 256 | ## Troubleshooting 257 | 258 | - If you can't see any points on the map, make sure you provided coordinates in the correct __order__ and format. The library expects `[longitude, latitude]` for each point. 259 | 260 | ## TO-DOs 261 | 262 | - [x] Proper input and return types for methods 263 | - [x] Implement `getClusters(bbox, zoom)` 264 | - [x] Parse and return additional Point properties added by users 265 | - [x] Find a better implementation for `destroy()`. 266 | - [ ] Map/reduce options 267 | 268 | ## Contributing 269 | 270 | See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow. 271 | 272 | ## License 273 | 274 | MIT 275 | 276 | Copyright (c) 2021 Jiri Hoffmann 277 | 278 | Uses supercluster for point clustering. Check out [mapbox/supercluster.hpp](https://github.com/mapbox/supercluster.hpp) for additional licensing. 279 | -------------------------------------------------------------------------------- /android/CMakeLists.txt: -------------------------------------------------------------------------------- 1 | project(ReactNativeClusterer) 2 | cmake_minimum_required(VERSION 3.9.0) 3 | 4 | set (CMAKE_VERBOSE_MAKEFILE ON) 5 | set (CMAKE_CXX_STANDARD 17) 6 | set (PACKAGE_NAME "rnclusterer") 7 | set (BUILD_DIR ./build) 8 | 9 | file(GLOB RN_CLUSTERER_CPP "../cpp/*.cpp") 10 | file(GLOB RN_CLUSTERER_HPP "../cpp/*.hpp") 11 | 12 | # Add headers 13 | include_directories( 14 | ${PACKAGE_NAME} 15 | "." 16 | 17 | # rnclusterer headers 18 | "../cpp" 19 | ) 20 | 21 | add_library( 22 | ${PACKAGE_NAME} 23 | SHARED 24 | ${RN_CLUSTERER_CPP} 25 | ${RN_CLUSTERER_HPP} 26 | ./cpp-adapter.cpp 27 | ) 28 | 29 | find_package(ReactAndroid REQUIRED CONFIG) 30 | find_library(log-lib log) 31 | 32 | # Link JNI, JSI, LOG_LIB 33 | target_link_libraries( 34 | ${PACKAGE_NAME} 35 | ${log-lib} # <-- Logcat logger 36 | ReactAndroid::jsi # <-- JSI 37 | android # <-- Android JNI core 38 | ) 39 | -------------------------------------------------------------------------------- /android/build.gradle: -------------------------------------------------------------------------------- 1 | buildscript { 2 | repositories { 3 | maven { 4 | url "https://plugins.gradle.org/m2/" 5 | } 6 | mavenCentral() 7 | google() 8 | } 9 | 10 | dependencies { 11 | classpath("com.android.tools.build:gradle:7.2.2") 12 | } 13 | } 14 | 15 | def resolveBuildType() { 16 | Gradle gradle = getGradle() 17 | String tskReqStr = gradle.getStartParameter().getTaskRequests()['args'].toString() 18 | 19 | return tskReqStr.contains('Release') ? 'release' : 'debug' 20 | } 21 | 22 | def isNewArchitectureEnabled() { 23 | // To opt-in for the New Architecture, you can either: 24 | // - Set `newArchEnabled` to true inside the `gradle.properties` file 25 | // - Invoke gradle with `-newArchEnabled=true` 26 | // - Set an environment variable `ORG_GRADLE_PROJECT_newArchEnabled=true` 27 | return project.hasProperty("newArchEnabled") && project.newArchEnabled == "true" 28 | } 29 | 30 | if (isNewArchitectureEnabled()) { 31 | apply plugin: 'com.facebook.react' 32 | } 33 | apply plugin: 'com.android.library' 34 | 35 | def safeExtGet(prop, fallback) { 36 | rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback 37 | } 38 | 39 | def reactNativeArchitectures() { 40 | def value = project.getProperties().get("reactNativeArchitectures") 41 | return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"] 42 | } 43 | 44 | repositories { 45 | mavenCentral() 46 | } 47 | 48 | android { 49 | compileSdkVersion safeExtGet("compileSdkVersion", 28) 50 | 51 | // Used to override the NDK path/version on internal CI or by allowing 52 | // users to customize the NDK path/version from their root project (e.g. for M1 support) 53 | if (rootProject.hasProperty("ndkPath")) { 54 | ndkPath rootProject.ext.ndkPath 55 | } 56 | if (rootProject.hasProperty("ndkVersion")) { 57 | ndkVersion rootProject.ext.ndkVersion 58 | } 59 | 60 | buildFeatures { 61 | prefab true 62 | } 63 | 64 | defaultConfig { 65 | minSdkVersion safeExtGet('minSdkVersion', 16) 66 | targetSdkVersion safeExtGet('targetSdkVersion', 28) 67 | versionCode 1 68 | versionName "1.0" 69 | buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString() 70 | externalNativeBuild { 71 | cmake { 72 | cppFlags "-O2 -frtti -fexceptions -Wall -Wno-unused-variable -fstack-protector-all" 73 | arguments "-DANDROID_STL=c++_shared" 74 | abiFilters (*reactNativeArchitectures()) 75 | } 76 | } 77 | } 78 | 79 | compileOptions { 80 | sourceCompatibility JavaVersion.VERSION_1_8 81 | targetCompatibility JavaVersion.VERSION_1_8 82 | } 83 | 84 | externalNativeBuild { 85 | cmake { 86 | path "CMakeLists.txt" 87 | } 88 | } 89 | packagingOptions { 90 | doNotStrip resolveBuildType() == 'debug' ? "**/**/*.so" : '' 91 | excludes = [ 92 | "META-INF", 93 | "META-INF/**", 94 | "**/libjsi.so", 95 | ] 96 | } 97 | } 98 | 99 | dependencies { 100 | //noinspection GradleDynamicVersion 101 | implementation 'com.facebook.react:react-android:+' 102 | } 103 | 104 | // Resolves "LOCAL_SRC_FILES points to a missing file, Check that libfb.so exists or that its path is correct". 105 | tasks.whenTaskAdded { task -> 106 | if (task.name.contains("configureCMakeDebug")) { 107 | rootProject.getTasksByName("packageReactNdkDebugLibs", true).forEach { 108 | task.dependsOn(it) 109 | } 110 | } 111 | // We want to add a dependency for both configureCMakeRelease and configureCMakeRelWithDebInfo 112 | if (task.name.contains("configureCMakeRel")) { 113 | rootProject.getTasksByName("packageReactNdkReleaseLibs", true).forEach { 114 | task.dependsOn(it) 115 | } 116 | } 117 | } 118 | -------------------------------------------------------------------------------- /android/cpp-adapter.cpp: -------------------------------------------------------------------------------- 1 | #include 2 | #include "react-native-clusterer.h" 3 | 4 | extern "C" 5 | JNIEXPORT void JNICALL 6 | Java_com_reactnativeclusterer_ClustererModule_initialize(JNIEnv *env, jclass clazz, jlong jsi) { 7 | clusterer::install(*reinterpret_cast(jsi)); 8 | } -------------------------------------------------------------------------------- /android/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /android/src/main/java/com/reactnativeclusterer/ClustererModule.java: -------------------------------------------------------------------------------- 1 | package com.reactnativeclusterer; 2 | 3 | import androidx.annotation.NonNull; 4 | 5 | import com.facebook.react.bridge.ReactApplicationContext; 6 | import com.facebook.react.bridge.ReactContextBaseJavaModule; 7 | import com.facebook.react.bridge.ReactMethod; 8 | 9 | public class ClustererModule extends ReactContextBaseJavaModule { 10 | public static final String NAME = "Clusterer"; 11 | private static native void initialize(long jsiPtr, String docDir); 12 | 13 | public ClustererModule(ReactApplicationContext reactContext) { 14 | super(reactContext); 15 | } 16 | 17 | @NonNull 18 | @Override 19 | public String getName() { 20 | return "Clusterer"; 21 | } 22 | 23 | @ReactMethod(isBlockingSynchronousMethod = true) 24 | public boolean install() { 25 | try { 26 | System.loadLibrary("rnclusterer"); 27 | 28 | ReactApplicationContext context = getReactApplicationContext(); 29 | initialize( 30 | context.getJavaScriptContextHolder().get(), 31 | context.getFilesDir().getAbsolutePath() 32 | ); 33 | return true; 34 | } catch (Exception exception) { 35 | return false; 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /android/src/main/java/com/reactnativeclusterer/ClustererPackage.java: -------------------------------------------------------------------------------- 1 | package com.reactnativeclusterer; 2 | 3 | import androidx.annotation.NonNull; 4 | 5 | import com.facebook.react.ReactPackage; 6 | import com.facebook.react.bridge.NativeModule; 7 | import com.facebook.react.bridge.ReactApplicationContext; 8 | import com.facebook.react.uimanager.ViewManager; 9 | 10 | import java.util.Collections; 11 | import java.util.List; 12 | 13 | 14 | public class ClustererPackage implements ReactPackage { 15 | @NonNull 16 | @Override 17 | public List createNativeModules(@NonNull ReactApplicationContext reactContext) { 18 | return Collections.singletonList(new ClustererModule(reactContext)); 19 | } 20 | 21 | @NonNull 22 | @Override 23 | public List createViewManagers(@NonNull ReactApplicationContext reactContext) { 24 | return Collections.emptyList(); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /cpp/SuperclusterHostObject.cpp: -------------------------------------------------------------------------------- 1 | #include "SuperclusterHostObject.h" 2 | 3 | namespace clusterer { 4 | SuperclusterHostObject::SuperclusterHostObject(jsi::Runtime &rt, 5 | const jsi::Value *args, 6 | size_t count) 7 | : featuresInput(jsi::Array(rt, 0)) { 8 | if(count != 2) 9 | throw jsi::JSError(rt, "React-Native-Clusterer: expects 2 arguments"); 10 | 11 | // jsi features to cpp 12 | mapbox::feature::feature_collection features; 13 | 14 | if(args[0].isObject() && args[0].asObject(rt).isArray(rt)) { 15 | featuresInput = args[0].asObject(rt).asArray(rt); 16 | for(int i = 0; i < featuresInput.size(rt); i++) { 17 | mapbox::feature::feature feature; 18 | parseJSIFeature(rt, i, feature, featuresInput.getValueAtIndex(rt, i)); 19 | features.push_back(feature); 20 | } 21 | } else { 22 | throw jsi::JSError(rt, "Expected array of GeoJSON Feature objects"); 23 | } 24 | // jsi options to cpp 25 | mapbox::supercluster::Options options; 26 | parseJSIOptions(rt, options, args[1]); 27 | 28 | try { 29 | instance = new mapbox::supercluster::Supercluster(features, options); 30 | } catch(exception &e) { 31 | std::string message = 32 | std::string("React-Native-Clusterer: Error creating Supercluser") + 33 | e.what(); 34 | throw jsi::JSError(rt, message.c_str()); 35 | } 36 | } 37 | 38 | SuperclusterHostObject::~SuperclusterHostObject() { delete instance; } 39 | 40 | std::vector SuperclusterHostObject::getPropertyNames( 41 | jsi::Runtime &rt) { 42 | std::vector result; 43 | result.push_back(jsi::PropNameID::forUtf8(rt, std::string("getTile"))); 44 | result.push_back(jsi::PropNameID::forUtf8(rt, std::string("getClusters"))); 45 | result.push_back(jsi::PropNameID::forUtf8(rt, std::string("getChildren"))); 46 | result.push_back(jsi::PropNameID::forUtf8(rt, std::string("getLeaves"))); 47 | result.push_back( 48 | jsi::PropNameID::forUtf8(rt, std::string("getClusterExpansionZoom"))); 49 | return result; 50 | } 51 | 52 | jsi::Value SuperclusterHostObject::get(jsi::Runtime &runtime, 53 | const jsi::PropNameID &propNameId) { 54 | auto propName = propNameId.utf8(runtime); 55 | auto funcName = "Supercluster." + propName; 56 | 57 | if(propName == "getTile") { 58 | return jsi::Function::createFromHostFunction( 59 | runtime, jsi::PropNameID::forAscii(runtime, funcName), 60 | 3, // zoom, x, y 61 | [this](jsi::Runtime &rt, const jsi::Value &thisVal, 62 | const jsi::Value *args, size_t count) -> jsi::Value { 63 | if(count != 3 || !args[0].isNumber() || !args[1].isNumber() || 64 | !args[2].isNumber()) 65 | throw jsi::JSError(rt, 66 | "React-Native-Clusterer: getTile " 67 | "expects 3 numbers as arguments"); 68 | 69 | int zoom = (int)args[0].asNumber(); 70 | int x = (int)args[1].asNumber(); 71 | int y = (int)args[2].asNumber(); 72 | 73 | auto tiles = instance->getTile(zoom, x, y); 74 | 75 | jsi::Array result = jsi::Array(rt, tiles.size()); 76 | int i = 0; 77 | for(auto &tile : tiles) { 78 | jsi::Object jsiTile = jsi::Object(rt); 79 | tileToJSI(rt, jsiTile, tile, featuresInput); 80 | result.setValueAtIndex(rt, i, jsiTile); 81 | i++; 82 | } 83 | return result; 84 | }); 85 | } 86 | 87 | if(propName == "getClusters") { 88 | return jsi::Function::createFromHostFunction( 89 | runtime, jsi::PropNameID::forAscii(runtime, funcName), 90 | 2, // bbox, zoom 91 | [this](jsi::Runtime &rt, const jsi::Value &thisVal, 92 | const jsi::Value *args, size_t count) -> jsi::Value { 93 | if(count != 2 || !args[0].asObject(rt).isArray(rt) || 94 | !args[1].isNumber()) 95 | throw jsi::JSError(rt, 96 | "React-Native-Clusterer: getClusters " 97 | "expects an array and a number"); 98 | 99 | double bbox[4]; 100 | 101 | try { 102 | auto jsibbox = args[0].asObject(rt).asArray(rt); 103 | bbox[0] = jsibbox.getValueAtIndex(rt, 0).asNumber(); 104 | bbox[1] = jsibbox.getValueAtIndex(rt, 1).asNumber(); 105 | bbox[2] = jsibbox.getValueAtIndex(rt, 2).asNumber(); 106 | bbox[3] = jsibbox.getValueAtIndex(rt, 3).asNumber(); 107 | } catch(exception &e) { 108 | throw jsi::JSError( 109 | rt, 110 | "React-Native-Clusterer: GetClusters error, make sure " 111 | "boundingBox is an array of 4 numbers"); 112 | } 113 | 114 | int zoom = (int)args[1].asNumber(); 115 | 116 | auto clusters = instance->getClusters(bbox, zoom); 117 | jsi::Array result = jsi::Array(rt, clusters.size()); 118 | 119 | int i = 0; 120 | for(auto &cluster : clusters) { 121 | jsi::Object jsiCluster = jsi::Object(rt); 122 | clusterToJSI(rt, jsiCluster, cluster, featuresInput); 123 | result.setValueAtIndex(rt, i, jsiCluster); 124 | i++; 125 | } 126 | return result; 127 | }); 128 | } 129 | 130 | if(propName == "getChildren") { 131 | return jsi::Function::createFromHostFunction( 132 | runtime, jsi::PropNameID::forAscii(runtime, funcName), 133 | 1, // cluster_id 134 | [this](jsi::Runtime &rt, const jsi::Value &thisVal, 135 | const jsi::Value *args, size_t count) -> jsi::Value { 136 | if(count != 1 || !args[0].isNumber()) 137 | throw jsi::JSError(rt, 138 | "React-Native-Clusterer: getChildren " 139 | "expects a number for cluster_id"); 140 | 141 | auto cluster_id = (int)args[0].asNumber(); 142 | auto children = instance->getChildren(cluster_id); 143 | jsi::Array result = jsi::Array(rt, children.size()); 144 | 145 | int i = 0; 146 | for(auto &child : children) { 147 | jsi::Object jsiChild = jsi::Object(rt); 148 | clusterToJSI(rt, jsiChild, child, featuresInput); 149 | result.setValueAtIndex(rt, i, jsiChild); 150 | i++; 151 | } 152 | return result; 153 | }); 154 | } 155 | 156 | if(propName == "getLeaves") { 157 | return jsi::Function::createFromHostFunction( 158 | runtime, jsi::PropNameID::forAscii(runtime, funcName), 159 | 3, // clusterId, limit = 10, offset = 0 160 | [this](jsi::Runtime &rt, const jsi::Value &thisVal, 161 | const jsi::Value *args, size_t count) -> jsi::Value { 162 | if(count < 1 || count > 3) 163 | throw jsi::JSError(rt, 164 | "React-Native-Clusterer: getLeaves " 165 | "expects at least 1 argument, at most 3"); 166 | 167 | if(!args[0].isNumber()) 168 | throw jsi::JSError(rt, 169 | "React-Native-Clusterer: getLeaves " 170 | "first argument must be a number"); 171 | 172 | if(count >= 2 && !args[1].isNumber()) 173 | throw jsi::JSError(rt, 174 | "React-Native-Clusterer: getLeaves " 175 | "second argument must be a number"); 176 | 177 | if(count == 3 && !args[2].isNumber()) 178 | throw jsi::JSError(rt, 179 | "React-Native-Clusterer: getLeaves " 180 | "third argument must be a number"); 181 | 182 | auto cluster_id = (int)args[0].asNumber(); 183 | auto limit = count >= 2 ? (int)args[1].asNumber() : 10; 184 | auto offset = count == 3 ? (int)args[2].asNumber() : 0; 185 | 186 | auto leaves = instance->getLeaves(cluster_id, limit, offset); 187 | jsi::Array result = jsi::Array(rt, leaves.size()); 188 | 189 | int i = 0; 190 | for(auto &leaf : leaves) { 191 | jsi::Object jsiLeaf = jsi::Object(rt); 192 | clusterToJSI(rt, jsiLeaf, leaf, featuresInput); 193 | result.setValueAtIndex(rt, i, jsiLeaf); 194 | i++; 195 | } 196 | 197 | return result; 198 | }); 199 | } 200 | 201 | if(propName == "getClusterExpansionZoom") { 202 | return jsi::Function::createFromHostFunction( 203 | runtime, jsi::PropNameID::forAscii(runtime, funcName), 204 | 1, // cluster_id 205 | [this](jsi::Runtime &rt, const jsi::Value &thisVal, 206 | const jsi::Value *args, size_t count) -> jsi::Value { 207 | if(count != 1 || !args[0].isNumber()) 208 | throw jsi::JSError( 209 | rt, 210 | "React-Native-Clusterer: getClusterExpansionZoom expects " 211 | "number for cluster_id"); 212 | 213 | auto cluster_id = (int)args[0].asNumber(); 214 | 215 | return (int)instance->getClusterExpansionZoom(cluster_id); 216 | }); 217 | } 218 | 219 | return jsi::Value::undefined(); 220 | } 221 | } // namespace clusterer 222 | -------------------------------------------------------------------------------- /cpp/SuperclusterHostObject.h: -------------------------------------------------------------------------------- 1 | #pragma once 2 | 3 | #include 4 | 5 | #include "helpers.h" 6 | #include "supercluster.hpp" 7 | 8 | using namespace std; 9 | using namespace facebook; 10 | 11 | namespace clusterer { 12 | class JSI_EXPORT SuperclusterHostObject : public jsi::HostObject { 13 | public: 14 | SuperclusterHostObject(jsi::Runtime &rt, const jsi::Value *args, 15 | size_t count); 16 | ~SuperclusterHostObject(); 17 | 18 | public: 19 | jsi::Value get(jsi::Runtime &, const jsi::PropNameID &name) override; 20 | std::vector getPropertyNames(jsi::Runtime &rt) override; 21 | 22 | private: 23 | mapbox::supercluster::Supercluster *instance; 24 | jsi::Array featuresInput; 25 | }; 26 | } // namespace clusterer 27 | -------------------------------------------------------------------------------- /cpp/helpers.cpp: -------------------------------------------------------------------------------- 1 | #include "helpers.h" 2 | 3 | namespace clusterer { 4 | 5 | void parseJSIOptions(jsi::Runtime &rt, mapbox::supercluster::Options &options, 6 | jsi::Value const &jsiOptions) { 7 | if(jsiOptions.isObject()) { 8 | jsi::Object obj = jsiOptions.asObject(rt); 9 | 10 | if(obj.hasProperty(rt, "radius")) { 11 | jsi::Value radius = obj.getProperty(rt, "radius"); 12 | if(radius.isNumber()) { 13 | options.radius = (int)radius.asNumber(); 14 | } else 15 | throw jsi::JSError(rt, "Expected number for radius"); 16 | } 17 | 18 | if(obj.hasProperty(rt, "minZoom")) { 19 | jsi::Value minZoom = obj.getProperty(rt, "minZoom"); 20 | if(minZoom.isNumber()) { 21 | options.minZoom = (int)minZoom.asNumber(); 22 | } else 23 | throw jsi::JSError(rt, "Expected number for minZoom"); 24 | } 25 | 26 | if(obj.hasProperty(rt, "maxZoom")) { 27 | jsi::Value maxZoom = obj.getProperty(rt, "maxZoom"); 28 | if(maxZoom.isNumber()) { 29 | options.maxZoom = (int)maxZoom.asNumber(); 30 | } else 31 | throw jsi::JSError(rt, "Expected number for maxZoom"); 32 | } 33 | 34 | if(obj.hasProperty(rt, "extent")) { 35 | jsi::Value extent = obj.getProperty(rt, "extent"); 36 | if(extent.isNumber()) { 37 | options.extent = (int)extent.asNumber(); 38 | } else 39 | throw jsi::JSError(rt, "Expected number for extent"); 40 | } 41 | if(obj.hasProperty(rt, "minPoints")) { 42 | jsi::Value minPoints = obj.getProperty(rt, "minPoints"); 43 | if(minPoints.isNumber()) { 44 | options.minPoints = (int)minPoints.asNumber(); 45 | } else 46 | throw jsi::JSError(rt, "Expected number for minPoints"); 47 | } 48 | if(obj.hasProperty(rt, "generateId")) { 49 | jsi::Value generateId = obj.getProperty(rt, "generateId"); 50 | if(generateId.isBool()) { 51 | options.generateId = generateId.getBool(); 52 | } else 53 | throw jsi::JSError(rt, "Expected boolean for generateId"); 54 | } 55 | } else 56 | throw jsi::JSError(rt, "Expected object for options"); 57 | }; 58 | 59 | void parseJSIFeature(jsi::Runtime &rt, int featureIndex, 60 | mapbox::feature::feature &feature, 61 | jsi::Value const &jsiFeature) { 62 | if(!jsiFeature.isObject()) 63 | throw jsi::JSError(rt, "Expected GeoJSON Feature object"); 64 | 65 | jsi::Object obj = jsiFeature.asObject(rt); 66 | 67 | // obj.type 68 | if(!obj.hasProperty(rt, "type") || 69 | !strcmp(obj.getProperty(rt, "type").asString(rt).utf8(rt).c_str(), 70 | "Point")) 71 | throw jsi::JSError(rt, "Expected GeoJSON Feature object with type 'Point'"); 72 | 73 | // obj.geometry 74 | if(!obj.hasProperty(rt, "geometry")) 75 | throw jsi::JSError(rt, "Expected geometry object"); 76 | 77 | jsi::Value geometry = obj.getProperty(rt, "geometry"); 78 | 79 | if(!geometry.isObject()) throw jsi::JSError(rt, "Expected geometry object"); 80 | 81 | jsi::Object geoObj = geometry.asObject(rt); 82 | 83 | // obj.geometry.coordinates 84 | if(!geoObj.hasProperty(rt, "coordinates")) 85 | throw jsi::JSError(rt, "Expected coordinates property"); 86 | 87 | jsi::Value coordinates = geoObj.getProperty(rt, "coordinates"); 88 | 89 | if(!coordinates.asObject(rt).isArray(rt)) 90 | throw jsi::JSError(rt, "Expected array for coordinates"); 91 | 92 | jsi::Array arr = coordinates.asObject(rt).asArray(rt); 93 | 94 | if(arr.size(rt) != 2) 95 | throw jsi::JSError(rt, "Expected array of size 2 for coordinates"); 96 | 97 | jsi::Value x = arr.getValueAtIndex(rt, 0); 98 | jsi::Value y = arr.getValueAtIndex(rt, 1); 99 | 100 | if(!x.isNumber() || !y.isNumber()) 101 | throw jsi::JSError(rt, "Expected number for coordinates"); 102 | 103 | double lng = x.asNumber(); 104 | double lat = y.asNumber(); 105 | mapbox::geometry::point point(lng, lat); 106 | feature.geometry = point; 107 | 108 | feature.properties["_clusterer_index"] = std::uint64_t(featureIndex); 109 | }; 110 | 111 | void clusterToJSI(jsi::Runtime &rt, jsi::Object &jsiObject, 112 | mapbox::feature::feature &f, 113 | jsi::Array &featuresInput) { 114 | // .id 115 | if(f.id.is()) { 116 | jsiObject.setProperty(rt, "id", jsi::Value((int)f.id.get())); 117 | } 118 | 119 | // .type 120 | jsiObject.setProperty(rt, "type", jsi::String::createFromUtf8(rt, "Feature")); 121 | 122 | // .geometry - differs from tile geometry 123 | jsi::Object geometry = jsi::Object(rt); 124 | jsi::Array coordinates = jsi::Array(rt, 2); 125 | auto geo = f.geometry.get>(); 126 | coordinates.setValueAtIndex(rt, 0, jsi::Value(geo.x)); 127 | coordinates.setValueAtIndex(rt, 1, jsi::Value(geo.y)); 128 | geometry.setProperty(rt, "type", jsi::String::createFromUtf8(rt, "Point")); 129 | geometry.setProperty(rt, "coordinates", coordinates); 130 | jsiObject.setProperty(rt, "geometry", geometry); 131 | 132 | // .properties 133 | jsi::Object properties = jsi::Object(rt); 134 | int origFeatureIndex = -1; 135 | for(auto &itr : f.properties) { 136 | featurePropertyToJSI(rt, properties, itr, origFeatureIndex); 137 | } 138 | 139 | if(origFeatureIndex != -1) { 140 | jsi::Object originalFeature = 141 | featuresInput.getValueAtIndex(rt, origFeatureIndex).asObject(rt); 142 | if(originalFeature.hasProperty(rt, "properties")) { 143 | jsiObject.setProperty(rt, "properties", 144 | originalFeature.getProperty(rt, "properties")); 145 | } 146 | } else { 147 | jsiObject.setProperty(rt, "properties", properties); 148 | } 149 | } 150 | 151 | void tileToJSI(jsi::Runtime &rt, jsi::Object &jsiObject, 152 | mapbox::feature::feature &f, 153 | jsi::Array &featuresInput) { 154 | // .id 155 | if(f.id.is()) { 156 | jsiObject.setProperty(rt, "id", jsi::Value((int)f.id.get())); 157 | } 158 | 159 | // .type 160 | jsiObject.setProperty(rt, "type", 1); 161 | 162 | // .geometry 163 | jsi::Array geometryContainer = jsi::Array(rt, 1); 164 | jsi::Array geometry = jsi::Array(rt, 2); 165 | auto geo = f.geometry.get>(); 166 | geometry.setValueAtIndex(rt, 0, jsi::Value((int)geo.x)); 167 | geometry.setValueAtIndex(rt, 1, jsi::Value((int)geo.y)); 168 | geometryContainer.setValueAtIndex(rt, 0, geometry); 169 | jsiObject.setProperty(rt, "geometry", geometryContainer); 170 | 171 | // .tags 172 | jsi::Object tags = jsi::Object(rt); 173 | int origFeatureIndex = -1; 174 | for(auto &itr : f.properties) { 175 | featurePropertyToJSI(rt, tags, itr, origFeatureIndex); 176 | } 177 | 178 | if(origFeatureIndex != -1) { 179 | jsi::Object originalFeature = 180 | featuresInput.getValueAtIndex(rt, origFeatureIndex).asObject(rt); 181 | if(originalFeature.hasProperty(rt, "properties")) { 182 | jsiObject.setProperty(rt, "tags", 183 | originalFeature.getProperty(rt, "properties")); 184 | } 185 | } else { 186 | jsiObject.setProperty(rt, "tags", tags); 187 | } 188 | } 189 | 190 | void featurePropertyToJSI( 191 | jsi::Runtime &rt, jsi::Object &jsiFeatureProperties, 192 | std::pair &itr, 193 | int &origFeatureIndex) { 194 | auto name = itr.first; 195 | auto nameJSI = jsi::String::createFromUtf8(rt, name); 196 | auto type = itr.second.which(); 197 | 198 | if(name == "_clusterer_index") { 199 | origFeatureIndex = (int)itr.second.get(); 200 | } 201 | // Boolean 202 | else if(type == 1) { 203 | jsiFeatureProperties.setProperty(rt, nameJSI, 204 | jsi::Value(itr.second.get() == 1)); 205 | } 206 | // Integer 207 | else if(type == 2) { 208 | jsiFeatureProperties.setProperty(rt, nameJSI, 209 | (int)itr.second.get()); 210 | } 211 | // Double 212 | else if(type == 3 || type == 4) { 213 | jsiFeatureProperties.setProperty(rt, nameJSI, 214 | jsi::Value(itr.second.get())); 215 | } 216 | // String 217 | else if(type == 5) { 218 | jsiFeatureProperties.setProperty( 219 | rt, nameJSI, 220 | jsi::String::createFromUtf8(rt, itr.second.get())); 221 | return; 222 | } 223 | } 224 | } // namespace clusterer 225 | -------------------------------------------------------------------------------- /cpp/helpers.h: -------------------------------------------------------------------------------- 1 | #pragma once 2 | 3 | #include 4 | 5 | #include 6 | 7 | #include "supercluster.hpp" 8 | 9 | using namespace std; 10 | using namespace facebook; 11 | 12 | namespace clusterer { 13 | 14 | void parseJSIOptions(jsi::Runtime &rt, mapbox::supercluster::Options &options, 15 | jsi::Value const &jsiOptions); 16 | 17 | void parseJSIFeature(jsi::Runtime &rt, int featureIndex, 18 | mapbox::feature::feature &feature, 19 | jsi::Value const &jsiFeature); 20 | 21 | void clusterToJSI(jsi::Runtime &rt, jsi::Object &jsiObject, 22 | mapbox::feature::feature &f, 23 | jsi::Array &featuresInput); 24 | 25 | void tileToJSI(jsi::Runtime &rt, jsi::Object &jsiObject, 26 | mapbox::feature::feature &f, 27 | jsi::Array &featuresInput); 28 | 29 | void featurePropertyToJSI(jsi::Runtime &rt, 30 | jsi::Object &jsiFeatureProperties, 31 | std::pair &itr, 32 | int &origFeatureIndex); 33 | 34 | } // namespace clusterer 35 | -------------------------------------------------------------------------------- /cpp/react-native-clusterer.cpp: -------------------------------------------------------------------------------- 1 | #include "react-native-clusterer.h" 2 | 3 | namespace clusterer { 4 | void install(jsi::Runtime &jsiRuntime) { 5 | auto createSupercluster = jsi::Function::createFromHostFunction( 6 | jsiRuntime, jsi::PropNameID::forAscii(jsiRuntime, "createSupercluster"), 7 | 2, 8 | [](jsi::Runtime &rt, const jsi::Value &thisVal, const jsi::Value *args, 9 | size_t count) -> jsi::Value { 10 | auto instance = 11 | std::make_shared(rt, args, count); 12 | 13 | return jsi::Object::createFromHostObject(rt, instance); 14 | }); 15 | jsiRuntime.global().setProperty(jsiRuntime, "createSupercluster", 16 | std::move(createSupercluster)); 17 | } 18 | } // namespace clusterer 19 | -------------------------------------------------------------------------------- /cpp/react-native-clusterer.h: -------------------------------------------------------------------------------- 1 | #pragma once 2 | 3 | #include 4 | #include 5 | 6 | #include "SuperclusterHostObject.h" 7 | 8 | using namespace facebook; 9 | using namespace std; 10 | 11 | namespace clusterer { 12 | 13 | void install(jsi::Runtime &jsiRuntime); 14 | void cleanup(); 15 | } // namespace clusterer 16 | -------------------------------------------------------------------------------- /example/.bundle/config: -------------------------------------------------------------------------------- 1 | BUNDLE_PATH: "vendor/bundle" 2 | BUNDLE_FORCE_RUBY_PLATFORM: 1 3 | -------------------------------------------------------------------------------- /example/.ruby-version: -------------------------------------------------------------------------------- 1 | 2.7.6 2 | -------------------------------------------------------------------------------- /example/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /example/Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version 4 | ruby File.read(File.join(__dir__, '.ruby-version')).strip 5 | 6 | gem 'cocoapods', '~> 1.11', '>= 1.11.3' 7 | -------------------------------------------------------------------------------- /example/_node-version: -------------------------------------------------------------------------------- 1 | 18 2 | -------------------------------------------------------------------------------- /example/android/app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: "com.android.application" 2 | apply plugin: "com.facebook.react" 3 | 4 | import com.android.build.OutputFile 5 | 6 | /** 7 | * This is the configuration block to customize your React Native Android app. 8 | * By default you don't need to apply any configuration, just uncomment the lines you need. 9 | */ 10 | react { 11 | /* Folders */ 12 | // The root of your project, i.e. where "package.json" lives. Default is '..' 13 | // root = file("../") 14 | // The folder where the react-native NPM package is. Default is ../node_modules/react-native 15 | // reactNativeDir = file("../node_modules/react-native") 16 | // The folder where the react-native Codegen package is. Default is ../node_modules/react-native-codegen 17 | // codegenDir = file("../node_modules/react-native-codegen") 18 | // The cli.js file which is the React Native CLI entrypoint. Default is ../node_modules/react-native/cli.js 19 | // cliFile = file("../node_modules/react-native/cli.js") 20 | 21 | /* Variants */ 22 | // The list of variants to that are debuggable. For those we're going to 23 | // skip the bundling of the JS bundle and the assets. By default is just 'debug'. 24 | // If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants. 25 | // debuggableVariants = ["liteDebug", "prodDebug"] 26 | 27 | /* Bundling */ 28 | // A list containing the node command and its flags. Default is just 'node'. 29 | // nodeExecutableAndArgs = ["node"] 30 | // 31 | // The command to run when bundling. By default is 'bundle' 32 | // bundleCommand = "ram-bundle" 33 | // 34 | // The path to the CLI configuration file. Default is empty. 35 | // bundleConfig = file(../rn-cli.config.js) 36 | // 37 | // The name of the generated asset file containing your JS bundle 38 | // bundleAssetName = "MyApplication.android.bundle" 39 | // 40 | // The entry file for bundle generation. Default is 'index.android.js' or 'index.js' 41 | // entryFile = file("../js/MyApplication.android.js") 42 | // 43 | // A list of extra flags to pass to the 'bundle' commands. 44 | // See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle 45 | // extraPackagerArgs = [] 46 | 47 | /* Hermes Commands */ 48 | // The hermes compiler command to run. By default it is 'hermesc' 49 | // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc" 50 | // 51 | // The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map" 52 | // hermesFlags = ["-O", "-output-source-map"] 53 | } 54 | 55 | /** 56 | * Set this to true to create four separate APKs instead of one, 57 | * one for each native architecture. This is useful if you don't 58 | * use App Bundles (https://developer.android.com/guide/app-bundle/) 59 | * and want to have separate APKs to upload to the Play Store. 60 | */ 61 | def enableSeparateBuildPerCPUArchitecture = false 62 | 63 | /** 64 | * Set this to true to Run Proguard on Release builds to minify the Java bytecode. 65 | */ 66 | def enableProguardInReleaseBuilds = false 67 | 68 | /** 69 | * The preferred build flavor of JavaScriptCore (JSC) 70 | * 71 | * For example, to use the international variant, you can use: 72 | * `def jscFlavor = 'org.webkit:android-jsc-intl:+'` 73 | * 74 | * The international variant includes ICU i18n library and necessary data 75 | * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that 76 | * give correct results when using with locales other than en-US. Note that 77 | * this variant is about 6MiB larger per architecture than default. 78 | */ 79 | def jscFlavor = 'org.webkit:android-jsc:+' 80 | 81 | /** 82 | * Private function to get the list of Native Architectures you want to build. 83 | * This reads the value from reactNativeArchitectures in your gradle.properties 84 | * file and works together with the --active-arch-only flag of react-native run-android. 85 | */ 86 | def reactNativeArchitectures() { 87 | def value = project.getProperties().get("reactNativeArchitectures") 88 | return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"] 89 | } 90 | 91 | android { 92 | ndkVersion rootProject.ext.ndkVersion 93 | 94 | compileSdkVersion rootProject.ext.compileSdkVersion 95 | 96 | namespace "com.clustererexample" 97 | defaultConfig { 98 | applicationId "com.clustererexample" 99 | minSdkVersion rootProject.ext.minSdkVersion 100 | targetSdkVersion rootProject.ext.targetSdkVersion 101 | versionCode 1 102 | versionName "1.0" 103 | } 104 | 105 | splits { 106 | abi { 107 | reset() 108 | enable enableSeparateBuildPerCPUArchitecture 109 | universalApk false // If true, also generate a universal APK 110 | include (*reactNativeArchitectures()) 111 | } 112 | } 113 | signingConfigs { 114 | debug { 115 | storeFile file('debug.keystore') 116 | storePassword 'android' 117 | keyAlias 'androiddebugkey' 118 | keyPassword 'android' 119 | } 120 | } 121 | buildTypes { 122 | debug { 123 | signingConfig signingConfigs.debug 124 | } 125 | release { 126 | // Caution! In production, you need to generate your own keystore file. 127 | // see https://reactnative.dev/docs/signed-apk-android. 128 | signingConfig signingConfigs.debug 129 | minifyEnabled enableProguardInReleaseBuilds 130 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" 131 | } 132 | } 133 | 134 | // applicationVariants are e.g. debug, release 135 | applicationVariants.all { variant -> 136 | variant.outputs.each { output -> 137 | // For each separate APK per architecture, set a unique version code as described here: 138 | // https://developer.android.com/studio/build/configure-apk-splits.html 139 | // Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc. 140 | def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4] 141 | def abi = output.getFilter(OutputFile.ABI) 142 | if (abi != null) { // null for the universal-debug, universal-release variants 143 | output.versionCodeOverride = 144 | defaultConfig.versionCode * 1000 + versionCodes.get(abi) 145 | } 146 | 147 | } 148 | } 149 | } 150 | 151 | dependencies { 152 | // The version of react-native is set by the React Native Gradle Plugin 153 | implementation("com.facebook.react:react-android") 154 | 155 | implementation("androidx.swiperefreshlayout:swiperefreshlayout:1.0.0") 156 | 157 | debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") 158 | debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") { 159 | exclude group:'com.squareup.okhttp3', module:'okhttp' 160 | } 161 | 162 | debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") 163 | if (hermesEnabled.toBoolean()) { 164 | implementation("com.facebook.react:hermes-android") 165 | } else { 166 | implementation jscFlavor 167 | } 168 | } 169 | 170 | apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project) 171 | -------------------------------------------------------------------------------- /example/android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JiriHoffmann/react-native-clusterer/da3b7088052be4bf994e9e2b08591ad581c1a0b6/example/android/app/debug.keystore -------------------------------------------------------------------------------- /example/android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | -------------------------------------------------------------------------------- /example/android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /example/android/app/src/debug/java/com/clustererexample/ReactNativeFlipper.java: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Meta Platforms, Inc. and affiliates. 3 | * 4 | *

This source code is licensed under the MIT license found in the LICENSE file in the root 5 | * directory of this source tree. 6 | */ 7 | package com.clustererexample; 8 | 9 | import android.content.Context; 10 | import com.facebook.flipper.android.AndroidFlipperClient; 11 | import com.facebook.flipper.android.utils.FlipperUtils; 12 | import com.facebook.flipper.core.FlipperClient; 13 | import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin; 14 | import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin; 15 | import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin; 16 | import com.facebook.flipper.plugins.inspector.DescriptorMapping; 17 | import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin; 18 | import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor; 19 | import com.facebook.flipper.plugins.network.NetworkFlipperPlugin; 20 | import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin; 21 | import com.facebook.react.ReactInstanceEventListener; 22 | import com.facebook.react.ReactInstanceManager; 23 | import com.facebook.react.bridge.ReactContext; 24 | import com.facebook.react.modules.network.NetworkingModule; 25 | import okhttp3.OkHttpClient; 26 | 27 | /** 28 | * Class responsible of loading Flipper inside your React Native application. This is the debug 29 | * flavor of it. Here you can add your own plugins and customize the Flipper setup. 30 | */ 31 | public class ReactNativeFlipper { 32 | public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) { 33 | if (FlipperUtils.shouldEnableFlipper(context)) { 34 | final FlipperClient client = AndroidFlipperClient.getInstance(context); 35 | 36 | client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults())); 37 | client.addPlugin(new DatabasesFlipperPlugin(context)); 38 | client.addPlugin(new SharedPreferencesFlipperPlugin(context)); 39 | client.addPlugin(CrashReporterPlugin.getInstance()); 40 | 41 | NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin(); 42 | NetworkingModule.setCustomClientBuilder( 43 | new NetworkingModule.CustomClientBuilder() { 44 | @Override 45 | public void apply(OkHttpClient.Builder builder) { 46 | builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); 47 | } 48 | }); 49 | client.addPlugin(networkFlipperPlugin); 50 | client.start(); 51 | 52 | // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized 53 | // Hence we run if after all native modules have been initialized 54 | ReactContext reactContext = reactInstanceManager.getCurrentReactContext(); 55 | if (reactContext == null) { 56 | reactInstanceManager.addReactInstanceEventListener( 57 | new ReactInstanceEventListener() { 58 | @Override 59 | public void onReactContextInitialized(ReactContext reactContext) { 60 | reactInstanceManager.removeReactInstanceEventListener(this); 61 | reactContext.runOnNativeModulesQueueThread( 62 | new Runnable() { 63 | @Override 64 | public void run() { 65 | client.addPlugin(new FrescoFlipperPlugin()); 66 | } 67 | }); 68 | } 69 | }); 70 | } else { 71 | client.addPlugin(new FrescoFlipperPlugin()); 72 | } 73 | } 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /example/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 12 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /example/android/app/src/main/java/com/clustererexample/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.clustererexample; 2 | 3 | import com.facebook.react.ReactActivity; 4 | import com.facebook.react.ReactActivityDelegate; 5 | import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint; 6 | import com.facebook.react.defaults.DefaultReactActivityDelegate; 7 | 8 | public class MainActivity extends ReactActivity { 9 | 10 | /** 11 | * Returns the name of the main component registered from JavaScript. This is used to schedule 12 | * rendering of the component. 13 | */ 14 | @Override 15 | protected String getMainComponentName() { 16 | return "ClustererExample"; 17 | } 18 | 19 | /** 20 | * Returns the instance of the {@link ReactActivityDelegate}. Here we use a util class {@link 21 | * DefaultReactActivityDelegate} which allows you to easily enable Fabric and Concurrent React 22 | * (aka React 18) with two boolean flags. 23 | */ 24 | @Override 25 | protected ReactActivityDelegate createReactActivityDelegate() { 26 | return new DefaultReactActivityDelegate( 27 | this, 28 | getMainComponentName(), 29 | // If you opted-in for the New Architecture, we enable the Fabric Renderer. 30 | DefaultNewArchitectureEntryPoint.getFabricEnabled(), // fabricEnabled 31 | // If you opted-in for the New Architecture, we enable Concurrent React (i.e. React 18). 32 | DefaultNewArchitectureEntryPoint.getConcurrentReactEnabled() // concurrentRootEnabled 33 | ); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /example/android/app/src/main/java/com/clustererexample/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.clustererexample; 2 | 3 | import android.app.Application; 4 | import com.facebook.react.PackageList; 5 | import com.facebook.react.ReactApplication; 6 | import com.facebook.react.ReactNativeHost; 7 | import com.facebook.react.ReactPackage; 8 | import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint; 9 | import com.facebook.react.defaults.DefaultReactNativeHost; 10 | import com.facebook.soloader.SoLoader; 11 | import java.util.List; 12 | 13 | public class MainApplication extends Application implements ReactApplication { 14 | 15 | private final ReactNativeHost mReactNativeHost = 16 | new DefaultReactNativeHost(this) { 17 | @Override 18 | public boolean getUseDeveloperSupport() { 19 | return BuildConfig.DEBUG; 20 | } 21 | 22 | @Override 23 | protected List getPackages() { 24 | @SuppressWarnings("UnnecessaryLocalVariable") 25 | List packages = new PackageList(this).getPackages(); 26 | // Packages that cannot be autolinked yet can be added manually here, for example: 27 | // packages.add(new MyReactNativePackage()); 28 | return packages; 29 | } 30 | 31 | @Override 32 | protected String getJSMainModuleName() { 33 | return "index"; 34 | } 35 | 36 | @Override 37 | protected boolean isNewArchEnabled() { 38 | return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; 39 | } 40 | 41 | @Override 42 | protected Boolean isHermesEnabled() { 43 | return BuildConfig.IS_HERMES_ENABLED; 44 | } 45 | }; 46 | 47 | @Override 48 | public ReactNativeHost getReactNativeHost() { 49 | return mReactNativeHost; 50 | } 51 | 52 | @Override 53 | public void onCreate() { 54 | super.onCreate(); 55 | SoLoader.init(this, /* native exopackage */ false); 56 | if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) { 57 | // If you opted-in for the New Architecture, we load the native entry point for this app. 58 | DefaultNewArchitectureEntryPoint.load(); 59 | } 60 | ReactNativeFlipper.initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/drawable/rn_edit_text_material.xml: -------------------------------------------------------------------------------- 1 | 2 | 16 | 21 | 22 | 23 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JiriHoffmann/react-native-clusterer/da3b7088052be4bf994e9e2b08591ad581c1a0b6/example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JiriHoffmann/react-native-clusterer/da3b7088052be4bf994e9e2b08591ad581c1a0b6/example/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JiriHoffmann/react-native-clusterer/da3b7088052be4bf994e9e2b08591ad581c1a0b6/example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JiriHoffmann/react-native-clusterer/da3b7088052be4bf994e9e2b08591ad581c1a0b6/example/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JiriHoffmann/react-native-clusterer/da3b7088052be4bf994e9e2b08591ad581c1a0b6/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JiriHoffmann/react-native-clusterer/da3b7088052be4bf994e9e2b08591ad581c1a0b6/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JiriHoffmann/react-native-clusterer/da3b7088052be4bf994e9e2b08591ad581c1a0b6/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JiriHoffmann/react-native-clusterer/da3b7088052be4bf994e9e2b08591ad581c1a0b6/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JiriHoffmann/react-native-clusterer/da3b7088052be4bf994e9e2b08591ad581c1a0b6/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JiriHoffmann/react-native-clusterer/da3b7088052be4bf994e9e2b08591ad581c1a0b6/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | ClustererExample 3 | 4 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /example/android/app/src/release/java/com/clustererexample/ReactNativeFlipper.java: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Meta Platforms, Inc. and affiliates. 3 | * 4 | *

This source code is licensed under the MIT license found in the LICENSE file in the root 5 | * directory of this source tree. 6 | */ 7 | package com.clustererexample; 8 | 9 | import android.content.Context; 10 | import com.facebook.react.ReactInstanceManager; 11 | 12 | /** 13 | * Class responsible of loading Flipper inside your React Native application. This is the release 14 | * flavor of it so it's empty as we don't want to load Flipper. 15 | */ 16 | public class ReactNativeFlipper { 17 | public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) { 18 | // Do nothing as we don't want to initialize Flipper on Release. 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /example/android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | ext { 5 | buildToolsVersion = "33.0.0" 6 | minSdkVersion = 21 7 | compileSdkVersion = 33 8 | targetSdkVersion = 33 9 | 10 | // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP. 11 | ndkVersion = "23.1.7779620" 12 | } 13 | repositories { 14 | google() 15 | mavenCentral() 16 | } 17 | dependencies { 18 | classpath("com.android.tools.build:gradle:7.3.1") 19 | classpath("com.facebook.react:react-native-gradle-plugin") 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /example/android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx512m -XX:MaxMetaspaceSize=256m 13 | org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | 20 | # AndroidX package structure to make it clearer which packages are bundled with the 21 | # Android operating system, and which are packaged with your app's APK 22 | # https://developer.android.com/topic/libraries/support-library/androidx-rn 23 | android.useAndroidX=true 24 | # Automatically convert third-party libraries to use AndroidX 25 | android.enableJetifier=true 26 | 27 | # Version of flipper SDK to use with React Native 28 | FLIPPER_VERSION=0.125.0 29 | 30 | # Use this property to specify which architecture you want to build. 31 | # You can also override it from the CLI using 32 | # ./gradlew -PreactNativeArchitectures=x86_64 33 | reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64 34 | 35 | # Use this property to enable support to the new architecture. 36 | # This will allow you to use TurboModules and the Fabric render in 37 | # your application. You should enable this flag either if you want 38 | # to write custom TurboModules/Fabric components OR use libraries that 39 | # are providing them. 40 | newArchEnabled=false 41 | 42 | # Use this property to enable or disable the Hermes JS engine. 43 | # If set to false, you will be using JSC instead. 44 | hermesEnabled=true 45 | -------------------------------------------------------------------------------- /example/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JiriHoffmann/react-native-clusterer/da3b7088052be4bf994e9e2b08591ad581c1a0b6/example/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /example/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-7.5.1-all.zip 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | -------------------------------------------------------------------------------- /example/android/gradlew: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | # 4 | # Copyright © 2015-2021 the original authors. 5 | # 6 | # Licensed under the Apache License, Version 2.0 (the "License"); 7 | # you may not use this file except in compliance with the License. 8 | # You may obtain a copy of the License at 9 | # 10 | # https://www.apache.org/licenses/LICENSE-2.0 11 | # 12 | # Unless required by applicable law or agreed to in writing, software 13 | # distributed under the License is distributed on an "AS IS" BASIS, 14 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | # See the License for the specific language governing permissions and 16 | # limitations under the License. 17 | # 18 | 19 | ############################################################################## 20 | # 21 | # Gradle start up script for POSIX generated by Gradle. 22 | # 23 | # Important for running: 24 | # 25 | # (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is 26 | # noncompliant, but you have some other compliant shell such as ksh or 27 | # bash, then to run this script, type that shell name before the whole 28 | # command line, like: 29 | # 30 | # ksh Gradle 31 | # 32 | # Busybox and similar reduced shells will NOT work, because this script 33 | # requires all of these POSIX shell features: 34 | # * functions; 35 | # * expansions «$var», «${var}», «${var:-default}», «${var+SET}», 36 | # «${var#prefix}», «${var%suffix}», and «$( cmd )»; 37 | # * compound commands having a testable exit status, especially «case»; 38 | # * various built-in commands including «command», «set», and «ulimit». 39 | # 40 | # Important for patching: 41 | # 42 | # (2) This script targets any POSIX shell, so it avoids extensions provided 43 | # by Bash, Ksh, etc; in particular arrays are avoided. 44 | # 45 | # The "traditional" practice of packing multiple parameters into a 46 | # space-separated string is a well documented source of bugs and security 47 | # problems, so this is (mostly) avoided, by progressively accumulating 48 | # options in "$@", and eventually passing that to Java. 49 | # 50 | # Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS, 51 | # and GRADLE_OPTS) rely on word-splitting, this is performed explicitly; 52 | # see the in-line comments for details. 53 | # 54 | # There are tweaks for specific operating systems such as AIX, CygWin, 55 | # Darwin, MinGW, and NonStop. 56 | # 57 | # (3) This script is generated from the Groovy template 58 | # https://github.com/gradle/gradle/blob/master/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt 59 | # within the Gradle project. 60 | # 61 | # You can find Gradle at https://github.com/gradle/gradle/. 62 | # 63 | ############################################################################## 64 | 65 | # Attempt to set APP_HOME 66 | 67 | # Resolve links: $0 may be a link 68 | app_path=$0 69 | 70 | # Need this for daisy-chained symlinks. 71 | while 72 | APP_HOME=${app_path%"${app_path##*/}"} # leaves a trailing /; empty if no leading path 73 | [ -h "$app_path" ] 74 | do 75 | ls=$( ls -ld "$app_path" ) 76 | link=${ls#*' -> '} 77 | case $link in #( 78 | /*) app_path=$link ;; #( 79 | *) app_path=$APP_HOME$link ;; 80 | esac 81 | done 82 | 83 | APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit 84 | 85 | APP_NAME="Gradle" 86 | APP_BASE_NAME=${0##*/} 87 | 88 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 89 | DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' 90 | 91 | # Use the maximum available, or set MAX_FD != -1 to use that value. 92 | MAX_FD=maximum 93 | 94 | warn () { 95 | echo "$*" 96 | } >&2 97 | 98 | die () { 99 | echo 100 | echo "$*" 101 | echo 102 | exit 1 103 | } >&2 104 | 105 | # OS specific support (must be 'true' or 'false'). 106 | cygwin=false 107 | msys=false 108 | darwin=false 109 | nonstop=false 110 | case "$( uname )" in #( 111 | CYGWIN* ) cygwin=true ;; #( 112 | Darwin* ) darwin=true ;; #( 113 | MSYS* | MINGW* ) msys=true ;; #( 114 | NONSTOP* ) nonstop=true ;; 115 | esac 116 | 117 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 118 | 119 | 120 | # Determine the Java command to use to start the JVM. 121 | if [ -n "$JAVA_HOME" ] ; then 122 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 123 | # IBM's JDK on AIX uses strange locations for the executables 124 | JAVACMD=$JAVA_HOME/jre/sh/java 125 | else 126 | JAVACMD=$JAVA_HOME/bin/java 127 | fi 128 | if [ ! -x "$JAVACMD" ] ; then 129 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 130 | 131 | Please set the JAVA_HOME variable in your environment to match the 132 | location of your Java installation." 133 | fi 134 | else 135 | JAVACMD=java 136 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 137 | 138 | Please set the JAVA_HOME variable in your environment to match the 139 | location of your Java installation." 140 | fi 141 | 142 | # Increase the maximum file descriptors if we can. 143 | if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then 144 | case $MAX_FD in #( 145 | max*) 146 | MAX_FD=$( ulimit -H -n ) || 147 | warn "Could not query maximum file descriptor limit" 148 | esac 149 | case $MAX_FD in #( 150 | '' | soft) :;; #( 151 | *) 152 | ulimit -n "$MAX_FD" || 153 | warn "Could not set maximum file descriptor limit to $MAX_FD" 154 | esac 155 | fi 156 | 157 | # Collect all arguments for the java command, stacking in reverse order: 158 | # * args from the command line 159 | # * the main class name 160 | # * -classpath 161 | # * -D...appname settings 162 | # * --module-path (only if needed) 163 | # * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables. 164 | 165 | # For Cygwin or MSYS, switch paths to Windows format before running java 166 | if "$cygwin" || "$msys" ; then 167 | APP_HOME=$( cygpath --path --mixed "$APP_HOME" ) 168 | CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" ) 169 | 170 | JAVACMD=$( cygpath --unix "$JAVACMD" ) 171 | 172 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 173 | for arg do 174 | if 175 | case $arg in #( 176 | -*) false ;; # don't mess with options #( 177 | /?*) t=${arg#/} t=/${t%%/*} # looks like a POSIX filepath 178 | [ -e "$t" ] ;; #( 179 | *) false ;; 180 | esac 181 | then 182 | arg=$( cygpath --path --ignore --mixed "$arg" ) 183 | fi 184 | # Roll the args list around exactly as many times as the number of 185 | # args, so each arg winds up back in the position where it started, but 186 | # possibly modified. 187 | # 188 | # NB: a `for` loop captures its iteration list before it begins, so 189 | # changing the positional parameters here affects neither the number of 190 | # iterations, nor the values presented in `arg`. 191 | shift # remove old arg 192 | set -- "$@" "$arg" # push replacement arg 193 | done 194 | fi 195 | 196 | # Collect all arguments for the java command; 197 | # * $DEFAULT_JVM_OPTS, $JAVA_OPTS, and $GRADLE_OPTS can contain fragments of 198 | # shell script including quotes and variable substitutions, so put them in 199 | # double quotes to make sure that they get re-expanded; and 200 | # * put everything else in single quotes, so that it's not re-expanded. 201 | 202 | set -- \ 203 | "-Dorg.gradle.appname=$APP_BASE_NAME" \ 204 | -classpath "$CLASSPATH" \ 205 | org.gradle.wrapper.GradleWrapperMain \ 206 | "$@" 207 | 208 | # Use "xargs" to parse quoted args. 209 | # 210 | # With -n1 it outputs one arg per line, with the quotes and backslashes removed. 211 | # 212 | # In Bash we could simply go: 213 | # 214 | # readarray ARGS < <( xargs -n1 <<<"$var" ) && 215 | # set -- "${ARGS[@]}" "$@" 216 | # 217 | # but POSIX shell has neither arrays nor command substitution, so instead we 218 | # post-process each arg (as a line of input to sed) to backslash-escape any 219 | # character that might be a shell metacharacter, then use eval to reverse 220 | # that process (while maintaining the separation between arguments), and wrap 221 | # the whole thing up as a single "set" statement. 222 | # 223 | # This will of course break if any of these variables contains a newline or 224 | # an unmatched quote. 225 | # 226 | 227 | eval "set -- $( 228 | printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" | 229 | xargs -n1 | 230 | sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' | 231 | tr '\n' ' ' 232 | )" '"$@"' 233 | 234 | exec "$JAVACMD" "$@" 235 | -------------------------------------------------------------------------------- /example/android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @rem 2 | @rem Copyright 2015 the original author or authors. 3 | @rem 4 | @rem Licensed under the Apache License, Version 2.0 (the "License"); 5 | @rem you may not use this file except in compliance with the License. 6 | @rem You may obtain a copy of the License at 7 | @rem 8 | @rem https://www.apache.org/licenses/LICENSE-2.0 9 | @rem 10 | @rem Unless required by applicable law or agreed to in writing, software 11 | @rem distributed under the License is distributed on an "AS IS" BASIS, 12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | @rem See the License for the specific language governing permissions and 14 | @rem limitations under the License. 15 | @rem 16 | 17 | @if "%DEBUG%" == "" @echo off 18 | @rem ########################################################################## 19 | @rem 20 | @rem Gradle startup script for Windows 21 | @rem 22 | @rem ########################################################################## 23 | 24 | @rem Set local scope for the variables with windows NT shell 25 | if "%OS%"=="Windows_NT" setlocal 26 | 27 | set DIRNAME=%~dp0 28 | if "%DIRNAME%" == "" set DIRNAME=. 29 | set APP_BASE_NAME=%~n0 30 | set APP_HOME=%DIRNAME% 31 | 32 | @rem Resolve any "." and ".." in APP_HOME to make it shorter. 33 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi 34 | 35 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 36 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" 37 | 38 | @rem Find java.exe 39 | if defined JAVA_HOME goto findJavaFromJavaHome 40 | 41 | set JAVA_EXE=java.exe 42 | %JAVA_EXE% -version >NUL 2>&1 43 | if "%ERRORLEVEL%" == "0" goto execute 44 | 45 | echo. 46 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 47 | echo. 48 | echo Please set the JAVA_HOME variable in your environment to match the 49 | echo location of your Java installation. 50 | 51 | goto fail 52 | 53 | :findJavaFromJavaHome 54 | set JAVA_HOME=%JAVA_HOME:"=% 55 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 56 | 57 | if exist "%JAVA_EXE%" goto execute 58 | 59 | echo. 60 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 61 | echo. 62 | echo Please set the JAVA_HOME variable in your environment to match the 63 | echo location of your Java installation. 64 | 65 | goto fail 66 | 67 | :execute 68 | @rem Setup the command line 69 | 70 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 71 | 72 | 73 | @rem Execute Gradle 74 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %* 75 | 76 | :end 77 | @rem End local scope for the variables with windows NT shell 78 | if "%ERRORLEVEL%"=="0" goto mainEnd 79 | 80 | :fail 81 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 82 | rem the _cmd.exe /c_ return code! 83 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 84 | exit /b 1 85 | 86 | :mainEnd 87 | if "%OS%"=="Windows_NT" endlocal 88 | 89 | :omega 90 | -------------------------------------------------------------------------------- /example/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'ClustererExample' 2 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) 3 | include ':app' 4 | includeBuild('../node_modules/react-native-gradle-plugin') 5 | -------------------------------------------------------------------------------- /example/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ClustererExample", 3 | "displayName": "Clusterer Example" 4 | } 5 | -------------------------------------------------------------------------------- /example/babel.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const pak = require('../package.json'); 3 | 4 | module.exports = { 5 | presets: ['module:metro-react-native-babel-preset'], 6 | plugins: [ 7 | [ 8 | 'module-resolver', 9 | { 10 | extensions: ['.tsx', '.ts', '.js', '.json'], 11 | alias: { 12 | [pak.name]: path.join(__dirname, '..', pak.source), 13 | }, 14 | }, 15 | ], 16 | ], 17 | }; 18 | -------------------------------------------------------------------------------- /example/index.js: -------------------------------------------------------------------------------- 1 | import { AppRegistry } from 'react-native'; 2 | import App from './src/App'; 3 | import { name as appName } from './app.json'; 4 | 5 | AppRegistry.registerComponent(appName, () => App); 6 | -------------------------------------------------------------------------------- /example/ios/.xcode.env: -------------------------------------------------------------------------------- 1 | export NODE_BINARY=$(command -v node) 2 | -------------------------------------------------------------------------------- /example/ios/ClustererExample-Bridging-Header.h: -------------------------------------------------------------------------------- 1 | // 2 | // Use this file to import your target's public headers that you would like to expose to Swift. 3 | // 4 | -------------------------------------------------------------------------------- /example/ios/ClustererExample.xcodeproj/xcshareddata/xcschemes/ClustererExample.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 24 | 25 | 30 | 31 | 33 | 39 | 40 | 41 | 42 | 43 | 53 | 55 | 61 | 62 | 63 | 64 | 70 | 72 | 78 | 79 | 80 | 81 | 83 | 84 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /example/ios/ClustererExample.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /example/ios/ClustererExample.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IDEDidComputeMac32BitWarning 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /example/ios/ClustererExample/AppDelegate.h: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | @interface AppDelegate : RCTAppDelegate 5 | 6 | @end 7 | -------------------------------------------------------------------------------- /example/ios/ClustererExample/AppDelegate.mm: -------------------------------------------------------------------------------- 1 | #import "AppDelegate.h" 2 | 3 | #import 4 | 5 | @implementation AppDelegate 6 | 7 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 8 | { 9 | self.moduleName = @"ClustererExample"; 10 | // You can add your custom initial props in the dictionary below. 11 | // They will be passed down to the ViewController used by React Native. 12 | self.initialProps = @{}; 13 | 14 | return [super application:application didFinishLaunchingWithOptions:launchOptions]; 15 | } 16 | 17 | - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge 18 | { 19 | #if DEBUG 20 | return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"]; 21 | #else 22 | return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; 23 | #endif 24 | } 25 | 26 | /// This method controls whether the `concurrentRoot`feature of React18 is turned on or off. 27 | /// 28 | /// @see: https://reactjs.org/blog/2022/03/29/react-v18.html 29 | /// @note: This requires to be rendering on Fabric (i.e. on the New Architecture). 30 | /// @return: `true` if the `concurrentRoot` feature is enabled. Otherwise, it returns `false`. 31 | - (BOOL)concurrentRootEnabled 32 | { 33 | return true; 34 | } 35 | 36 | @end 37 | -------------------------------------------------------------------------------- /example/ios/ClustererExample/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "scale" : "2x", 6 | "size" : "20x20" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "scale" : "3x", 11 | "size" : "20x20" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "scale" : "2x", 16 | "size" : "29x29" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "scale" : "3x", 21 | "size" : "29x29" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "scale" : "2x", 26 | "size" : "40x40" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "scale" : "3x", 31 | "size" : "40x40" 32 | }, 33 | { 34 | "idiom" : "iphone", 35 | "scale" : "2x", 36 | "size" : "60x60" 37 | }, 38 | { 39 | "idiom" : "iphone", 40 | "scale" : "3x", 41 | "size" : "60x60" 42 | }, 43 | { 44 | "idiom" : "ios-marketing", 45 | "scale" : "1x", 46 | "size" : "1024x1024" 47 | } 48 | ], 49 | "info" : { 50 | "author" : "xcode", 51 | "version" : 1 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /example/ios/ClustererExample/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /example/ios/ClustererExample/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | ClustererExample 9 | CFBundleExecutable 10 | $(EXECUTABLE_NAME) 11 | CFBundleIdentifier 12 | $(PRODUCT_BUNDLE_IDENTIFIER) 13 | CFBundleInfoDictionaryVersion 14 | 6.0 15 | CFBundleName 16 | $(PRODUCT_NAME) 17 | CFBundlePackageType 18 | APPL 19 | CFBundleShortVersionString 20 | $(MARKETING_VERSION) 21 | CFBundleSignature 22 | ???? 23 | CFBundleVersion 24 | $(CURRENT_PROJECT_VERSION) 25 | LSRequiresIPhoneOS 26 | 27 | NSAppTransportSecurity 28 | 29 | NSExceptionDomains 30 | 31 | localhost 32 | 33 | NSExceptionAllowsInsecureHTTPLoads 34 | 35 | 36 | 37 | 38 | NSLocationWhenInUseUsageDescription 39 | 40 | UILaunchStoryboardName 41 | LaunchScreen 42 | UIRequiredDeviceCapabilities 43 | 44 | armv7 45 | 46 | UISupportedInterfaceOrientations 47 | 48 | UIInterfaceOrientationPortrait 49 | UIInterfaceOrientationLandscapeLeft 50 | UIInterfaceOrientationLandscapeRight 51 | 52 | UIViewControllerBasedStatusBarAppearance 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /example/ios/ClustererExample/LaunchScreen.storyboard: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 24 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /example/ios/ClustererExample/main.m: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | #import "AppDelegate.h" 4 | 5 | int main(int argc, char *argv[]) 6 | { 7 | @autoreleasepool { 8 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /example/ios/ClustererExampleTests/ClustererExampleTests.m: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | #import 5 | #import 6 | 7 | #define TIMEOUT_SECONDS 600 8 | #define TEXT_TO_LOOK_FOR @"Welcome to React" 9 | 10 | @interface ClustererExampleTests : XCTestCase 11 | 12 | @end 13 | 14 | @implementation ClustererExampleTests 15 | 16 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL (^)(UIView *view))test 17 | { 18 | if (test(view)) { 19 | return YES; 20 | } 21 | for (UIView *subview in [view subviews]) { 22 | if ([self findSubviewInView:subview matching:test]) { 23 | return YES; 24 | } 25 | } 26 | return NO; 27 | } 28 | 29 | - (void)testRendersWelcomeScreen 30 | { 31 | UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController]; 32 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS]; 33 | BOOL foundElement = NO; 34 | 35 | __block NSString *redboxError = nil; 36 | #ifdef DEBUG 37 | RCTSetLogFunction( 38 | ^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { 39 | if (level >= RCTLogLevelError) { 40 | redboxError = message; 41 | } 42 | }); 43 | #endif 44 | 45 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 46 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 47 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 48 | 49 | foundElement = [self findSubviewInView:vc.view 50 | matching:^BOOL(UIView *view) { 51 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 52 | return YES; 53 | } 54 | return NO; 55 | }]; 56 | } 57 | 58 | #ifdef DEBUG 59 | RCTSetLogFunction(RCTDefaultLogFunction); 60 | #endif 61 | 62 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 63 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 64 | } 65 | 66 | @end 67 | -------------------------------------------------------------------------------- /example/ios/ClustererExampleTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | $(PRODUCT_BUNDLE_IDENTIFIER) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /example/ios/File.swift: -------------------------------------------------------------------------------- 1 | // 2 | // File.swift 3 | // ClustererExample 4 | // 5 | 6 | import Foundation 7 | -------------------------------------------------------------------------------- /example/ios/Podfile: -------------------------------------------------------------------------------- 1 | ENV['RCT_NEW_ARCH_ENABLED'] = '0' 2 | 3 | require_relative '../node_modules/react-native/scripts/react_native_pods' 4 | require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules' 5 | 6 | platform :ios, min_ios_version_supported 7 | prepare_react_native_project! 8 | 9 | # If you are using a `react-native-flipper` your iOS build will fail when `NO_FLIPPER=1` is set. 10 | # because `react-native-flipper` depends on (FlipperKit,...) that will be excluded 11 | # 12 | # To fix this you can also exclude `react-native-flipper` using a `react-native.config.js` 13 | # ```js 14 | # module.exports = { 15 | # dependencies: { 16 | # ...(process.env.NO_FLIPPER ? { 'react-native-flipper': { platforms: { ios: null } } } : {}), 17 | # ``` 18 | flipper_config = ENV['NO_FLIPPER'] == "1" ? FlipperConfiguration.disabled : FlipperConfiguration.enabled 19 | 20 | linkage = ENV['USE_FRAMEWORKS'] 21 | if linkage != nil 22 | Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green 23 | use_frameworks! :linkage => linkage.to_sym 24 | end 25 | 26 | target 'ClustererExample' do 27 | config = use_native_modules! 28 | 29 | # Flags change depending on the env values. 30 | flags = get_default_flags() 31 | 32 | use_react_native!( 33 | :path => config[:reactNativePath], 34 | # Hermes is now enabled by default. Disable by setting this flag to false. 35 | # Upcoming versions of React Native may rely on get_default_flags(), but 36 | # we make it explicit here to aid in the React Native upgrade process. 37 | :hermes_enabled => flags[:hermes_enabled], 38 | :fabric_enabled => flags[:fabric_enabled], 39 | # Enables Flipper. 40 | # 41 | # Note that if you have use_frameworks! enabled, Flipper will not work and 42 | # you should disable the next line. 43 | :flipper_configuration => flipper_config, 44 | # An absolute path to your application root. 45 | :app_path => "#{Pod::Config.instance.installation_root}/.." 46 | ) 47 | 48 | target 'ClustererExampleTests' do 49 | inherit! :complete 50 | # Pods for testing 51 | end 52 | 53 | post_install do |installer| 54 | react_native_post_install( 55 | installer, 56 | # Set `mac_catalyst_enabled` to `true` in order to apply patches 57 | # necessary for Mac Catalyst builds 58 | :mac_catalyst_enabled => false 59 | ) 60 | __apply_Xcode_12_5_M1_post_install_workaround(installer) 61 | end 62 | end 63 | -------------------------------------------------------------------------------- /example/ios/_xcode.env: -------------------------------------------------------------------------------- 1 | # This `.xcode.env` file is versioned and is used to source the environment 2 | # used when running script phases inside Xcode. 3 | # To customize your local environment, you can create an `.xcode.env.local` 4 | # file that is not versioned. 5 | 6 | # NODE_BINARY variable contains the PATH to the node executable. 7 | # 8 | # Customize the NODE_BINARY variable here. 9 | # For example, to use nvm with brew, add the following line 10 | # . "$(brew --prefix nvm)/nvm.sh" --no-use 11 | export NODE_BINARY=$(command -v node) 12 | -------------------------------------------------------------------------------- /example/metro.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const escape = require('escape-string-regexp'); 3 | const exclusionList = require('metro-config/src/defaults/exclusionList'); 4 | const pak = require('../package.json'); 5 | 6 | const root = path.resolve(__dirname, '..'); 7 | 8 | const modules = Object.keys({ 9 | ...pak.peerDependencies, 10 | }); 11 | 12 | module.exports = { 13 | projectRoot: __dirname, 14 | watchFolders: [root], 15 | 16 | // We need to make sure that only one version is loaded for peerDependencies 17 | // So we block them at the root, and alias them to the versions in example's node_modules 18 | resolver: { 19 | blacklistRE: exclusionList( 20 | modules.map( 21 | (m) => 22 | new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`) 23 | ) 24 | ), 25 | 26 | extraNodeModules: modules.reduce((acc, name) => { 27 | acc[name] = path.join(__dirname, 'node_modules', name); 28 | return acc; 29 | }, {}), 30 | }, 31 | 32 | transformer: { 33 | getTransformOptions: async () => ({ 34 | transform: { 35 | experimentalImportSupport: false, 36 | inlineRequires: true, 37 | }, 38 | }), 39 | }, 40 | }; 41 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-clusterer-example", 3 | "description": "Example app for react-native-clusterer", 4 | "version": "0.0.1", 5 | "private": true, 6 | "scripts": { 7 | "android": "react-native run-android", 8 | "ios": "react-native run-ios", 9 | "start": "react-native start", 10 | "pods": "pod-install --quiet" 11 | }, 12 | "dependencies": { 13 | "@types/supercluster": "^7.1.3", 14 | "react": "18.2.0", 15 | "react-native": "0.71.3", 16 | "react-native-maps": "^1.4.0", 17 | "supercluster": "^8.0.1" 18 | }, 19 | "devDependencies": { 20 | "@babel/core": "^7.20.0", 21 | "@babel/preset-env": "^7.20.0", 22 | "@babel/runtime": "^7.20.0", 23 | "babel-plugin-module-resolver": "^4.1.0", 24 | "metro-react-native-babel-preset": "0.73.7" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /example/react-native.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const pak = require('../package.json'); 3 | 4 | module.exports = { 5 | dependencies: { 6 | [pak.name]: { 7 | root: path.join(__dirname, '..'), 8 | }, 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /example/src/App.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react-native/no-inline-styles */ 2 | import React, { useState } from 'react'; 3 | import { 4 | StyleSheet, 5 | View, 6 | Text, 7 | TouchableOpacity, 8 | SafeAreaView, 9 | } from 'react-native'; 10 | import { Map } from './Map'; 11 | import { Comparison } from './Comparison'; 12 | import { Tests } from './Tests'; 13 | 14 | export default function App() { 15 | const [showType, setType] = useState(null); 16 | 17 | return ( 18 | 19 | Clusterer 20 | 21 | setType('map')} 28 | > 29 | 🗺️ Map Clustering 30 | 31 | setType('speed')} 38 | > 39 | ⚡ Speed Comparison 40 | 41 | setType('test')} 48 | > 49 | 🧪 Tests 50 | 51 | 52 | {showType === 'map' && } 53 | {showType === 'speed' && } 54 | {showType === 'test' && } 55 | 56 | ); 57 | } 58 | 59 | const styles = StyleSheet.create({ 60 | container: { 61 | flex: 1, 62 | backgroundColor: '#fff', 63 | }, 64 | header: { 65 | fontSize: 22, 66 | fontWeight: 'bold', 67 | marginHorizontal: 10, 68 | marginBottom: 5, 69 | }, 70 | buttonContainer: { 71 | flexDirection: 'row', 72 | marginBottom: 10, 73 | marginHorizontal: 10, 74 | gap: 10, 75 | }, 76 | button: { 77 | flex: 1, 78 | borderRadius: 5, 79 | justifyContent: 'center', 80 | alignItems: 'center', 81 | height: 40, 82 | borderWidth: 2, 83 | }, 84 | }); 85 | -------------------------------------------------------------------------------- /example/src/Comparison.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react-native/no-inline-styles */ 2 | import React, { useState, FunctionComponent } from 'react'; 3 | import { 4 | StyleSheet, 5 | View, 6 | Text, 7 | TouchableOpacity, 8 | TextInput, 9 | } from 'react-native'; 10 | import { getRandomData, parsedPlacesData } from './places'; 11 | import { GetTile } from './GetTile'; 12 | import { GetClusters } from './GetClusters'; 13 | 14 | const DEFAULT_SIZE = '1000'; 15 | 16 | export const Comparison: FunctionComponent<{}> = () => { 17 | const [data, setData] = useState[]>( 18 | getRandomData(DEFAULT_SIZE) 19 | ); 20 | const [dataSizeInput, setDataSizeInput] = useState(DEFAULT_SIZE); 21 | const [showType, setType] = useState(null); 22 | 23 | const _handleDefaultDataPress = () => { 24 | setData(parsedPlacesData); 25 | }; 26 | 27 | const _handleGenerateDataPress = () => { 28 | setData(getRandomData(dataSizeInput)); 29 | }; 30 | 31 | return ( 32 | 33 | Input Data 34 | 35 | 39 | Use supercluster.js test data 40 | 41 | Or generate random points 42 | 43 | setDataSizeInput(t as any)} 47 | keyboardType={'number-pad'} 48 | value={`${dataSizeInput}`} 49 | multiline={false} 50 | /> 51 | 55 | Generate 56 | 57 | 58 | Data size: {data.length} 59 | 60 | setType('tile')} 68 | > 69 | getTile 70 | 71 | setType('cluster')} 78 | > 79 | getClusters 80 | 81 | 82 | 83 | {showType === 'tile' && } 84 | {showType === 'cluster' && } 85 | 86 | ); 87 | }; 88 | 89 | const styles = StyleSheet.create({ 90 | container: { 91 | flex: 1, 92 | marginHorizontal: 10, 93 | gap: 10 94 | }, 95 | h2: { 96 | fontSize: 16, 97 | fontWeight: 'bold', 98 | marginTop: 10, 99 | }, 100 | buttonContainer: { 101 | position: 'absolute', 102 | bottom: 20, 103 | left: 0, 104 | right: 0, 105 | flexDirection: 'row', 106 | justifyContent: 'space-around', 107 | width: '100%', 108 | }, 109 | defaultDataButton: { 110 | borderRadius: 5, 111 | justifyContent: 'center', 112 | alignItems: 'center', 113 | height: 40, 114 | backgroundColor: '#8eb3ed', 115 | }, 116 | button: { 117 | flex: 1, 118 | borderRadius: 5, 119 | justifyContent: 'center', 120 | alignItems: 'center', 121 | height: 40, 122 | backgroundColor: '#8eb3ed', 123 | }, 124 | inputContainer: { 125 | flexDirection: 'row', 126 | }, 127 | input: { 128 | flex: 1, 129 | borderWidth: 1, 130 | borderRadius: 5, 131 | borderColor: '#8eb3ed', 132 | height: 40, 133 | }, 134 | type: { 135 | flex: 1, 136 | borderRadius: 5, 137 | justifyContent: 'center', 138 | alignItems: 'center', 139 | height: 40, 140 | borderWidth: 2, 141 | }, 142 | }); 143 | -------------------------------------------------------------------------------- /example/src/GetClusters.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react-native/no-inline-styles */ 2 | import React, { FunctionComponent, useState } from 'react'; 3 | import { 4 | StyleSheet, 5 | SafeAreaView, 6 | View, 7 | Text, 8 | ScrollView, 9 | TextInput, 10 | Platform, 11 | TouchableOpacity, 12 | } from 'react-native'; 13 | import { PerformanceNow, superclusterOptions, timeDelta } from './utils'; 14 | import Supercluster from 'react-native-clusterer'; 15 | import SuperclusterJS from 'supercluster'; 16 | 17 | type BBox = [number, number, number, number]; 18 | interface Props { 19 | data: supercluster.PointFeature[]; 20 | } 21 | 22 | const GetClusters: FunctionComponent = ({ data }) => { 23 | const [westLng, setWestLng] = useState('-180'); 24 | const [southLat, setSouthLat] = useState('-90'); 25 | const [eastLng, setEastLng] = useState('180'); 26 | const [northLat, setNorthLat] = useState('90'); 27 | const [zoom, setZoom] = useState('1'); 28 | 29 | const zoomInt = parseInt(zoom); 30 | const bbox = [westLng, southLat, eastLng, northLat].map(parseFloat) as BBox; 31 | 32 | const [time, setTime] = useState(['0', '0']); 33 | const [result, setResult] = useState(''); 34 | 35 | const _handleRunJS = () => { 36 | if (bbox.some(isNaN)) return console.warn('Invalid input', bbox); 37 | if (isNaN(zoomInt)) return console.warn('Invalid input', zoomInt); 38 | 39 | const start = PerformanceNow(); 40 | const superclusterJS = new SuperclusterJS(superclusterOptions); 41 | superclusterJS.load(data); 42 | const end = PerformanceNow(); 43 | 44 | const getTileS = PerformanceNow(); 45 | const clusterRes = superclusterJS.getClusters(bbox, zoomInt); 46 | const getTileE = PerformanceNow(); 47 | 48 | setResult(JSON.stringify(clusterRes)); 49 | setTime([timeDelta(start, end), timeDelta(getTileS, getTileE)]); 50 | }; 51 | 52 | const _handleRunCPP = () => { 53 | if (bbox.some(isNaN)) return console.warn('Invalid input', bbox); 54 | if (isNaN(zoomInt)) return console.warn('Invalid input', zoomInt); 55 | 56 | const start = PerformanceNow(); 57 | const supercluster = new Supercluster(superclusterOptions); 58 | supercluster.load(data); 59 | const end = PerformanceNow(); 60 | 61 | const getTileS = PerformanceNow(); 62 | const clusterRes = supercluster.getClusters(bbox, zoomInt); 63 | 64 | const getTileE = PerformanceNow(); 65 | 66 | setResult(JSON.stringify(clusterRes)); 67 | setTime([timeDelta(start, end), timeDelta(getTileS, getTileE)]); 68 | }; 69 | 70 | return ( 71 | 72 | 73 | westLng 74 | southLat 75 | eastLng 76 | northLat 77 | zoom 78 | 79 | 80 | 88 | 96 | 104 | 112 | 120 | 121 | 122 | 123 | 127 | JS Impementation 128 | 129 | 130 | C++ Impementation 131 | 132 | 133 | 134 | Initialization time: {time[0]} ms 135 | Get clusters time: {time[1]} ms 136 | Result: 137 | 138 | {result} 139 | 140 | 141 | ); 142 | }; 143 | 144 | const styles = StyleSheet.create({ 145 | container: { 146 | paddingTop: 20, 147 | }, 148 | scrollView: { 149 | height: 300, 150 | }, 151 | h2: { 152 | fontSize: 14, 153 | fontWeight: 'bold', 154 | }, 155 | rowContainer: { 156 | flexDirection: 'row', 157 | width: '100%', 158 | }, 159 | flex: { 160 | flex: 1, 161 | textAlign: 'center', 162 | }, 163 | flexInput: { 164 | flex: 1, 165 | textAlign: 'center', 166 | borderWidth: 1, 167 | borderRadius: 5, 168 | borderColor: '#eda78e', 169 | height: 35, 170 | paddingBottom: Platform.OS === 'android' ? 7 : undefined, 171 | marginHorizontal: 5, 172 | }, 173 | buttonContainer: { 174 | flexDirection: 'row', 175 | }, 176 | button: { 177 | flex: 1, 178 | borderRadius: 5, 179 | justifyContent: 'center', 180 | alignItems: 'center', 181 | height: 40, 182 | marginVertical: 10, 183 | backgroundColor: '#eda78e', 184 | }, 185 | }); 186 | 187 | export { GetClusters }; 188 | -------------------------------------------------------------------------------- /example/src/GetTile.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react-native/no-inline-styles */ 2 | import React, { FunctionComponent, useState } from 'react'; 3 | import { 4 | StyleSheet, 5 | SafeAreaView, 6 | View, 7 | Text, 8 | ScrollView, 9 | TextInput, 10 | Platform, 11 | TouchableOpacity, 12 | } from 'react-native'; 13 | import { PerformanceNow, superclusterOptions, timeDelta } from './utils'; 14 | import Supercluster from 'react-native-clusterer'; 15 | import SuperclusterJS from 'supercluster'; 16 | 17 | interface Props { 18 | data: supercluster.PointFeature[]; 19 | } 20 | 21 | const GetTile: FunctionComponent = ({ data }) => { 22 | const [x, setX] = useState('0'); 23 | const [y, setY] = useState('0'); 24 | const [z, setZ] = useState('0'); 25 | 26 | const xInt = parseInt(x); 27 | const yInt = parseInt(y); 28 | const zInt = parseInt(z); 29 | 30 | const [time, setTime] = useState(['0', '0']); 31 | const [result, setResult] = useState(''); 32 | 33 | const _handleRunJS = () => { 34 | if (isNaN(xInt) || isNaN(yInt) || isNaN(zInt)) 35 | return console.warn('Invalid input', xInt, yInt, zInt); 36 | 37 | const start = PerformanceNow(); 38 | const superclusterJS = new SuperclusterJS(superclusterOptions); 39 | superclusterJS.load(data); 40 | const end = PerformanceNow(); 41 | 42 | const getTileS = PerformanceNow(); 43 | const tileRes = superclusterJS.getTile(xInt, yInt, zInt); 44 | const getTileE = PerformanceNow(); 45 | 46 | setResult(JSON.stringify(tileRes)); 47 | setTime([timeDelta(start, end), timeDelta(getTileS, getTileE)]); 48 | }; 49 | 50 | const _handleRunCPP = () => { 51 | if (isNaN(xInt) || isNaN(yInt) || isNaN(zInt)) 52 | return console.warn('Invalid input', xInt, yInt, zInt); 53 | 54 | const start = PerformanceNow(); 55 | const supercluster = new Supercluster(superclusterOptions); 56 | supercluster.load(data); 57 | const end = PerformanceNow(); 58 | 59 | const getTileS = PerformanceNow(); 60 | const tileRes = supercluster.getTile(xInt, yInt, zInt); 61 | const getTileE = PerformanceNow(); 62 | 63 | setResult(JSON.stringify(tileRes)); 64 | setTime([timeDelta(start, end), timeDelta(getTileS, getTileE)]); 65 | }; 66 | 67 | return ( 68 | 69 | 70 | x 71 | y 72 | z 73 | 74 | 75 | 83 | 91 | 99 | 100 | 101 | 102 | 106 | JS Impementation 107 | 108 | 109 | C++ Impementation 110 | 111 | 112 | 113 | Initialization time: {time[0]} ms 114 | Get tile time: {time[1]} ms 115 | Result: 116 | 117 | {result} 118 | 119 | 120 | ); 121 | }; 122 | 123 | const styles = StyleSheet.create({ 124 | container: { 125 | paddingTop: 20, 126 | }, 127 | scrollView: { 128 | marginBottom: 10, 129 | height: 300, 130 | }, 131 | h2: { 132 | fontSize: 14, 133 | fontWeight: 'bold', 134 | }, 135 | rowContainer: { 136 | flexDirection: 'row', 137 | width: '100%', 138 | }, 139 | flex: { 140 | flex: 1, 141 | textAlign: 'center', 142 | }, 143 | flexInput: { 144 | flex: 1, 145 | textAlign: 'center', 146 | borderWidth: 1, 147 | borderRadius: 5, 148 | borderColor: '#9c8eed', 149 | height: 35, 150 | paddingBottom: Platform.OS === 'android' ? 7 : undefined, 151 | marginHorizontal: 5, 152 | }, 153 | buttonContainer: { 154 | flexDirection: 'row', 155 | }, 156 | button: { 157 | flex: 1, 158 | borderRadius: 5, 159 | justifyContent: 'center', 160 | alignItems: 'center', 161 | height: 40, 162 | marginVertical: 10, 163 | backgroundColor: '#9c8eed', 164 | }, 165 | }); 166 | 167 | export { GetTile }; 168 | -------------------------------------------------------------------------------- /example/src/Map.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useRef } from 'react'; 2 | import { Dimensions, StyleSheet, View } from 'react-native'; 3 | import { Clusterer, isPointCluster } from 'react-native-clusterer'; 4 | import MapView, { Region } from 'react-native-maps'; 5 | import { initialRegion, parsedPlacesData } from './places'; 6 | import { Point } from './Point'; 7 | 8 | import type { supercluster } from 'react-native-clusterer'; 9 | 10 | type IFeature = supercluster.PointOrClusterFeature; 11 | 12 | const MAP_WIDTH = Dimensions.get('window').width; 13 | const MAP_HEIGHT = Dimensions.get('window').height - 80; 14 | const MAP_DIMENSIONS = { width: MAP_WIDTH, height: MAP_HEIGHT }; 15 | 16 | export const Map = () => { 17 | const [region, setRegion] = useState(initialRegion); 18 | const mapRef = useRef(null); 19 | 20 | const _handlePointPress = (point: IFeature) => { 21 | if (isPointCluster(point)) { 22 | const toRegion = point.properties.getExpansionRegion(); 23 | mapRef.current?.animateToRegion(toRegion, 500); 24 | } 25 | }; 26 | 27 | return ( 28 | 29 | 35 | { 41 | return ( 42 | 51 | ); 52 | }} 53 | /> 54 | 55 | 56 | ); 57 | }; 58 | 59 | const styles = StyleSheet.create({ 60 | container: { 61 | flex: 1, 62 | }, 63 | }); 64 | -------------------------------------------------------------------------------- /example/src/Point.tsx: -------------------------------------------------------------------------------- 1 | import React, { FunctionComponent, memo } from 'react'; 2 | import { Text, StyleSheet, View } from 'react-native'; 3 | import { Marker as MapsMarker, Callout } from 'react-native-maps'; 4 | 5 | import type { supercluster } from 'react-native-clusterer'; 6 | 7 | type IFeature = supercluster.PointOrClusterFeature; 8 | 9 | interface Props { 10 | item: IFeature; 11 | onPress: (item: IFeature) => void; 12 | } 13 | 14 | export const Point: FunctionComponent = memo( 15 | ({ item, onPress }) => { 16 | return ( 17 | onPress(item)} 25 | > 26 | {item.properties?.cluster ? ( 27 | // Render Cluster 28 | 29 | 30 | {item.properties.point_count} 31 | 32 | 33 | ) : ( 34 | // Else, use default behavior to render 35 | // a marker and add a callout to it 36 | 37 | 38 | {JSON.stringify(item.properties)} 39 | 40 | 41 | )} 42 | 43 | ); 44 | }, 45 | (prevProps, nextProps) => 46 | prevProps.item.properties?.cluster_id === 47 | nextProps.item.properties?.cluster_id && 48 | prevProps.item.properties?.id === nextProps.item.properties?.id && 49 | prevProps.item.properties?.point_count === 50 | nextProps.item.properties?.point_count && 51 | prevProps.item.properties?.onItemPress === 52 | nextProps.item.properties?.onItemPress && 53 | prevProps.item.properties?.getExpansionRegion === 54 | nextProps.item.properties?.getExpansionRegion 55 | ); 56 | 57 | const styles = StyleSheet.create({ 58 | calloutContainer: { 59 | width: 200, 60 | height: 200, 61 | backgroundColor: '#fff', 62 | borderRadius: 5, 63 | padding: 10, 64 | }, 65 | clusterMarker: { 66 | width: 40, 67 | height: 40, 68 | borderRadius: 20, 69 | backgroundColor: '#8eb3ed', 70 | justifyContent: 'center', 71 | alignItems: 'center', 72 | }, 73 | clusterMarkerText: { 74 | color: '#fff', 75 | fontSize: 16, 76 | }, 77 | }); 78 | -------------------------------------------------------------------------------- /example/src/Tests.tsx: -------------------------------------------------------------------------------- 1 | import React, { FunctionComponent } from 'react'; 2 | import { StyleSheet, View, Text } from 'react-native'; 3 | 4 | import Supercluster from 'react-native-clusterer'; 5 | import { places, placesTile, placesTileMin5 } from './test/fixtures'; 6 | import { deepEqualWithoutIds } from './utils'; 7 | 8 | export const Tests: FunctionComponent<{}> = () => { 9 | const generatesClustersProperly = () => { 10 | const index = new Supercluster().load(places.features); 11 | const tile = index.getTile(0, 0, 0); 12 | return deepEqualWithoutIds(tile, placesTile); 13 | }; 14 | 15 | const supportsMinPointsOption = () => { 16 | const index = new Supercluster({ minPoints: 5 }).load(places.features); 17 | const tile = index.getTile(0, 0, 0); 18 | return deepEqualWithoutIds(tile?.features, placesTileMin5.features); 19 | }; 20 | 21 | const returnChildrenOfACluster = () => { 22 | const index = new Supercluster().load(places.features); 23 | const childCounts = index 24 | .getChildren(1) 25 | .map((p) => p.properties.point_count || 1); 26 | return deepEqualWithoutIds(childCounts, [6, 7, 2, 1]); 27 | }; 28 | 29 | const returnLeavesOfACluster = () => { 30 | const index = new Supercluster().load(places.features); 31 | const leafNames = index.getLeaves(1, 10, 5).map((p) => p.properties.name); 32 | return deepEqualWithoutIds(leafNames, [ 33 | 'Niagara Falls', 34 | 'Cape San Blas', 35 | 'Cape Sable', 36 | 'Cape Canaveral', 37 | 'San Salvador', 38 | 'Cabo Gracias a Dios', 39 | 'I. de Cozumel', 40 | 'Grand Cayman', 41 | 'Miquelon', 42 | 'Cape Bauld', 43 | ]); 44 | }; 45 | 46 | const generatesUniqueIdsWithGenerateIdOption = () => { 47 | const index = new Supercluster({ generateId: true }).load(places.features); 48 | const ids = index 49 | .getTile(0, 0, 0)! 50 | .features.filter((f) => !f.tags.cluster) 51 | .map((f) => (f as any).id); 52 | return deepEqualWithoutIds( 53 | ids, 54 | [12, 20, 21, 22, 24, 28, 30, 62, 81, 118, 119, 125, 81, 118] 55 | ); 56 | }; 57 | 58 | const getLeavesHandlesNullPropertyFeatures = () => { 59 | const index = new Supercluster({ radius: 1 }).load([ 60 | { 61 | type: 'Feature', 62 | properties: null as any, 63 | geometry: { 64 | type: 'Point', 65 | coordinates: [-79.04411780507252, 43.08771393436908], 66 | }, 67 | }, 68 | { 69 | type: 'Feature', 70 | properties: null as any, 71 | geometry: { 72 | type: 'Point', 73 | coordinates: [-79.04511780507252, 43.08781393436908], 74 | }, 75 | }, 76 | ]); 77 | const leaves = index.getLeaves(1, Infinity, 0); 78 | return leaves[0].properties === null; 79 | }; 80 | 81 | const returnsClusterExpansionZoom = () => { 82 | const index = new Supercluster().load(places.features); 83 | 84 | return ( 85 | index.getClusterExpansionZoom(2) == 2 && 86 | index.getClusterExpansionZoom(2978) == 3 && 87 | index.getClusterExpansionZoom(516) == 5 && 88 | index.getClusterExpansionZoom(3014) == 6 89 | ); 90 | }; 91 | 92 | const returnsClusterExpansionZoomForMaxZoom = () => { 93 | const index = new Supercluster({ 94 | radius: 60, 95 | extent: 256, 96 | maxZoom: 4, 97 | }).load(places.features); 98 | 99 | return index.getClusterExpansionZoom(2341) === 5; 100 | }; 101 | 102 | const returnsClustersWhenQueryCrossesInternationalDateline = () => { 103 | const index = new Supercluster().load([ 104 | { 105 | type: 'Feature', 106 | properties: {}, 107 | geometry: { 108 | type: 'Point', 109 | coordinates: [-178.989, 0], 110 | }, 111 | }, 112 | { 113 | type: 'Feature', 114 | properties: {}, 115 | geometry: { 116 | type: 'Point', 117 | coordinates: [-178.99, 0], 118 | }, 119 | }, 120 | { 121 | type: 'Feature', 122 | properties: {}, 123 | geometry: { 124 | type: 'Point', 125 | coordinates: [-178.991, 0], 126 | }, 127 | }, 128 | { 129 | type: 'Feature', 130 | properties: {}, 131 | geometry: { 132 | type: 'Point', 133 | coordinates: [-178.992, 0], 134 | }, 135 | }, 136 | ]); 137 | 138 | const nonCrossing = index.getClusters([-179, -10, -177, 10], 1); 139 | const crossing = index.getClusters([179, -10, -177, 10], 1); 140 | 141 | return ( 142 | nonCrossing.length > 0 && 143 | crossing.length > 0 && 144 | nonCrossing.length === crossing.length 145 | ); 146 | }; 147 | 148 | const doesNotCrashOnWeirdBboxValues = () => { 149 | const index = new Supercluster().load(places.features); 150 | return ( 151 | index.getClusters([129.42639, -103.720017, -445.930843, 114.518236], 1) 152 | .length === 26 && 153 | index.getClusters([112.207836, -84.578666, -463.149397, 120.169159], 1) 154 | .length === 27 && 155 | index.getClusters([129.886277, -82.33268, -445.470956, 120.39093], 1) 156 | .length === 26 && 157 | index.getClusters([458.220043, -84.239039, -117.13719, 120.206585], 1) 158 | .length === 25 && 159 | index.getClusters([456.713058, -80.354196, -118.644175, 120.539148], 1) 160 | .length === 25 && 161 | index.getClusters([453.105328, -75.857422, -122.251904, 120.73276], 1) 162 | .length === 25 && 163 | index.getClusters([-180, -90, 180, 90], 1).length === 61 164 | ); 165 | }; 166 | 167 | const doesNotCrashOnNonIntegerZoomValues = () => { 168 | const index = new Supercluster().load(places.features); 169 | return ( 170 | typeof index.getClusters([179, -10, -177, 10], 1.25).length === 'number' 171 | ); 172 | }; 173 | 174 | const makeSureSameLocationPointsAreClustered = () => { 175 | const index = new Supercluster({ 176 | maxZoom: 20, 177 | extent: 8192, 178 | radius: 16, 179 | }).load([ 180 | { 181 | type: 'Feature', 182 | geometry: { type: 'Point', coordinates: [-1.426798, 53.943034] }, 183 | properties: {}, 184 | }, 185 | { 186 | type: 'Feature', 187 | geometry: { type: 'Point', coordinates: [-1.426798, 53.943034] }, 188 | properties: {}, 189 | }, 190 | ]); 191 | const clusters = index.getClusters([-180, -85, 180, 85], 1); 192 | return clusters[0].properties.point_count === 2; 193 | }; 194 | 195 | const makesSureUnclusteredPointCoordsAreNotRounded = () => { 196 | const index = new Supercluster({ maxZoom: 19 }).load([ 197 | { 198 | type: 'Feature', 199 | geometry: { 200 | type: 'Point', 201 | coordinates: [173.19150559062456, -41.340357424709275], 202 | }, 203 | properties: {}, 204 | }, 205 | ]); 206 | 207 | return deepEqualWithoutIds( 208 | index.getTile(20, 1028744, 656754)!.features[0].geometry[0], 209 | [421, 281] 210 | ); 211 | }; 212 | 213 | const doesNotThrowOnZeroItems = () => { 214 | const index = new Supercluster().load([]); 215 | return deepEqualWithoutIds(index.getClusters([-180, -85, 180, 85], 0), []); 216 | }; 217 | 218 | return ( 219 | 220 | 221 | generates clusters properly {generatesClustersProperly() ? '✅' : '❌'} 222 | 223 | 224 | supports minPoints option {supportsMinPointsOption() ? '✅' : '❌'} 225 | 226 | 227 | return children of a cluster {returnChildrenOfACluster() ? '✅' : '❌'} 228 | 229 | 230 | return leaves of a cluster {returnLeavesOfACluster() ? '✅' : '❌'} 231 | 232 | 233 | generates unique ids with generateId option{' '} 234 | {generatesUniqueIdsWithGenerateIdOption() ? '✅' : '❌'} 235 | 236 | 237 | getLeaves handles null property features{' '} 238 | {getLeavesHandlesNullPropertyFeatures() ? '✅' : '❌'} 239 | 240 | 241 | returns cluster expansion zoom{' '} 242 | {returnsClusterExpansionZoom() ? '✅' : '❌'} 243 | 244 | 245 | returns cluster expansion zoom for maxZoom{' '} 246 | {returnsClusterExpansionZoomForMaxZoom() ? '✅' : '❌'} 247 | 248 | 249 | returns clusters when query crosses international dateline{' '} 250 | {returnsClustersWhenQueryCrossesInternationalDateline() ? '✅' : '❌'} 251 | 252 | 253 | does not crash on weird bbox values{' '} 254 | {doesNotCrashOnWeirdBboxValues() ? '✅' : '❌'} 255 | 256 | 257 | does not crash on non-integer zoom values{' '} 258 | {doesNotCrashOnNonIntegerZoomValues() ? '✅' : '❌'} 259 | 260 | 261 | make sure same location points are clustered{' '} 262 | {makeSureSameLocationPointsAreClustered() ? '✅' : '❌'} 263 | 264 | 265 | makes sure unclustered point coords are not rounded{' '} 266 | {makesSureUnclusteredPointCoordsAreNotRounded() ? '✅' : '❌'} 267 | 268 | 269 | does not throw on zero items {doesNotThrowOnZeroItems() ? '✅' : '❌'} 270 | 271 | 272 | ); 273 | }; 274 | 275 | const styles = StyleSheet.create({ 276 | container: { 277 | flex: 1, 278 | marginTop: 10, 279 | marginHorizontal: 10, 280 | gap: 20, 281 | }, 282 | h2: { 283 | fontSize: 16, 284 | fontWeight: 'bold', 285 | }, 286 | buttonContainer: { 287 | position: 'absolute', 288 | bottom: 20, 289 | left: 0, 290 | right: 0, 291 | flexDirection: 'row', 292 | justifyContent: 'space-around', 293 | width: '100%', 294 | }, 295 | defaultDataButton: { 296 | marginVertical: 5, 297 | borderRadius: 5, 298 | justifyContent: 'center', 299 | alignItems: 'center', 300 | height: 40, 301 | backgroundColor: '#8eb3ed', 302 | }, 303 | button: { 304 | flex: 1, 305 | borderRadius: 5, 306 | justifyContent: 'center', 307 | alignItems: 'center', 308 | height: 40, 309 | backgroundColor: '#8eb3ed', 310 | }, 311 | inputContainer: { 312 | flexDirection: 'row', 313 | marginBottom: 10, 314 | }, 315 | input: { 316 | flex: 1, 317 | borderWidth: 1, 318 | borderRadius: 5, 319 | borderColor: '#8eb3ed', 320 | height: 40, 321 | }, 322 | type: { 323 | flex: 1, 324 | borderRadius: 5, 325 | justifyContent: 'center', 326 | alignItems: 'center', 327 | height: 40, 328 | borderWidth: 2, 329 | marginTop: 20, 330 | }, 331 | }); 332 | -------------------------------------------------------------------------------- /example/src/places.ts: -------------------------------------------------------------------------------- 1 | import { places } from './test/fixtures'; 2 | 3 | export const initialRegion = { 4 | latitude: 17.150642213990213, 5 | latitudeDelta: 102.40413819692193, 6 | longitude: -90.13384625315666, 7 | longitudeDelta: 72.32146382331848, 8 | }; 9 | 10 | export const parsedPlacesData = places.features.map((f, i) => ({ 11 | ...f, 12 | properties: { ...f.properties, id: i }, 13 | })); 14 | 15 | export const getRandomNum = (min: number, max: number) => { 16 | return Math.floor(Math.random() * (max - min + 1)) + min; 17 | }; 18 | 19 | export const getRandomData = (size: number | string) => { 20 | return Array.from({ length: parseInt(`${size}`) }, (_, i) => { 21 | return { 22 | type: 'Feature' as const, 23 | geometry: { 24 | type: 'Point' as const, 25 | coordinates: [getRandomNum(-180, 180), getRandomNum(-90, 90)], 26 | }, 27 | properties: { 28 | id: `point-${i}`, 29 | }, 30 | }; 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /example/src/test/fixtures/index.ts: -------------------------------------------------------------------------------- 1 | import placesJSON from './places.json'; 2 | import placesTile from './places-z0-0-0.json'; 3 | import placesTileMin5 from './places-z0-0-0-min5.json'; 4 | 5 | type Places = { 6 | type: 'FeatureCollection'; 7 | features: supercluster.PointFeature[]; 8 | }; 9 | 10 | const places = placesJSON as Places; 11 | 12 | export { places, placesTile, placesTileMin5 }; 13 | -------------------------------------------------------------------------------- /example/src/test/fixtures/places-z0-0-0.json: -------------------------------------------------------------------------------- 1 | { 2 | "features": [ 3 | { 4 | "type": 1, 5 | "geometry": [[150, 205]], 6 | "tags": { 7 | "cluster": true, 8 | "cluster_id": 164, 9 | "point_count": 16, 10 | "point_count_abbreviated": "16" 11 | }, 12 | "id": 164 13 | }, 14 | { 15 | "type": 1, 16 | "geometry": [[165, 240]], 17 | "tags": { 18 | "cluster": true, 19 | "cluster_id": 196, 20 | "point_count": 18, 21 | "point_count_abbreviated": "18" 22 | }, 23 | "id": 196 24 | }, 25 | { 26 | "type": 1, 27 | "geometry": [[179, 303]], 28 | "tags": { 29 | "cluster": true, 30 | "cluster_id": 228, 31 | "point_count": 13, 32 | "point_count_abbreviated": "13" 33 | }, 34 | "id": 228 35 | }, 36 | { 37 | "type": 1, 38 | "geometry": [[336, 234]], 39 | "tags": { 40 | "cluster": true, 41 | "cluster_id": 260, 42 | "point_count": 8, 43 | "point_count_abbreviated": "8" 44 | }, 45 | "id": 260 46 | }, 47 | { 48 | "type": 1, 49 | "geometry": [[299, 285]], 50 | "tags": { 51 | "cluster": true, 52 | "cluster_id": 292, 53 | "point_count": 15, 54 | "point_count_abbreviated": "15" 55 | }, 56 | "id": 292 57 | }, 58 | { 59 | "type": 1, 60 | "geometry": [[71, 419]], 61 | "tags": { 62 | "cluster": true, 63 | "cluster_id": 324, 64 | "point_count": 4, 65 | "point_count_abbreviated": "4" 66 | }, 67 | "id": 324 68 | }, 69 | { 70 | "type": 1, 71 | "geometry": [[92, 212]], 72 | "tags": { 73 | "cluster": true, 74 | "cluster_id": 420, 75 | "point_count": 6, 76 | "point_count_abbreviated": "6" 77 | }, 78 | "id": 420 79 | }, 80 | { 81 | "type": 1, 82 | "geometry": [[123, 152]], 83 | "tags": { 84 | "scalerank": 3, 85 | "name": "Cape Churchill", 86 | "comment": null, 87 | "name_alt": null, 88 | "lat_y": 58.752014, 89 | "long_x": -93.182023, 90 | "region": "North America", 91 | "subregion": null, 92 | "featureclass": "cape" 93 | } 94 | }, 95 | { 96 | "type": 1, 97 | "geometry": [[162, 345]], 98 | "tags": { 99 | "cluster": true, 100 | "cluster_id": 581, 101 | "point_count": 3, 102 | "point_count_abbreviated": "3" 103 | }, 104 | "id": 581 105 | }, 106 | { 107 | "type": 1, 108 | "geometry": [[236, 232]], 109 | "tags": { 110 | "cluster": true, 111 | "cluster_id": 580, 112 | "point_count": 4, 113 | "point_count_abbreviated": "4" 114 | }, 115 | "id": 580 116 | }, 117 | { 118 | "type": 1, 119 | "geometry": [[259, 193]], 120 | "tags": { 121 | "cluster": true, 122 | "cluster_id": 644, 123 | "point_count": 6, 124 | "point_count_abbreviated": "6" 125 | }, 126 | "id": 644 127 | }, 128 | { 129 | "type": 1, 130 | "geometry": [[80, 336]], 131 | "tags": { 132 | "scalerank": 3, 133 | "name": "Oceanic pole of inaccessibility", 134 | "comment": null, 135 | "name_alt": null, 136 | "lat_y": -48.865032, 137 | "long_x": -123.401986, 138 | "region": "Seven seas (open ocean)", 139 | "subregion": "South Pacific Ocean", 140 | "featureclass": "pole" 141 | } 142 | }, 143 | { 144 | "type": 1, 145 | "geometry": [[452, 377]], 146 | "tags": { 147 | "scalerank": 3, 148 | "name": "South Magnetic Pole 2005 (est)", 149 | "comment": null, 150 | "name_alt": null, 151 | "lat_y": -48.865032, 152 | "long_x": -123.401986, 153 | "region": "Antarctica", 154 | "subregion": "Southern Ocean", 155 | "featureclass": "pole" 156 | } 157 | }, 158 | { 159 | "type": 1, 160 | "geometry": [[93, 32]], 161 | "tags": { 162 | "scalerank": 3, 163 | "name": "North Magnetic Pole 2005 (est)", 164 | "comment": null, 165 | "name_alt": null, 166 | "lat_y": -48.865032, 167 | "long_x": -123.401986, 168 | "region": "Seven seas (open ocean)", 169 | "subregion": "Arctic Ocean", 170 | "featureclass": "pole" 171 | } 172 | }, 173 | { 174 | "type": 1, 175 | "geometry": [[159, 84]], 176 | "tags": { 177 | "scalerank": 4, 178 | "name": "Cape York", 179 | "comment": null, 180 | "name_alt": null, 181 | "lat_y": 76.218919, 182 | "long_x": -68.218612, 183 | "region": "North America", 184 | "subregion": "Greenland", 185 | "featureclass": "cape" 186 | } 187 | }, 188 | { 189 | "type": 1, 190 | "geometry": [[220, 147]], 191 | "tags": { 192 | "cluster": true, 193 | "cluster_id": 836, 194 | "point_count": 3, 195 | "point_count_abbreviated": "3" 196 | }, 197 | "id": 836 198 | }, 199 | { 200 | "type": 1, 201 | "geometry": [[27, 270]], 202 | "tags": { 203 | "cluster": true, 204 | "cluster_id": 900, 205 | "point_count": 6, 206 | "point_count_abbreviated": "6" 207 | }, 208 | "id": 900 209 | }, 210 | { 211 | "type": 1, 212 | "geometry": [[100, 296]], 213 | "tags": { 214 | "scalerank": 4, 215 | "name": "I. de Pascua", 216 | "comment": null, 217 | "name_alt": "Easter I.", 218 | "lat_y": -27.102117, 219 | "long_x": -109.367953, 220 | "region": "Oceania", 221 | "subregion": "Polynesia", 222 | "featureclass": "island" 223 | } 224 | }, 225 | { 226 | "type": 1, 227 | "geometry": [[401, 226]], 228 | "tags": { 229 | "scalerank": 4, 230 | "name": "Plain of Jars", 231 | "comment": null, 232 | "name_alt": null, 233 | "lat_y": 20.550709, 234 | "long_x": 101.890532, 235 | "region": "Asia", 236 | "subregion": null, 237 | "featureclass": "plain" 238 | } 239 | }, 240 | { 241 | "type": 1, 242 | "geometry": [[26, 115]], 243 | "tags": { 244 | "cluster": true, 245 | "cluster_id": 1157, 246 | "point_count": 2, 247 | "point_count_abbreviated": "2" 248 | }, 249 | "id": 1157 250 | }, 251 | { 252 | "type": 1, 253 | "geometry": [[449, 304]], 254 | "tags": { 255 | "cluster": true, 256 | "cluster_id": 1124, 257 | "point_count": 13, 258 | "point_count_abbreviated": "13" 259 | }, 260 | "id": 1124 261 | }, 262 | { 263 | "type": 1, 264 | "geometry": [[455, 272]], 265 | "tags": { 266 | "cluster": true, 267 | "cluster_id": 1188, 268 | "point_count": 5, 269 | "point_count_abbreviated": "5" 270 | }, 271 | "id": 1188 272 | }, 273 | { 274 | "type": 1, 275 | "geometry": [[227, 121]], 276 | "tags": { 277 | "cluster": true, 278 | "cluster_id": 1701, 279 | "point_count": 2, 280 | "point_count_abbreviated": "2" 281 | }, 282 | "id": 1701 283 | }, 284 | { 285 | "type": 1, 286 | "geometry": [[210, 21]], 287 | "tags": { 288 | "scalerank": 5, 289 | "name": "Cape Morris Jesup", 290 | "comment": null, 291 | "name_alt": null, 292 | "lat_y": 83.626331, 293 | "long_x": -32.491541, 294 | "region": "North America", 295 | "subregion": "Greenland", 296 | "featureclass": "cape" 297 | } 298 | }, 299 | { 300 | "type": 1, 301 | "geometry": [[484, 235]], 302 | "tags": { 303 | "cluster": true, 304 | "cluster_id": 1380, 305 | "point_count": 13, 306 | "point_count_abbreviated": "13" 307 | }, 308 | "id": 1380 309 | }, 310 | { 311 | "type": 1, 312 | "geometry": [[503, 260]], 313 | "tags": { 314 | "cluster": true, 315 | "cluster_id": 1925, 316 | "point_count": 4, 317 | "point_count_abbreviated": "4" 318 | }, 319 | "id": 1925 320 | }, 321 | { 322 | "type": 1, 323 | "geometry": [[502, 308]], 324 | "tags": { 325 | "scalerank": 5, 326 | "name": "Cape Reinga", 327 | "comment": null, 328 | "name_alt": null, 329 | "lat_y": -34.432767, 330 | "long_x": 172.7285, 331 | "region": "Oceania", 332 | "subregion": "New Zealand", 333 | "featureclass": "cape" 334 | }, 335 | "id": 737 336 | }, 337 | { 338 | "type": 1, 339 | "geometry": [[475, 165]], 340 | "tags": { 341 | "cluster": true, 342 | "cluster_id": 1668, 343 | "point_count": 7, 344 | "point_count_abbreviated": "7" 345 | }, 346 | "id": 1668 347 | }, 348 | { 349 | "type": 1, 350 | "geometry": [[511, 142]], 351 | "tags": { 352 | "scalerank": 5, 353 | "name": "Cape Navarin", 354 | "comment": null, 355 | "name_alt": null, 356 | "lat_y": 62.327239, 357 | "long_x": 179.074225, 358 | "region": "Asia", 359 | "subregion": null, 360 | "featureclass": "cape" 361 | } 362 | }, 363 | { 364 | "type": 1, 365 | "geometry": [[469, 106]], 366 | "tags": { 367 | "scalerank": 5, 368 | "name": "Cape Lopatka", 369 | "comment": null, 370 | "name_alt": null, 371 | "lat_y": 71.907853, 372 | "long_x": 150.066042, 373 | "region": "Asia", 374 | "subregion": null, 375 | "featureclass": "cape" 376 | } 377 | }, 378 | { 379 | "type": 1, 380 | "geometry": [[292, 110]], 381 | "tags": { 382 | "scalerank": 5, 383 | "name": "Nordkapp", 384 | "comment": null, 385 | "name_alt": null, 386 | "lat_y": 71.18337, 387 | "long_x": 25.662398, 388 | "region": "Europe", 389 | "subregion": null, 390 | "featureclass": "cape" 391 | } 392 | }, 393 | { 394 | "type": 1, 395 | "geometry": [[202, 262]], 396 | "tags": { 397 | "cluster": true, 398 | "cluster_id": 4134, 399 | "point_count": 2, 400 | "point_count_abbreviated": "2" 401 | }, 402 | "id": 4134 403 | }, 404 | { 405 | "type": 1, 406 | "geometry": [[-28, 235]], 407 | "tags": { 408 | "cluster": true, 409 | "cluster_id": 1380, 410 | "point_count": 13, 411 | "point_count_abbreviated": "13" 412 | }, 413 | "id": 1380 414 | }, 415 | { 416 | "type": 1, 417 | "geometry": [[-9, 260]], 418 | "tags": { 419 | "cluster": true, 420 | "cluster_id": 1925, 421 | "point_count": 4, 422 | "point_count_abbreviated": "4" 423 | }, 424 | "id": 1925 425 | }, 426 | { 427 | "type": 1, 428 | "geometry": [[-10, 308]], 429 | "tags": { 430 | "scalerank": 5, 431 | "name": "Cape Reinga", 432 | "comment": null, 433 | "name_alt": null, 434 | "lat_y": -34.432767, 435 | "long_x": 172.7285, 436 | "region": "Oceania", 437 | "subregion": "New Zealand", 438 | "featureclass": "cape" 439 | }, 440 | "id": 737 441 | }, 442 | { 443 | "type": 1, 444 | "geometry": [[-37, 165]], 445 | "tags": { 446 | "cluster": true, 447 | "cluster_id": 1668, 448 | "point_count": 7, 449 | "point_count_abbreviated": "7" 450 | }, 451 | "id": 1668 452 | }, 453 | { 454 | "type": 1, 455 | "geometry": [[-1, 142]], 456 | "tags": { 457 | "scalerank": 5, 458 | "name": "Cape Navarin", 459 | "comment": null, 460 | "name_alt": null, 461 | "lat_y": 62.327239, 462 | "long_x": 179.074225, 463 | "region": "Asia", 464 | "subregion": null, 465 | "featureclass": "cape" 466 | } 467 | }, 468 | { 469 | "type": 1, 470 | "geometry": [[539, 270]], 471 | "tags": { 472 | "cluster": true, 473 | "cluster_id": 900, 474 | "point_count": 6, 475 | "point_count_abbreviated": "6" 476 | }, 477 | "id": 900 478 | }, 479 | { 480 | "type": 1, 481 | "geometry": [[538, 115]], 482 | "tags": { 483 | "cluster": true, 484 | "cluster_id": 1157, 485 | "point_count": 2, 486 | "point_count_abbreviated": "2" 487 | }, 488 | "id": 1157 489 | } 490 | ] 491 | } 492 | -------------------------------------------------------------------------------- /example/src/utils.ts: -------------------------------------------------------------------------------- 1 | export const superclusterOptions = { 2 | minZoom: 0, 3 | maxZoom: 16, 4 | radius: 40, 5 | extent: 512, 6 | minPoints: 2, 7 | }; 8 | 9 | export const PerformanceNow = 10 | // @ts-ignore 11 | (global.performance && global.performance.now) || 12 | // @ts-ignore 13 | global.performanceNow || 14 | // @ts-ignore 15 | global.nativePerformanceNow || 16 | (() => { 17 | try { 18 | var now = require('fbjs/lib/performanceNow'); 19 | } finally { 20 | return now; 21 | } 22 | })(); 23 | 24 | const fixed = (n: number) => (Math.trunc(n) === n ? n + '' : n.toFixed(3)); 25 | 26 | export const timeDelta = (start: number, end: number) => fixed(end - start); 27 | 28 | export const deepEqualWithoutIds = (x: any, y: any) => { 29 | if (x === y) return true; 30 | // if both x and y are null or undefined and exactly the same 31 | 32 | if (!(x instanceof Object) || !(y instanceof Object)) return false; 33 | // if they are not strictly equal, they both need to be Objects 34 | 35 | if (x.constructor !== y.constructor) return false; 36 | // they must have the exact same prototype chain, the closest we can do is 37 | // test there constructor. 38 | 39 | for (var p in x) { 40 | if (p === 'id' || p === 'cluster_id') continue; 41 | // skip id and cluster_id 42 | 43 | if (!x.hasOwnProperty(p)) continue; 44 | // other properties were tested using x.constructor === y.constructor 45 | 46 | if (!y.hasOwnProperty(p)) return false; 47 | // allows to compare x[ p ] and y[ p ] when set to undefined 48 | 49 | if (x[p] === y[p]) continue; 50 | // if they have the same strict value or identity then they are equal 51 | 52 | if (typeof x[p] !== 'object') return false; 53 | // Numbers, Strings, Functions, Booleans must be strictly equal 54 | 55 | if (!deepEqualWithoutIds(x[p], y[p])) return false; 56 | // Objects and Arrays must be tested recursively 57 | } 58 | 59 | for (p in y) { 60 | if (p === 'id' || p === 'cluster_id') continue; 61 | // skip id and cluster_id 62 | 63 | if (y.hasOwnProperty(p) && !x.hasOwnProperty(p)) return false; 64 | // allows x[ p ] to be set to undefined 65 | } 66 | 67 | return true; 68 | }; 69 | -------------------------------------------------------------------------------- /ios/Clusterer.h: -------------------------------------------------------------------------------- 1 | #if __has_include("RCTBridgeModule.h") 2 | #import "RCTBridgeModule.h" 3 | #else 4 | #import 5 | #import 6 | #endif 7 | 8 | @interface Clusterer : NSObject 9 | 10 | @property (nonatomic, assign) BOOL setBridgeOnMainQueue; 11 | 12 | @end 13 | 14 | -------------------------------------------------------------------------------- /ios/Clusterer.mm: -------------------------------------------------------------------------------- 1 | #import "Clusterer.h" 2 | #import 3 | #import 4 | #import 5 | #import 6 | 7 | #import "react-native-clusterer.h" 8 | 9 | using namespace facebook::jsi; 10 | using namespace std; 11 | 12 | @implementation Clusterer 13 | 14 | @synthesize bridge = _bridge; 15 | @synthesize methodQueue = _methodQueue; 16 | 17 | RCT_EXPORT_MODULE() 18 | 19 | + (BOOL)requiresMainQueueSetup { 20 | 21 | return YES; 22 | } 23 | 24 | // Installing JSI Bindings as done by 25 | // https://github.com/mrousavy/react-native-mmkv 26 | RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(install) 27 | { 28 | RCTBridge* bridge = [RCTBridge currentBridge]; 29 | RCTCxxBridge* cxxBridge = (RCTCxxBridge*)bridge; 30 | if (cxxBridge == nil) { 31 | return @false; 32 | } 33 | 34 | auto jsiRuntime = (jsi::Runtime*) cxxBridge.runtime; 35 | if (jsiRuntime == nil) { 36 | return @false; 37 | } 38 | 39 | clusterer::install(*(facebook::jsi::Runtime *)jsiRuntime); 40 | 41 | return @true; 42 | } 43 | 44 | @end 45 | -------------------------------------------------------------------------------- /ios/Clusterer.xcodeproj/project.pbxproj: -------------------------------------------------------------------------------- 1 | // !$*UTF8*$! 2 | { 3 | archiveVersion = 1; 4 | classes = { 5 | }; 6 | objectVersion = 46; 7 | objects = { 8 | 9 | /* Begin PBXBuildFile section */ 10 | 5E555C0D2413F4C50049A1A2 /* Clusterer.mm in Sources */ = {isa = PBXBuildFile; fileRef = B3E7B5891CC2AC0600A0062D /* Clusterer.mm */; }; 11 | /* End PBXBuildFile section */ 12 | 13 | /* Begin PBXCopyFilesBuildPhase section */ 14 | 58B511D91A9E6C8500147676 /* CopyFiles */ = { 15 | isa = PBXCopyFilesBuildPhase; 16 | buildActionMask = 2147483647; 17 | dstPath = "include/$(PRODUCT_NAME)"; 18 | dstSubfolderSpec = 16; 19 | files = ( 20 | ); 21 | runOnlyForDeploymentPostprocessing = 0; 22 | }; 23 | /* End PBXCopyFilesBuildPhase section */ 24 | 25 | /* Begin PBXFileReference section */ 26 | 134814201AA4EA6300B7C361 /* libClusterer.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = libClusterer.a; sourceTree = BUILT_PRODUCTS_DIR; }; 27 | B3E7B5891CC2AC0600A0062D /* Clusterer.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.objcpp; path = Clusterer.mm; sourceTree = ""; }; 28 | /* End PBXFileReference section */ 29 | 30 | /* Begin PBXFrameworksBuildPhase section */ 31 | 58B511D81A9E6C8500147676 /* Frameworks */ = { 32 | isa = PBXFrameworksBuildPhase; 33 | buildActionMask = 2147483647; 34 | files = ( 35 | ); 36 | runOnlyForDeploymentPostprocessing = 0; 37 | }; 38 | /* End PBXFrameworksBuildPhase section */ 39 | 40 | /* Begin PBXGroup section */ 41 | 134814211AA4EA7D00B7C361 /* Products */ = { 42 | isa = PBXGroup; 43 | children = ( 44 | 134814201AA4EA6300B7C361 /* libClusterer.a */, 45 | ); 46 | name = Products; 47 | sourceTree = ""; 48 | }; 49 | 58B511D21A9E6C8500147676 = { 50 | isa = PBXGroup; 51 | children = ( 52 | B3E7B5891CC2AC0600A0062D /* Clusterer.mm */, 53 | 134814211AA4EA7D00B7C361 /* Products */, 54 | ); 55 | sourceTree = ""; 56 | }; 57 | /* End PBXGroup section */ 58 | 59 | /* Begin PBXNativeTarget section */ 60 | 58B511DA1A9E6C8500147676 /* Clusterer */ = { 61 | isa = PBXNativeTarget; 62 | buildConfigurationList = 58B511EF1A9E6C8500147676 /* Build configuration list for PBXNativeTarget "Clusterer" */; 63 | buildPhases = ( 64 | 58B511D71A9E6C8500147676 /* Sources */, 65 | 58B511D81A9E6C8500147676 /* Frameworks */, 66 | 58B511D91A9E6C8500147676 /* CopyFiles */, 67 | ); 68 | buildRules = ( 69 | ); 70 | dependencies = ( 71 | ); 72 | name = Clusterer; 73 | productName = RCTDataManager; 74 | productReference = 134814201AA4EA6300B7C361 /* libClusterer.a */; 75 | productType = "com.apple.product-type.library.static"; 76 | }; 77 | /* End PBXNativeTarget section */ 78 | 79 | /* Begin PBXProject section */ 80 | 58B511D31A9E6C8500147676 /* Project object */ = { 81 | isa = PBXProject; 82 | attributes = { 83 | LastUpgradeCheck = 0920; 84 | ORGANIZATIONNAME = Facebook; 85 | TargetAttributes = { 86 | 58B511DA1A9E6C8500147676 = { 87 | CreatedOnToolsVersion = 6.1.1; 88 | }; 89 | }; 90 | }; 91 | buildConfigurationList = 58B511D61A9E6C8500147676 /* Build configuration list for PBXProject "Clusterer" */; 92 | compatibilityVersion = "Xcode 3.2"; 93 | developmentRegion = English; 94 | hasScannedForEncodings = 0; 95 | knownRegions = ( 96 | English, 97 | en, 98 | ); 99 | mainGroup = 58B511D21A9E6C8500147676; 100 | productRefGroup = 58B511D21A9E6C8500147676; 101 | projectDirPath = ""; 102 | projectRoot = ""; 103 | targets = ( 104 | 58B511DA1A9E6C8500147676 /* Clusterer */, 105 | ); 106 | }; 107 | /* End PBXProject section */ 108 | 109 | /* Begin PBXSourcesBuildPhase section */ 110 | 58B511D71A9E6C8500147676 /* Sources */ = { 111 | isa = PBXSourcesBuildPhase; 112 | buildActionMask = 2147483647; 113 | files = ( 114 | 5E555C0D2413F4C50049A1A2 /* Clusterer.mm in Sources */, 115 | ); 116 | runOnlyForDeploymentPostprocessing = 0; 117 | }; 118 | /* End PBXSourcesBuildPhase section */ 119 | 120 | /* Begin XCBuildConfiguration section */ 121 | 58B511ED1A9E6C8500147676 /* Debug */ = { 122 | isa = XCBuildConfiguration; 123 | buildSettings = { 124 | ALWAYS_SEARCH_USER_PATHS = NO; 125 | CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x"; 126 | CLANG_CXX_LIBRARY = "libc++"; 127 | CLANG_ENABLE_MODULES = YES; 128 | CLANG_ENABLE_OBJC_ARC = YES; 129 | CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; 130 | CLANG_WARN_BOOL_CONVERSION = YES; 131 | CLANG_WARN_COMMA = YES; 132 | CLANG_WARN_CONSTANT_CONVERSION = YES; 133 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 134 | CLANG_WARN_EMPTY_BODY = YES; 135 | CLANG_WARN_ENUM_CONVERSION = YES; 136 | CLANG_WARN_INFINITE_RECURSION = YES; 137 | CLANG_WARN_INT_CONVERSION = YES; 138 | CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; 139 | CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; 140 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 141 | CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; 142 | CLANG_WARN_STRICT_PROTOTYPES = YES; 143 | CLANG_WARN_SUSPICIOUS_MOVE = YES; 144 | CLANG_WARN_UNREACHABLE_CODE = YES; 145 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 146 | COPY_PHASE_STRIP = NO; 147 | ENABLE_STRICT_OBJC_MSGSEND = YES; 148 | ENABLE_TESTABILITY = YES; 149 | GCC_C_LANGUAGE_STANDARD = gnu99; 150 | GCC_DYNAMIC_NO_PIC = NO; 151 | GCC_NO_COMMON_BLOCKS = YES; 152 | GCC_OPTIMIZATION_LEVEL = 0; 153 | GCC_PREPROCESSOR_DEFINITIONS = ( 154 | "DEBUG=1", 155 | "$(inherited)", 156 | ); 157 | GCC_SYMBOLS_PRIVATE_EXTERN = NO; 158 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 159 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 160 | GCC_WARN_UNDECLARED_SELECTOR = YES; 161 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 162 | GCC_WARN_UNUSED_FUNCTION = YES; 163 | GCC_WARN_UNUSED_VARIABLE = YES; 164 | IPHONEOS_DEPLOYMENT_TARGET = 8.0; 165 | MTL_ENABLE_DEBUG_INFO = YES; 166 | ONLY_ACTIVE_ARCH = YES; 167 | SDKROOT = iphoneos; 168 | }; 169 | name = Debug; 170 | }; 171 | 58B511EE1A9E6C8500147676 /* Release */ = { 172 | isa = XCBuildConfiguration; 173 | buildSettings = { 174 | ALWAYS_SEARCH_USER_PATHS = NO; 175 | CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x"; 176 | CLANG_CXX_LIBRARY = "libc++"; 177 | CLANG_ENABLE_MODULES = YES; 178 | CLANG_ENABLE_OBJC_ARC = YES; 179 | CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; 180 | CLANG_WARN_BOOL_CONVERSION = YES; 181 | CLANG_WARN_COMMA = YES; 182 | CLANG_WARN_CONSTANT_CONVERSION = YES; 183 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 184 | CLANG_WARN_EMPTY_BODY = YES; 185 | CLANG_WARN_ENUM_CONVERSION = YES; 186 | CLANG_WARN_INFINITE_RECURSION = YES; 187 | CLANG_WARN_INT_CONVERSION = YES; 188 | CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; 189 | CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; 190 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 191 | CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; 192 | CLANG_WARN_STRICT_PROTOTYPES = YES; 193 | CLANG_WARN_SUSPICIOUS_MOVE = YES; 194 | CLANG_WARN_UNREACHABLE_CODE = YES; 195 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 196 | COPY_PHASE_STRIP = YES; 197 | ENABLE_NS_ASSERTIONS = NO; 198 | ENABLE_STRICT_OBJC_MSGSEND = YES; 199 | GCC_C_LANGUAGE_STANDARD = gnu99; 200 | GCC_NO_COMMON_BLOCKS = YES; 201 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 202 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 203 | GCC_WARN_UNDECLARED_SELECTOR = YES; 204 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 205 | GCC_WARN_UNUSED_FUNCTION = YES; 206 | GCC_WARN_UNUSED_VARIABLE = YES; 207 | IPHONEOS_DEPLOYMENT_TARGET = 8.0; 208 | MTL_ENABLE_DEBUG_INFO = NO; 209 | SDKROOT = iphoneos; 210 | VALIDATE_PRODUCT = YES; 211 | }; 212 | name = Release; 213 | }; 214 | 58B511F01A9E6C8500147676 /* Debug */ = { 215 | isa = XCBuildConfiguration; 216 | buildSettings = { 217 | HEADER_SEARCH_PATHS = ( 218 | "$(inherited)", 219 | /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include, 220 | "$(SRCROOT)/../../../React/**", 221 | "$(SRCROOT)/../../react-native/React/**", 222 | ); 223 | LIBRARY_SEARCH_PATHS = "$(inherited)"; 224 | OTHER_LDFLAGS = "-ObjC"; 225 | PRODUCT_NAME = Clusterer; 226 | SKIP_INSTALL = YES; 227 | }; 228 | name = Debug; 229 | }; 230 | 58B511F11A9E6C8500147676 /* Release */ = { 231 | isa = XCBuildConfiguration; 232 | buildSettings = { 233 | HEADER_SEARCH_PATHS = ( 234 | "$(inherited)", 235 | /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include, 236 | "$(SRCROOT)/../../../React/**", 237 | "$(SRCROOT)/../../react-native/React/**", 238 | ); 239 | LIBRARY_SEARCH_PATHS = "$(inherited)"; 240 | OTHER_LDFLAGS = "-ObjC"; 241 | PRODUCT_NAME = Clusterer; 242 | SKIP_INSTALL = YES; 243 | }; 244 | name = Release; 245 | }; 246 | /* End XCBuildConfiguration section */ 247 | 248 | /* Begin XCConfigurationList section */ 249 | 58B511D61A9E6C8500147676 /* Build configuration list for PBXProject "Clusterer" */ = { 250 | isa = XCConfigurationList; 251 | buildConfigurations = ( 252 | 58B511ED1A9E6C8500147676 /* Debug */, 253 | 58B511EE1A9E6C8500147676 /* Release */, 254 | ); 255 | defaultConfigurationIsVisible = 0; 256 | defaultConfigurationName = Release; 257 | }; 258 | 58B511EF1A9E6C8500147676 /* Build configuration list for PBXNativeTarget "Clusterer" */ = { 259 | isa = XCConfigurationList; 260 | buildConfigurations = ( 261 | 58B511F01A9E6C8500147676 /* Debug */, 262 | 58B511F11A9E6C8500147676 /* Release */, 263 | ); 264 | defaultConfigurationIsVisible = 0; 265 | defaultConfigurationName = Release; 266 | }; 267 | /* End XCConfigurationList section */ 268 | }; 269 | rootObject = 58B511D31A9E6C8500147676 /* Project object */; 270 | } 271 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-clusterer", 3 | "version": "3.0.0", 4 | "description": "React Native clustering library using C++ Supercluster implementation", 5 | "main": "lib/commonjs/index", 6 | "module": "lib/module/index", 7 | "types": "lib/typescript/index.d.ts", 8 | "react-native": "src/index", 9 | "source": "src/index", 10 | "files": [ 11 | "src", 12 | "lib", 13 | "android", 14 | "ios", 15 | "cpp", 16 | "react-native-clusterer.podspec", 17 | "!lib/typescript/example", 18 | "!android/build", 19 | "!ios/build", 20 | "!**/__tests__", 21 | "!**/__fixtures__", 22 | "!**/__mocks__", 23 | "!android/.cxx", 24 | "!android/.gradle" 25 | ], 26 | "scripts": { 27 | "test": "jest", 28 | "typescript": "tsc --noEmit", 29 | "lint": "eslint \"**/*.{js,ts,tsx}\"", 30 | "prepare": "bob build", 31 | "release": "release-it", 32 | "example": "yarn --cwd example", 33 | "pods": "cd example && pod-install --quiet", 34 | "bootstrap": "yarn example && yarn && yarn pods", 35 | "clang-format": "find cpp/ -iname *.h -o -iname *.cpp | xargs clang-format -i" 36 | }, 37 | "keywords": [ 38 | "react", 39 | "native", 40 | "react-native", 41 | "react-native-maps", 42 | "map", 43 | "maps", 44 | "mapview", 45 | "ios", 46 | "android", 47 | "cluster", 48 | "clusters", 49 | "clustering", 50 | "clustering-algorithm", 51 | "super", 52 | "supercluster" 53 | ], 54 | "repository": "https://github.com/JiriHoffmann/react-native-clusterer", 55 | "author": "Jiri Hoffmann (https://github.com/JiriHoffmann)", 56 | "license": "MIT", 57 | "bugs": { 58 | "url": "https://github.com/JiriHoffmann/react-native-clusterer/issues" 59 | }, 60 | "homepage": "https://aci.cis.gvsu.edu/2022/03/28/map-marker-clustering-in-react-native-is-now-easier", 61 | "publishConfig": { 62 | "registry": "https://registry.npmjs.org/" 63 | }, 64 | "devDependencies": { 65 | "@commitlint/config-conventional": "^14.1.0", 66 | "@react-native-community/eslint-config": "^3.0.1", 67 | "@release-it/conventional-changelog": "^3.3.0", 68 | "@types/jest": "^27.0.2", 69 | "@types/mapbox__geo-viewport": "^0.4.1", 70 | "@types/react": "^17.0.34", 71 | "@types/react-native": "0.66.3", 72 | "clang-format": "^1.6.0", 73 | "commitlint": "^14.1.0", 74 | "eslint": "^8.2.0", 75 | "eslint-config-prettier": "^8.3.0", 76 | "eslint-plugin-prettier": "^4.0.0", 77 | "husky": "^7.0.4", 78 | "jest": "^27.3.1", 79 | "pod-install": "^0.1.28", 80 | "prettier": "^2.4.1", 81 | "react": "17.0.2", 82 | "react-native": "0.66.3", 83 | "react-native-builder-bob": "^0.18.2", 84 | "release-it": "^14.11.6", 85 | "typescript": "^4.4.4" 86 | }, 87 | "peerDependencies": { 88 | "react": "*", 89 | "react-native": "*" 90 | }, 91 | "jest": { 92 | "preset": "react-native", 93 | "modulePathIgnorePatterns": [ 94 | "/example/node_modules", 95 | "/lib/" 96 | ] 97 | }, 98 | "commitlint": { 99 | "extends": [ 100 | "@commitlint/config-conventional" 101 | ] 102 | }, 103 | "release-it": { 104 | "git": { 105 | "commitMessage": "chore: release ${version}", 106 | "tagName": "v${version}" 107 | }, 108 | "npm": { 109 | "publish": true 110 | }, 111 | "github": { 112 | "release": true 113 | }, 114 | "plugins": { 115 | "@release-it/conventional-changelog": { 116 | "preset": "angular" 117 | } 118 | } 119 | }, 120 | "eslintConfig": { 121 | "root": true, 122 | "extends": [ 123 | "@react-native-community", 124 | "prettier" 125 | ], 126 | "rules": { 127 | "prettier/prettier": [ 128 | "error", 129 | { 130 | "quoteProps": "consistent", 131 | "singleQuote": true, 132 | "tabWidth": 2, 133 | "trailingComma": "es5", 134 | "useTabs": false 135 | } 136 | ] 137 | } 138 | }, 139 | "eslintIgnore": [ 140 | "node_modules/", 141 | "lib/" 142 | ], 143 | "prettier": { 144 | "quoteProps": "consistent", 145 | "singleQuote": true, 146 | "tabWidth": 2, 147 | "trailingComma": "es5", 148 | "useTabs": false 149 | }, 150 | "react-native-builder-bob": { 151 | "source": "src", 152 | "output": "lib", 153 | "targets": [ 154 | "commonjs", 155 | "module", 156 | [ 157 | "typescript", 158 | { 159 | "project": "tsconfig.build.json" 160 | } 161 | ] 162 | ] 163 | }, 164 | "dependencies": { 165 | "@mapbox/geo-viewport": "^0.5.0", 166 | "@types/geojson": "^7946.0.8" 167 | } 168 | } 169 | -------------------------------------------------------------------------------- /react-native-clusterer.podspec: -------------------------------------------------------------------------------- 1 | require "json" 2 | 3 | package = JSON.parse(File.read(File.join(__dir__, "package.json"))) 4 | 5 | Pod::Spec.new do |s| 6 | s.name = "react-native-clusterer" 7 | s.version = package["version"] 8 | s.summary = package["description"] 9 | s.homepage = package["homepage"] 10 | s.license = package["license"] 11 | s.authors = package["author"] 12 | 13 | s.platforms = { :ios => "10.0" } 14 | s.source = { :git => "https://github.com/JiriHoffmann/react-native-clusterer.git", :tag => "#{s.version}" } 15 | 16 | s.source_files = "ios/**/*.{h,m,mm}", "cpp/**/*.{h,cpp,hpp}" 17 | 18 | s.dependency "React-Core" 19 | end 20 | -------------------------------------------------------------------------------- /scripts/bootstrap.js: -------------------------------------------------------------------------------- 1 | const os = require('os'); 2 | const path = require('path'); 3 | const child_process = require('child_process'); 4 | 5 | const root = path.resolve(__dirname, '..'); 6 | const args = process.argv.slice(2); 7 | const options = { 8 | cwd: process.cwd(), 9 | env: process.env, 10 | stdio: 'inherit', 11 | encoding: 'utf-8', 12 | }; 13 | 14 | if (os.type() === 'Windows_NT') { 15 | options.shell = true 16 | } 17 | 18 | let result; 19 | 20 | if (process.cwd() !== root || args.length) { 21 | // We're not in the root of the project, or additional arguments were passed 22 | // In this case, forward the command to `yarn` 23 | result = child_process.spawnSync('yarn', args, options); 24 | } else { 25 | // If `yarn` is run without arguments, perform bootstrap 26 | result = child_process.spawnSync('yarn', ['bootstrap'], options); 27 | } 28 | 29 | process.exitCode = result.status; 30 | -------------------------------------------------------------------------------- /src/Clusterer.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactElement } from 'react'; 2 | import { useClusterer } from './useClusterer'; 3 | import type Supercluster from './types'; 4 | import type { MapDimensions, Region } from './types'; 5 | 6 | export interface ClustererProps

{ 7 | data: Array>; 8 | mapDimensions: MapDimensions; 9 | region: Region; 10 | renderItem: ( 11 | item: Supercluster.PointOrClusterFeature, 12 | index: number, 13 | array: Supercluster.PointOrClusterFeature[] 14 | ) => React.ReactElement; 15 | options?: Supercluster.Options; 16 | } 17 | 18 | export function Clusterer

({ 19 | data, 20 | options, 21 | region, 22 | mapDimensions, 23 | renderItem, 24 | }: ClustererProps): ReactElement { 25 | const [points] = useClusterer(data, mapDimensions, region, options); 26 | 27 | return <>{points.map(renderItem)}; 28 | } 29 | -------------------------------------------------------------------------------- /src/Supercluster.ts: -------------------------------------------------------------------------------- 1 | import { NativeModules, Platform } from 'react-native'; 2 | import GeoViewport from '@mapbox/geo-viewport'; 3 | import { getMarkersCoordinates, getMarkersRegion, regionToBBox } from './utils'; 4 | 5 | import type * as GeoJSON from 'geojson'; 6 | import type { MapDimensions, Region } from './types'; 7 | import type Supercluster from './types'; 8 | 9 | const module = NativeModules.Clusterer; 10 | 11 | if ( 12 | module && 13 | typeof module.install === 'function' && 14 | !(global as any).createSupercluster 15 | ) { 16 | module.install(); 17 | } 18 | 19 | const createSupercluster = (global as any).createSupercluster; 20 | const defaultOptions = { 21 | minZoom: 0, // min zoom to generate clusters on 22 | maxZoom: 16, // max zoom level to cluster the points on 23 | minPoints: 2, // minimum points to form a cluster 24 | radius: 40, // cluster radius in pixels 25 | extent: 512, // tile extent (radius is calculated relative to it) 26 | log: false, // whether to log timing info 27 | // whether to generate numeric ids for input features (in vector tiles) 28 | generateId: false, 29 | }; 30 | 31 | export default class SuperclusterClass< 32 | P extends GeoJSON.GeoJsonProperties = Supercluster.AnyProps, 33 | C extends GeoJSON.GeoJsonProperties = Supercluster.AnyProps 34 | > { 35 | private cppInstance: any = undefined; 36 | private options: Required>; 37 | 38 | constructor(options?: Supercluster.Options) { 39 | if (!createSupercluster) { 40 | throw new Error( 41 | `The package 'react-native-clusterer' doesn't seem to be linked. Make sure: \n\n` + 42 | Platform.select({ 43 | ios: "- You have run 'pod install'\n", 44 | default: '', 45 | }) + 46 | '- You rebuilt the app after installing the package\n' + 47 | '- You are not using Expo Go, but an Expo development client instead\n' 48 | ); 49 | } 50 | 51 | this.options = { ...defaultOptions, ...options }; 52 | } 53 | 54 | /** 55 | * Loads an array of GeoJSON Feature objects. Each feature's geometry 56 | * must be a GeoJSON Point. Once loaded, index is immutable. 57 | * 58 | * @param points Array of GeoJSON Features, the geometries being GeoJSON Points. 59 | */ 60 | load(points: Array>): SuperclusterClass { 61 | this.cppInstance = createSupercluster(points, this.options); 62 | return this; 63 | } 64 | 65 | /** 66 | * Returns an array of clusters and points as `GeoJSON.Feature` objects 67 | * for the given bounding box (`bbox`) and zoom level (`zoom`). 68 | * 69 | * @param bbox Bounding box (`[westLng, southLat, eastLng, northLat]`). 70 | * @param zoom Zoom level. 71 | */ 72 | getClusters( 73 | bbox: GeoJSON.BBox, 74 | zoom: number 75 | ): Array | Supercluster.PointFeature

> { 76 | if (!this.cppInstance) return []; 77 | 78 | return this.cppInstance 79 | .getClusters(bbox, zoom) 80 | .map(this.addExpansionRegionToCluster); 81 | } 82 | 83 | /** 84 | * Returns an array of clusters and points as `GeoJSON.Feature` objects 85 | * for the given bounding box (`bbox`) and zoom level (`zoom`). 86 | * 87 | * @param bbox Bounding box (`[westLng, southLat, eastLng, northLat]`). 88 | * @param zoom Zoom level. 89 | */ 90 | getClustersFromRegion( 91 | region: Region, 92 | mapDimensions: MapDimensions 93 | ): Array | Supercluster.PointFeature

> { 94 | if (!this.cppInstance) return []; 95 | 96 | const bbox = regionToBBox(region); 97 | 98 | if (region.longitudeDelta >= 40) 99 | return this.cppInstance 100 | .getClusters(bbox, this.options.minZoom) 101 | .map(this.addExpansionRegionToCluster); 102 | 103 | const viewport = GeoViewport.viewport( 104 | bbox, 105 | [mapDimensions.width, mapDimensions.height], 106 | this.options.minZoom, 107 | this.options.maxZoom + 1, 108 | this.options.extent 109 | ); 110 | 111 | return this.cppInstance 112 | .getClusters(bbox, viewport.zoom) 113 | .map(this.addExpansionRegionToCluster); 114 | } 115 | 116 | /** 117 | * For a given zoom and x/y coordinates, returns a 118 | * [geojson-vt](https://github.com/mapbox/geojson-vt)-compatible JSON 119 | * tile object with cluster any point features. 120 | */ 121 | getTile(x: number, y: number, zoom: number): Supercluster.Tile | null { 122 | if (!this.cppInstance) return null; 123 | 124 | return { features: this.cppInstance.getTile(x, y, zoom) }; 125 | } 126 | 127 | /** 128 | * Returns the children of a cluster (on the next zoom level). 129 | * 130 | * @param clusterId Cluster ID (`cluster_id` value from feature properties). 131 | * @throws {Error} If `clusterId` does not exist. 132 | */ 133 | getChildren( 134 | clusterId: number 135 | ): Array | Supercluster.PointFeature

> { 136 | if (!this.cppInstance) return []; 137 | 138 | return this.cppInstance.getChildren(clusterId); 139 | } 140 | 141 | /** 142 | * Returns all the points of a cluster (with pagination support). 143 | * 144 | * @param clusterId Cluster ID (`cluster_id` value from feature properties). 145 | * @param limit The number of points to return (set to `Infinity` for all points). 146 | * @param offset The amount of points to skip (for pagination). 147 | */ 148 | getLeaves( 149 | clusterId: number, 150 | limit?: number, 151 | offset?: number 152 | ): Array> { 153 | if (!this.cppInstance) return []; 154 | 155 | return this.cppInstance.getLeaves(clusterId, limit ?? 10, offset ?? 0); 156 | } 157 | 158 | /** 159 | * Returns the zoom level on which the cluster expands into several 160 | * children (useful for "click to zoom" feature). 161 | * 162 | * @param clusterId Cluster ID (`cluster_id` value from feature properties). 163 | */ 164 | getClusterExpansionZoom(clusterId: number): number { 165 | if (!this.cppInstance) return 0; 166 | 167 | return this.cppInstance.getClusterExpansionZoom(clusterId); 168 | } 169 | 170 | /** 171 | * Returns a region containing the center of all the points in a cluster 172 | * and the delta value by which it should be zoomed out to see all the points. 173 | * (usefull for animating a MapView after a cluster press). 174 | * @param clusterId Cluster ID (`cluster_id` value from feature properties). 175 | */ 176 | getClusterExpansionRegion = (clusterId: number): Region => { 177 | if (!this.cppInstance) 178 | return { latitude: 0, longitude: 0, latitudeDelta: 0, longitudeDelta: 0 }; 179 | 180 | const clusterMarkersCoordinates = this.getMarkersInCluster(clusterId).map( 181 | getMarkersCoordinates 182 | ); 183 | 184 | return getMarkersRegion(clusterMarkersCoordinates); 185 | }; 186 | 187 | /** 188 | * Destroy the instance. 189 | * @deprecated Removed in 1.2.0. 190 | * @returns True if cluster exists and was destroyed, else false. 191 | */ 192 | destroy(): boolean { 193 | console.warn( 194 | 'React-Native-Clusterer: destroy function is no longer needed' 195 | ); 196 | return false; 197 | } 198 | 199 | private getMarkersInCluster = ( 200 | clusterId: number 201 | ): Array> => { 202 | const clusterChildren = this.getChildren(clusterId); 203 | 204 | if (clusterChildren.length > 1) { 205 | return clusterChildren; 206 | } 207 | return this.getMarkersInCluster(clusterChildren[0]!.id as number); 208 | }; 209 | 210 | private addExpansionRegionToCluster = ( 211 | feature: Supercluster.PointFeature

| Supercluster.ClusterFeatureBase 212 | ) => { 213 | if (feature.properties?.cluster_id) { 214 | ( 215 | feature as Supercluster.ClusterFeature 216 | ).properties.getExpansionRegion = () => 217 | this.getClusterExpansionRegion(feature.properties!.cluster_id); 218 | } 219 | return feature; 220 | }; 221 | } 222 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import { Clusterer } from './Clusterer'; 2 | import Supercluster from './Supercluster'; 3 | import type supercluster from './types'; 4 | import { useClusterer } from './useClusterer'; 5 | import { isPointCluster, coordsToGeoJSONFeature } from './utils'; 6 | export default Supercluster; 7 | export { 8 | Clusterer, 9 | supercluster, 10 | useClusterer, 11 | isPointCluster, 12 | coordsToGeoJSONFeature, 13 | }; 14 | -------------------------------------------------------------------------------- /src/types.ts: -------------------------------------------------------------------------------- 1 | // Modified version of: 2 | // Type definitions for supercluster 5.0 3 | // Project: https://github.com/mapbox/supercluster 4 | // Definitions by: Denis Carriere 5 | // Nick Zahn 6 | // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped 7 | // TypeScript Version: 2.3 8 | 9 | import type * as GeoJSON from 'geojson'; 10 | 11 | export type BBox = [number, number, number, number]; 12 | export interface Region { 13 | latitude: number; 14 | longitude: number; 15 | latitudeDelta: number; 16 | longitudeDelta: number; 17 | } 18 | 19 | export interface MapDimensions { 20 | width: number; 21 | height: number; 22 | } 23 | 24 | export interface LatLng { 25 | latitude: number; 26 | longitude: number; 27 | } 28 | 29 | declare namespace Supercluster { 30 | interface Options { 31 | /** 32 | * Minimum zoom level at which clusters are generated. 33 | * 34 | * @default 0 35 | */ 36 | minZoom?: number; 37 | /** 38 | * Maximum zoom level at which clusters are generated. 39 | * 40 | * @default 16 41 | */ 42 | maxZoom?: number; 43 | /** 44 | * Minimum number of points to form a cluster. 45 | * 46 | * @default 2 47 | */ 48 | minPoints?: number; 49 | /** 50 | * Cluster radius, in pixels. 51 | * 52 | * @default 40 53 | */ 54 | radius?: number; 55 | /** 56 | * (Tiles) Tile extent. Radius is calculated relative to this value. 57 | * 58 | * @default 512 59 | */ 60 | extent?: number; 61 | /** 62 | * Whether to generate ids for input features in vector tiles. 63 | * 64 | * @default false 65 | */ 66 | generateId?: boolean; 67 | /** 68 | * Size of the KD-tree leaf node. Affects performance. 69 | * 70 | * @default 64 71 | */ 72 | // nodeSize?: number | undefined; 73 | /** 74 | * Whether timing info should be logged. 75 | * 76 | * @default false 77 | */ 78 | // log?: boolean | undefined; 79 | /** 80 | * A function that returns cluster properties corresponding to a single point. 81 | * 82 | * @example 83 | * (props) => ({sum: props.myValue}) 84 | */ 85 | // map?: ((props: P) => C) | undefined; 86 | /** 87 | * A reduce function that merges properties of two clusters into one. 88 | * 89 | * @example 90 | * (accumulated, props) => { accumulated.sum += props.sum; } 91 | */ 92 | // reduce?: ((accumulated: C, props: Readonly) => void) | undefined; 93 | } 94 | /** 95 | * Default properties type, allowing any properties. 96 | * Try to avoid this for better typesafety by using proper types. 97 | */ 98 | interface AnyProps { 99 | [name: string]: any; 100 | } 101 | /** 102 | * [GeoJSON Feature](https://tools.ietf.org/html/rfc7946#section-3.2), 103 | * with the geometry being a 104 | * [GeoJSON Point](https://tools.ietf.org/html/rfc7946#section-3.1.2). 105 | */ 106 | type PointFeature

= GeoJSON.Feature; 107 | interface ClusterProperties { 108 | /** 109 | * Always `true` to indicate that the Feature is a Cluster and not 110 | * an individual point. 111 | */ 112 | cluster: true; 113 | /** Cluster ID */ 114 | cluster_id: number; 115 | /** Number of points in the cluster. */ 116 | point_count: number; 117 | /** 118 | * Abbreviated number of points in the cluster as string if the number 119 | * is 1000 or greater (e.g. `1.3k` if the number is `1298`). 120 | */ 121 | point_count_abbreviated: string; 122 | } 123 | 124 | type ClusterFeatureBase = PointFeature; 125 | 126 | type ClustererClusterProperties = { 127 | getExpansionRegion: () => Region; 128 | }; 129 | 130 | type ClusterFeature = PointFeature< 131 | ClusterProperties & C & ClustererClusterProperties 132 | >; 133 | 134 | type PointOrClusterFeature = PointFeature

| ClusterFeature; 135 | interface TileFeature { 136 | type: 1; 137 | geometry: Array<[number, number]>; 138 | tags: (ClusterProperties & C) | P; 139 | } 140 | interface Tile { 141 | features: Array>; 142 | } 143 | } 144 | 145 | export default Supercluster; 146 | 147 | -------------------------------------------------------------------------------- /src/useClusterer.ts: -------------------------------------------------------------------------------- 1 | import { useMemo } from 'react'; 2 | import type Supercluster from './types'; 3 | import type { MapDimensions, Region } from './types'; 4 | import SuperclusterClass from './Supercluster'; 5 | import type * as GeoJSON from 'geojson'; 6 | 7 | export function useClusterer< 8 | P extends GeoJSON.GeoJsonProperties = Supercluster.AnyProps, 9 | C extends GeoJSON.GeoJsonProperties = Supercluster.AnyProps 10 | >( 11 | data: Array>, 12 | mapDimensions: MapDimensions, 13 | region: Region, 14 | options?: Supercluster.Options 15 | ): [ 16 | (Supercluster.PointFeature

| Supercluster.ClusterFeature)[], 17 | SuperclusterClass 18 | ] { 19 | const supercluster = useMemo( 20 | () => new SuperclusterClass(options).load(data), 21 | [ 22 | data, 23 | options?.extent, 24 | options?.maxZoom, 25 | options?.minZoom, 26 | options?.minPoints, 27 | options?.radius, 28 | ] 29 | ); 30 | 31 | const points = useMemo( 32 | () => supercluster.getClustersFromRegion(region, mapDimensions), 33 | [ 34 | supercluster, 35 | region.latitude, 36 | region.longitude, 37 | region.latitudeDelta, 38 | region.longitudeDelta, 39 | mapDimensions.width, 40 | mapDimensions.height, 41 | ] 42 | ); 43 | 44 | return [points, supercluster]; 45 | } 46 | -------------------------------------------------------------------------------- /src/utils.ts: -------------------------------------------------------------------------------- 1 | import type { Feature, Point } from 'geojson'; 2 | import type Supercluster from './types'; 3 | import type { BBox, LatLng, Region } from './types'; 4 | 5 | const calculateDelta = (x: number, y: number): number => 6 | x > y ? x - y : y - x; 7 | 8 | const calculateAverage = (...args: number[]): number => { 9 | const argList = [...args]; 10 | if (!argList.length) { 11 | return 0; 12 | } 13 | return argList.reduce((sum, num: number) => sum + num, 0) / argList.length; 14 | }; 15 | 16 | export const regionToBBox = (region: Region): BBox => { 17 | const lngD = 18 | region.longitudeDelta < 0 19 | ? region.longitudeDelta + 360 20 | : region.longitudeDelta; 21 | 22 | return [ 23 | region.longitude - lngD, // westLng - min lng 24 | region.latitude - region.latitudeDelta, // southLat - min lat 25 | region.longitude + lngD, // eastLng - max lng 26 | region.latitude + region.latitudeDelta, // northLat - max lat 27 | ]; 28 | }; 29 | 30 | export const getMarkersRegion = (points: LatLng[]): Region => { 31 | const coordinates = { 32 | minX: points[0]!.latitude, 33 | maxX: points[0]!.latitude, 34 | maxY: points[0]!.longitude, 35 | minY: points[0]!.longitude, 36 | }; 37 | 38 | const { maxX, minX, maxY, minY } = points.reduce( 39 | (acc, point) => ({ 40 | minX: Math.min(acc.minX, point.latitude), 41 | maxX: Math.max(acc.maxX, point.latitude), 42 | minY: Math.min(acc.minY, point.longitude), 43 | maxY: Math.max(acc.maxY, point.longitude), 44 | }), 45 | { ...coordinates } 46 | ); 47 | 48 | const deltaX = calculateDelta(maxX, minX); 49 | const deltaY = calculateDelta(maxY, minY); 50 | 51 | return { 52 | latitude: calculateAverage(minX, maxX), 53 | longitude: calculateAverage(minY, maxY), 54 | latitudeDelta: deltaX * 1.5, 55 | longitudeDelta: deltaY * 1.5, 56 | }; 57 | }; 58 | 59 | export const getMarkersCoordinates = (markers: Feature) => { 60 | const [longitude, latitude] = markers.geometry.coordinates; 61 | return { longitude, latitude }; 62 | }; 63 | 64 | /** 65 | * Determines if a point is a cluster for `.properties` typesafe accessiblity 66 | * @param point ClusterFeature or PointFeature 67 | */ 68 | export const isPointCluster = ( 69 | point: Supercluster.ClusterFeature | Supercluster.PointFeature

70 | ): point is Supercluster.ClusterFeature => { 71 | return 'properties' in point && 'cluster' in (point.properties as any); 72 | }; 73 | 74 | type CoordOptions = 75 | | [number, number] 76 | | { latitude: number; longitude: number } 77 | | { lat: number; lng: number }; 78 | 79 | /** 80 | * Utility function to convert coordinates to a GeoJSON feature 81 | * @param coords The coordinates to be converted to a GeoJSON feature - can be an array of two coordinates, `{ lat: number; lng: number }`, or `{ latitude: number; longitude: number }` 82 | * @param props Additional optional properties to be added to the feature 83 | */ 84 | export const coordsToGeoJSONFeature = ( 85 | coords: CoordOptions, 86 | props?: T 87 | ): Supercluster.PointFeature => { 88 | let coordinates; 89 | if (Array.isArray(coords)) { 90 | coordinates = coords; 91 | } else if ('latitude' in coords) { 92 | coordinates = [coords.longitude, coords.latitude]; 93 | } else { 94 | coordinates = [coords.lng, coords.lat]; 95 | } 96 | 97 | return { 98 | type: 'Feature', 99 | geometry: { 100 | coordinates, 101 | type: 'Point', 102 | }, 103 | properties: props, 104 | }; 105 | }; 106 | -------------------------------------------------------------------------------- /tsconfig.build.json: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "extends": "./tsconfig", 4 | "exclude": ["example"] 5 | } 6 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "./", 4 | "paths": { 5 | "react-native-clusterer": ["./src/index"] 6 | }, 7 | "allowUnreachableCode": false, 8 | "allowUnusedLabels": false, 9 | "esModuleInterop": true, 10 | "importsNotUsedAsValues": "error", 11 | "forceConsistentCasingInFileNames": true, 12 | "jsx": "react", 13 | "lib": ["esnext"], 14 | "module": "esnext", 15 | "moduleResolution": "node", 16 | "noFallthroughCasesInSwitch": true, 17 | "noImplicitReturns": true, 18 | "noImplicitUseStrict": false, 19 | "noStrictGenericChecks": false, 20 | "noUnusedLocals": true, 21 | "noUnusedParameters": true, 22 | "resolveJsonModule": true, 23 | "skipLibCheck": true, 24 | "strict": true, 25 | "target": "esnext" 26 | } 27 | } 28 | --------------------------------------------------------------------------------