15 | ): [
16 | (Supercluster.PointFeature | Supercluster.ClusterFeature)[],
17 | SuperclusterClass,
18 | ] {
19 | const [supercluster, setSupercluster] = useState(
20 | new SuperclusterClass(options).load(data)
21 | );
22 |
23 | const [points, setPoints] = useState(
24 | supercluster.getClustersFromRegion(region, mapDimensions)
25 | );
26 |
27 | useEffect(() => {
28 | setSupercluster(new SuperclusterClass(options).load(data));
29 | // Keep option properties as individual dependencies in case "options" prop is passed as an inline object
30 | // eslint-disable-next-line react-hooks/exhaustive-deps
31 | }, [
32 | data,
33 | options?.extent,
34 | options?.radius,
35 | options?.minPoints,
36 | options?.minZoom,
37 | options?.maxZoom,
38 | ]);
39 |
40 | useEffect(() => {
41 | setPoints(supercluster.getClustersFromRegion(region, mapDimensions));
42 | }, [supercluster, region, mapDimensions]);
43 |
44 | return [points, supercluster];
45 | }
46 |
--------------------------------------------------------------------------------
/nitrogen/generated/shared/c++/HybridClustererSpec.hpp:
--------------------------------------------------------------------------------
1 | ///
2 | /// HybridClustererSpec.hpp
3 | /// This file was generated by nitrogen. DO NOT MODIFY THIS FILE.
4 | /// https://github.com/mrousavy/nitro
5 | /// Copyright © 2025 Marc Rousavy @ Margelo
6 | ///
7 |
8 | #pragma once
9 |
10 | #if __has_include()
11 | #include
12 | #else
13 | #error NitroModules cannot be found! Are you sure you installed NitroModules properly?
14 | #endif
15 |
16 |
17 |
18 |
19 |
20 | namespace margelo::nitro::clusterer {
21 |
22 | using namespace margelo::nitro;
23 |
24 | /**
25 | * An abstract base class for `Clusterer`
26 | * Inherit this class to create instances of `HybridClustererSpec` in C++.
27 | * You must explicitly call `HybridObject`'s constructor yourself, because it is virtual.
28 | * @example
29 | * ```cpp
30 | * class HybridClusterer: public HybridClustererSpec {
31 | * public:
32 | * HybridClusterer(...): HybridObject(TAG) { ... }
33 | * // ...
34 | * };
35 | * ```
36 | */
37 | class HybridClustererSpec: public virtual HybridObject {
38 | public:
39 | // Constructor
40 | explicit HybridClustererSpec(): HybridObject(TAG) { }
41 |
42 | // Destructor
43 | ~HybridClustererSpec() override = default;
44 |
45 | public:
46 | // Properties
47 |
48 |
49 | public:
50 | // Methods
51 |
52 |
53 | protected:
54 | // Hybrid Setup
55 | void loadHybridMethods() override;
56 |
57 | protected:
58 | // Tag for logging
59 | static constexpr auto TAG = "Clusterer";
60 | };
61 |
62 | } // namespace margelo::nitro::clusterer
63 |
--------------------------------------------------------------------------------
/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 | NSAllowsArbitraryLoads
30 |
31 | NSAllowsLocalNetworking
32 |
33 |
34 | NSLocationWhenInUseUsageDescription
35 |
36 | RCTNewArchEnabled
37 |
38 | UILaunchStoryboardName
39 | LaunchScreen
40 | UIRequiredDeviceCapabilities
41 |
42 | arm64
43 |
44 | UISupportedInterfaceOrientations
45 |
46 | UIInterfaceOrientationPortrait
47 | UIInterfaceOrientationLandscapeLeft
48 | UIInterfaceOrientationLandscapeRight
49 |
50 | UIViewControllerBasedStatusBarAppearance
51 |
52 |
53 |
54 |
--------------------------------------------------------------------------------
/example/android/app/src/main/res/drawable/rn_edit_text_material.xml:
--------------------------------------------------------------------------------
1 |
2 |
16 |
22 |
23 |
24 |
33 |
77 | | Supercluster.ClusterFeatureBase
78 | ): point is Supercluster.ClusterFeature => {
79 | return (
80 | 'properties' in point &&
81 | 'cluster' in (point.properties as any) &&
82 | 'cluster_id' in (point.properties as any)
83 | );
84 | };
85 |
86 | type CoordOptions =
87 | | [number, number]
88 | | { latitude: number; longitude: number }
89 | | { lat: number; lng: number };
90 |
91 | /**
92 | * Utility function to convert coordinates to a GeoJSON feature
93 | * @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 }`
94 | * @param props Additional optional properties to be added to the feature
95 | */
96 | export const coordsToGeoJSONFeature = (
97 | coords: CoordOptions,
98 | props?: T
99 | ): Supercluster.PointFeature => {
100 | let coordinates;
101 | if (Array.isArray(coords)) {
102 | coordinates = coords;
103 | } else if ('latitude' in coords) {
104 | coordinates = [coords.longitude, coords.latitude];
105 | } else {
106 | coordinates = [coords.lng, coords.lat];
107 | }
108 |
109 | return {
110 | type: 'Feature',
111 | geometry: {
112 | coordinates,
113 | type: 'Point',
114 | },
115 | properties: props,
116 | };
117 | };
118 |
--------------------------------------------------------------------------------
/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/src/Comparison.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react-native/no-inline-styles */
2 | import { useState, type 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 | import type { Supercluster } from 'react-native-clusterer';
14 |
15 | const DEFAULT_SIZE = '1000';
16 |
17 | export const Comparison: FunctionComponent<{}> = () => {
18 | const [data, setData] = useState[]>(
19 | getRandomData(DEFAULT_SIZE)
20 | );
21 | const [dataSizeInput, setDataSizeInput] = useState(DEFAULT_SIZE);
22 | const [showType, setType] = useState(null);
23 |
24 | const _handleDefaultDataPress = () => {
25 | setData(parsedPlacesData);
26 | };
27 |
28 | const _handleGenerateDataPress = () => {
29 | setData(getRandomData(dataSizeInput));
30 | };
31 |
32 | return (
33 |
34 | Input Data
35 |
36 |
40 | Use supercluster.js test data
41 |
42 | Or generate random points
43 |
44 | setDataSizeInput(t as any)}
48 | keyboardType={'number-pad'}
49 | value={`${dataSizeInput}`}
50 | multiline={false}
51 | />
52 |
56 | Generate
57 |
58 |
59 | Data size: {data.length}
60 |
61 | setType('tile')}
69 | >
70 | getTile
71 |
72 | setType('cluster')}
79 | >
80 | getClusters
81 |
82 |
83 |
84 | {showType === 'tile' && }
85 | {showType === 'cluster' && }
86 |
87 | );
88 | };
89 |
90 | const styles = StyleSheet.create({
91 | container: {
92 | flex: 1,
93 | marginHorizontal: 10,
94 | gap: 10,
95 | },
96 | h2: {
97 | fontSize: 16,
98 | fontWeight: 'bold',
99 | marginTop: 10,
100 | },
101 | buttonContainer: {
102 | position: 'absolute',
103 | bottom: 20,
104 | left: 0,
105 | right: 0,
106 | flexDirection: 'row',
107 | justifyContent: 'space-around',
108 | width: '100%',
109 | },
110 | defaultDataButton: {
111 | borderRadius: 5,
112 | justifyContent: 'center',
113 | alignItems: 'center',
114 | height: 40,
115 | backgroundColor: '#8eb3ed',
116 | },
117 | button: {
118 | flex: 1,
119 | borderRadius: 5,
120 | justifyContent: 'center',
121 | alignItems: 'center',
122 | height: 40,
123 | backgroundColor: '#8eb3ed',
124 | },
125 | inputContainer: {
126 | flexDirection: 'row',
127 | },
128 | input: {
129 | flex: 1,
130 | borderWidth: 1,
131 | borderRadius: 5,
132 | borderColor: '#8eb3ed',
133 | height: 40,
134 | },
135 | type: {
136 | flex: 1,
137 | borderRadius: 5,
138 | justifyContent: 'center',
139 | alignItems: 'center',
140 | height: 40,
141 | borderWidth: 2,
142 | },
143 | });
144 |
--------------------------------------------------------------------------------
/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 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
31 | interface Options {
32 | /**
33 | * Minimum zoom level at which clusters are generated.
34 | *
35 | * @default 0
36 | */
37 | minZoom?: number;
38 | /**
39 | * Maximum zoom level at which clusters are generated.
40 | *
41 | * @default 16
42 | */
43 | maxZoom?: number;
44 | /**
45 | * Minimum number of points to form a cluster.
46 | *
47 | * @default 2
48 | */
49 | minPoints?: number;
50 | /**
51 | * Cluster radius, in pixels.
52 | *
53 | * @default 40
54 | */
55 | radius?: number;
56 | /**
57 | * (Tiles) Tile extent. Radius is calculated relative to this value.
58 | *
59 | * @default 512
60 | */
61 | extent?: number;
62 | /**
63 | * Whether to generate ids for input features in vector tiles.
64 | *
65 | * @default false
66 | */
67 | generateId?: boolean;
68 | /**
69 | * Size of the KD-tree leaf node. Affects performance.
70 | *
71 | * @default 64
72 | */
73 | // nodeSize?: number | undefined;
74 | /**
75 | * Whether timing info should be logged.
76 | *
77 | * @default false
78 | */
79 | // log?: boolean | undefined;
80 | /**
81 | * A function that returns cluster properties corresponding to a single point.
82 | *
83 | * @example
84 | * (props) => ({sum: props.myValue})
85 | */
86 | // map?: ((props: P) => C) | undefined;
87 | /**
88 | * A reduce function that merges properties of two clusters into one.
89 | *
90 | * @example
91 | * (accumulated, props) => { accumulated.sum += props.sum; }
92 | */
93 | // reduce?: ((accumulated: C, props: Readonly) => void) | undefined;
94 | }
95 | /**
96 | * Default properties type, allowing any properties.
97 | * Try to avoid this for better typesafety by using proper types.
98 | */
99 | interface AnyProps {
100 | [name: string]: any;
101 | }
102 | /**
103 | * [GeoJSON Feature](https://tools.ietf.org/html/rfc7946#section-3.2),
104 | * with the geometry being a
105 | * [GeoJSON Point](https://tools.ietf.org/html/rfc7946#section-3.1.2).
106 | */
107 | type PointFeature = GeoJSON.Feature;
108 | interface ClusterProperties {
109 | /**
110 | * Always `true` to indicate that the Feature is a Cluster and not
111 | * an individual point.
112 | */
113 | cluster: true;
114 | /** Cluster ID */
115 | cluster_id: number;
116 | /** Number of points in the cluster. */
117 | point_count: number;
118 | /**
119 | * Abbreviated number of points in the cluster as string if the number
120 | * is 1000 or greater (e.g. `1.3k` if the number is `1298`).
121 | */
122 | point_count_abbreviated: string;
123 | }
124 |
125 | type ClusterFeatureBase = PointFeature;
126 |
127 | type ClustererClusterProperties = {
128 | getExpansionRegion: () => Region;
129 | };
130 |
131 | type ClusterFeature = PointFeature<
132 | ClusterProperties & C & ClustererClusterProperties
133 | >;
134 |
135 | type PointOrClusterFeature = PointFeature | ClusterFeature;
136 | interface TileFeature {
137 | type: 1;
138 | geometry: Array<[number, number]>;
139 | tags: (ClusterProperties & C) | P;
140 | }
141 | interface Tile {
142 | features: Array>;
143 | }
144 | }
145 |
146 | export type { Supercluster };
147 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-native-clusterer",
3 | "version": "5.0.2",
4 | "description": "React Native clustering library using C++ Supercluster implementation",
5 | "main": "./lib/module/index.js",
6 | "types": "./lib/typescript/src/index.d.ts",
7 | "exports": {
8 | ".": {
9 | "source": "./src/index.tsx",
10 | "types": "./lib/typescript/src/index.d.ts",
11 | "default": "./lib/module/index.js"
12 | },
13 | "./package.json": "./package.json"
14 | },
15 | "files": [
16 | "src",
17 | "lib",
18 | "android",
19 | "ios",
20 | "cpp",
21 | "nitrogen",
22 | "nitro.json",
23 | "*.podspec",
24 | "react-native.config.js",
25 | "!ios/build",
26 | "!android/build",
27 | "!android/gradle",
28 | "!android/gradlew",
29 | "!android/gradlew.bat",
30 | "!android/local.properties",
31 | "!**/__tests__",
32 | "!**/__fixtures__",
33 | "!**/__mocks__",
34 | "!**/.*"
35 | ],
36 | "scripts": {
37 | "example": "yarn workspace react-native-clusterer-example",
38 | "test": "jest",
39 | "typecheck": "tsc",
40 | "lint": "eslint \"**/*.{js,ts,tsx}\"",
41 | "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
42 | "prepare": "bob build",
43 | "release": "release-it --only-version",
44 | "nitrogen": "nitrogen",
45 | "nitrogen:ios": "nitrogen && cd example/ios && pod install && cd ../.."
46 | },
47 | "keywords": [
48 | "react-native",
49 | "ios",
50 | "android"
51 | ],
52 | "repository": {
53 | "type": "git",
54 | "url": "git+https://github.com/JiriHoffmann/react-native-clusterer.git"
55 | },
56 | "author": "Jiri Hoffmann (https://github.com/JiriHoffmann)",
57 | "license": "MIT",
58 | "bugs": {
59 | "url": "https://github.com/JiriHoffmann/react-native-clusterer/issues"
60 | },
61 | "homepage": "https://github.com/JiriHoffmann/react-native-clusterer#readme",
62 | "publishConfig": {
63 | "registry": "https://registry.npmjs.org/"
64 | },
65 | "devDependencies": {
66 | "@commitlint/config-conventional": "^19.8.1",
67 | "@eslint/compat": "^1.3.2",
68 | "@eslint/eslintrc": "^3.3.1",
69 | "@eslint/js": "^9.35.0",
70 | "@evilmartians/lefthook": "^1.12.3",
71 | "@react-native/babel-preset": "0.81.1",
72 | "@react-native/eslint-config": "^0.81.1",
73 | "@release-it/conventional-changelog": "^10.0.1",
74 | "@types/geojson": "^7946.0.8",
75 | "@types/jest": "^29.5.14",
76 | "@types/mapbox__geo-viewport": "0.4.1",
77 | "@types/react": "^19.1.0",
78 | "commitlint": "^19.8.1",
79 | "del-cli": "^6.0.0",
80 | "eslint": "^9.35.0",
81 | "eslint-config-prettier": "^10.1.8",
82 | "eslint-plugin-prettier": "^5.5.4",
83 | "jest": "^29.7.0",
84 | "nitrogen": "^0.31.5",
85 | "prettier": "^3.6.2",
86 | "react": "19.1.0",
87 | "react-native": "0.81.4",
88 | "react-native-builder-bob": "^0.40.13",
89 | "react-native-nitro-modules": "^0.31.5",
90 | "release-it": "^19.0.4",
91 | "turbo": "^2.5.6",
92 | "typescript": "^5.9.2"
93 | },
94 | "peerDependencies": {
95 | "react": "*",
96 | "react-native": "*",
97 | "react-native-nitro-modules": "^0.31.5"
98 | },
99 | "workspaces": [
100 | "example"
101 | ],
102 | "packageManager": "yarn@3.6.1",
103 | "jest": {
104 | "preset": "react-native",
105 | "modulePathIgnorePatterns": [
106 | "/example/node_modules",
107 | "/lib/"
108 | ]
109 | },
110 | "commitlint": {
111 | "extends": [
112 | "@commitlint/config-conventional"
113 | ]
114 | },
115 | "release-it": {
116 | "git": {
117 | "commitMessage": "chore: release ${version}",
118 | "tagName": "v${version}"
119 | },
120 | "npm": {
121 | "publish": true
122 | },
123 | "github": {
124 | "release": true
125 | },
126 | "plugins": {
127 | "@release-it/conventional-changelog": {
128 | "preset": {
129 | "name": "angular"
130 | }
131 | }
132 | }
133 | },
134 | "prettier": {
135 | "quoteProps": "consistent",
136 | "singleQuote": true,
137 | "tabWidth": 2,
138 | "trailingComma": "es5",
139 | "useTabs": false
140 | },
141 | "react-native-builder-bob": {
142 | "source": "src",
143 | "output": "lib",
144 | "targets": [
145 | [
146 | "custom",
147 | {
148 | "script": "nitrogen",
149 | "clean": "nitrogen/"
150 | }
151 | ],
152 | [
153 | "module",
154 | {
155 | "esm": true
156 | }
157 | ],
158 | [
159 | "typescript",
160 | {
161 | "project": "tsconfig.build.json"
162 | }
163 | ]
164 | ]
165 | },
166 | "create-react-native-library": {
167 | "languages": "kotlin-swift",
168 | "type": "nitro-module",
169 | "version": "0.54.5"
170 | },
171 | "dependencies": {
172 | "@mapbox/geo-viewport": "^0.5.0"
173 | }
174 | }
175 |
--------------------------------------------------------------------------------
/example/android/app/build.gradle:
--------------------------------------------------------------------------------
1 | apply plugin: "com.android.application"
2 | apply plugin: "org.jetbrains.kotlin.android"
3 | apply plugin: "com.facebook.react"
4 |
5 | /**
6 | * This is the configuration block to customize your React Native Android app.
7 | * By default you don't need to apply any configuration, just uncomment the lines you need.
8 | */
9 | react {
10 | /* Folders */
11 | // The root of your project, i.e. where "package.json" lives. Default is '../..'
12 | // root = file("../../")
13 | // The folder where the react-native NPM package is. Default is ../../node_modules/react-native
14 | // reactNativeDir = file("../../node_modules/react-native")
15 | // The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
16 | // codegenDir = file("../../node_modules/@react-native/codegen")
17 | // The cli.js file which is the React Native CLI entrypoint. Default is ../../node_modules/react-native/cli.js
18 | // cliFile = file("../../node_modules/react-native/cli.js")
19 |
20 | /* Variants */
21 | // The list of variants to that are debuggable. For those we're going to
22 | // skip the bundling of the JS bundle and the assets. By default is just 'debug'.
23 | // If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
24 | // debuggableVariants = ["liteDebug", "prodDebug"]
25 |
26 | /* Bundling */
27 | // A list containing the node command and its flags. Default is just 'node'.
28 | // nodeExecutableAndArgs = ["node"]
29 | //
30 | // The command to run when bundling. By default is 'bundle'
31 | // bundleCommand = "ram-bundle"
32 | //
33 | // The path to the CLI configuration file. Default is empty.
34 | // bundleConfig = file(../rn-cli.config.js)
35 | //
36 | // The name of the generated asset file containing your JS bundle
37 | // bundleAssetName = "MyApplication.android.bundle"
38 | //
39 | // The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
40 | // entryFile = file("../js/MyApplication.android.js")
41 | //
42 | // A list of extra flags to pass to the 'bundle' commands.
43 | // See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
44 | // extraPackagerArgs = []
45 |
46 | /* Hermes Commands */
47 | // The hermes compiler command to run. By default it is 'hermesc'
48 | // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
49 | //
50 | // The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
51 | // hermesFlags = ["-O", "-output-source-map"]
52 |
53 | /* Autolinking */
54 | autolinkLibrariesWithApp()
55 | }
56 |
57 | /**
58 | * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
59 | */
60 | def enableProguardInReleaseBuilds = false
61 |
62 | /**
63 | * The preferred build flavor of JavaScriptCore (JSC)
64 | *
65 | * For example, to use the international variant, you can use:
66 | * `def jscFlavor = io.github.react-native-community:jsc-android-intl:2026004.+`
67 | *
68 | * The international variant includes ICU i18n library and necessary data
69 | * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
70 | * give correct results when using with locales other than en-US. Note that
71 | * this variant is about 6MiB larger per architecture than default.
72 | */
73 | def jscFlavor = 'io.github.react-native-community:jsc-android:2026004.+'
74 |
75 | android {
76 | ndkVersion rootProject.ext.ndkVersion
77 | buildToolsVersion rootProject.ext.buildToolsVersion
78 | compileSdk rootProject.ext.compileSdkVersion
79 |
80 | namespace "clusterer.example"
81 | defaultConfig {
82 | applicationId "clusterer.example"
83 | minSdkVersion rootProject.ext.minSdkVersion
84 | targetSdkVersion rootProject.ext.targetSdkVersion
85 | versionCode 1
86 | versionName "1.0"
87 | }
88 | signingConfigs {
89 | debug {
90 | storeFile file('debug.keystore')
91 | storePassword 'android'
92 | keyAlias 'androiddebugkey'
93 | keyPassword 'android'
94 | }
95 | }
96 | buildTypes {
97 | debug {
98 | signingConfig signingConfigs.debug
99 | }
100 | release {
101 | // Caution! In production, you need to generate your own keystore file.
102 | // see https://reactnative.dev/docs/signed-apk-android.
103 | signingConfig signingConfigs.debug
104 | minifyEnabled enableProguardInReleaseBuilds
105 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
106 | }
107 | }
108 | }
109 |
110 | dependencies {
111 | // The version of react-native is set by the React Native Gradle Plugin
112 | implementation("com.facebook.react:react-android")
113 |
114 | if (hermesEnabled.toBoolean()) {
115 | implementation("com.facebook.react:hermes-android")
116 | } else {
117 | implementation jscFlavor
118 | }
119 | }
120 |
--------------------------------------------------------------------------------
/example/src/GetTile.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react-native/no-inline-styles */
2 | import { type 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, 10);
27 | const yInt = parseInt(y, 10);
28 | const zInt = parseInt(z, 10);
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 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing
2 |
3 | Contributions are always welcome, no matter how large or small!
4 |
5 | We want this community to be friendly and respectful to each other. Please follow it in all your interactions with the project. Before contributing, please read the [code of conduct](./CODE_OF_CONDUCT.md).
6 |
7 | ## Development workflow
8 |
9 | This project is a monorepo managed using [Yarn workspaces](https://yarnpkg.com/features/workspaces). It contains the following packages:
10 |
11 | - The library package in the root directory.
12 | - An example app in the `example/` directory.
13 |
14 | To get started with the project, make sure you have the correct version of [Node.js](https://nodejs.org/) installed. See the [`.nvmrc`](./.nvmrc) file for the version used in this project.
15 |
16 | Run `yarn` in the root directory to install the required dependencies for each package:
17 |
18 | ```sh
19 | yarn
20 | ```
21 |
22 | > Since the project relies on Yarn workspaces, you cannot use [`npm`](https://github.com/npm/cli) for development without manually migrating.
23 |
24 | This project uses Nitro Modules. If you're not familiar with how Nitro works, make sure to check the [Nitro Modules Docs](https://nitro.margelo.com/).
25 |
26 | You need to run [Nitrogen](https://nitro.margelo.com/docs/nitrogen) to generate the boilerplate code required for this project. The example app will not build without this step.
27 |
28 | Run **Nitrogen** in following cases:
29 |
30 | - When you make changes to any `*.nitro.ts` files.
31 | - When running the project for the first time (since the generated files are not committed to the repository).
32 |
33 | To invoke **Nitrogen**, use the following command:
34 |
35 | ```sh
36 | yarn nitrogen
37 | ```
38 |
39 | The [example app](/example/) demonstrates usage of the library. You need to run it to test any changes you make.
40 |
41 | It is configured to use the local version of the library, so any changes you make to the library's source code will be reflected in the example app. Changes to the library's JavaScript code will be reflected in the example app without a rebuild, but native code changes will require a rebuild of the example app.
42 |
43 | If you want to use Android Studio or Xcode to edit the native code, you can open the `example/android` or `example/ios` directories respectively in those editors. To edit the Objective-C or Swift files, open `example/ios/ClustererExample.xcworkspace` in Xcode and find the source files at `Pods > Development Pods > react-native-clusterer`.
44 |
45 | To edit the Java or Kotlin files, open `example/android` in Android studio and find the source files at `react-native-clusterer` under `Android`.
46 |
47 | You can use various commands from the root directory to work with the project.
48 |
49 | To start the packager:
50 |
51 | ```sh
52 | yarn example start
53 | ```
54 |
55 | To run the example app on Android:
56 |
57 | ```sh
58 | yarn example android
59 | ```
60 |
61 | To run the example app on iOS:
62 |
63 | ```sh
64 | yarn example ios
65 | ```
66 |
67 | To confirm that the app is running with the new architecture, you can check the Metro logs for a message like this:
68 |
69 | ```sh
70 | Running "ClustererExample" with {"fabric":true,"initialProps":{"concurrentRoot":true},"rootTag":1}
71 | ```
72 |
73 | Note the `"fabric":true` and `"concurrentRoot":true` properties.
74 |
75 | Make sure your code passes TypeScript and ESLint. Run the following to verify:
76 |
77 | ```sh
78 | yarn typecheck
79 | yarn lint
80 | ```
81 |
82 | To fix formatting errors, run the following:
83 |
84 | ```sh
85 | yarn lint --fix
86 | ```
87 |
88 | Remember to add tests for your change if possible. Run the unit tests by:
89 |
90 | ```sh
91 | yarn test
92 | ```
93 |
94 | ### Commit message convention
95 |
96 | We follow the [conventional commits specification](https://www.conventionalcommits.org/en) for our commit messages:
97 |
98 | - `fix`: bug fixes, e.g. fix crash due to deprecated method.
99 | - `feat`: new features, e.g. add new method to the module.
100 | - `refactor`: code refactor, e.g. migrate from class components to hooks.
101 | - `docs`: changes into documentation, e.g. add usage example for the module.
102 | - `test`: adding or updating tests, e.g. add integration tests using detox.
103 | - `chore`: tooling changes, e.g. change CI config.
104 |
105 | Our pre-commit hooks verify that your commit message matches this format when committing.
106 |
107 | ### Linting and tests
108 |
109 | [ESLint](https://eslint.org/), [Prettier](https://prettier.io/), [TypeScript](https://www.typescriptlang.org/)
110 |
111 | 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.
112 |
113 | Our pre-commit hooks verify that the linter and tests pass when committing.
114 |
115 | ### Publishing to npm
116 |
117 | 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.
118 |
119 | To publish new versions, run the following:
120 |
121 | ```sh
122 | yarn release
123 | ```
124 |
125 | ### Scripts
126 |
127 | The `package.json` file contains various scripts for common tasks:
128 |
129 | - `yarn`: setup project by installing dependencies.
130 | - `yarn typecheck`: type-check files with TypeScript.
131 | - `yarn lint`: lint files with ESLint.
132 | - `yarn test`: run unit tests with Jest.
133 | - `yarn example start`: start the Metro server for the example app.
134 | - `yarn example android`: run the example app on Android.
135 | - `yarn example ios`: run the example app on iOS.
136 |
137 | ### Sending a pull request
138 |
139 | > **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).
140 |
141 | When you're sending a pull request:
142 |
143 | - Prefer small pull requests focused on one change.
144 | - Verify that linters and tests are passing.
145 | - Review the documentation to make sure it looks good.
146 | - Follow the pull request template when opening a pull request.
147 | - For pull requests that change the API or implementation, discuss with maintainers first by opening an issue.
148 |
--------------------------------------------------------------------------------
/cpp/HybridClusterer.cpp:
--------------------------------------------------------------------------------
1 | #include "HybridClusterer.hpp"
2 |
3 | #include "clustererJSIHelpers.hpp"
4 |
5 | namespace margelo::nitro::clusterer {
6 | jsi::Value HybridClusterer::load(jsi::Runtime &rt, const jsi::Value &_,
7 | const jsi::Value *args, size_t count) {
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 | return jsi::Value();
38 | }
39 |
40 | jsi::Value HybridClusterer::getClusters(jsi::Runtime &rt,
41 | const jsi::Value &thisValue,
42 | const jsi::Value *args, size_t count) {
43 | if(count != 2 || !args[0].asObject(rt).isArray(rt) || !args[1].isNumber())
44 | throw jsi::JSError(rt,
45 | "React-Native-Clusterer: getClusters "
46 | "expects an array and a number");
47 |
48 | double bbox[4];
49 |
50 | try {
51 | auto jsibbox = args[0].asObject(rt).asArray(rt);
52 | bbox[0] = jsibbox.getValueAtIndex(rt, 0).asNumber();
53 | bbox[1] = jsibbox.getValueAtIndex(rt, 1).asNumber();
54 | bbox[2] = jsibbox.getValueAtIndex(rt, 2).asNumber();
55 | bbox[3] = jsibbox.getValueAtIndex(rt, 3).asNumber();
56 | } catch(exception &e) {
57 | throw jsi::JSError(rt,
58 | "React-Native-Clusterer: GetClusters error, make sure "
59 | "boundingBox is an array of 4 numbers");
60 | }
61 |
62 | int zoom = (int)args[1].asNumber();
63 |
64 | auto clusters = instance.value()->getClusters(bbox, zoom);
65 | jsi::Array result = jsi::Array(rt, clusters.size());
66 |
67 | int i = 0;
68 | for(auto &cluster : clusters) {
69 | jsi::Object jsiCluster = jsi::Object(rt);
70 | clusterToJSI(rt, jsiCluster, cluster, featuresInput.value());
71 | result.setValueAtIndex(rt, i, jsiCluster);
72 | i++;
73 | }
74 | return result;
75 | }
76 |
77 | jsi::Value HybridClusterer::getTile(jsi::Runtime &rt,
78 | const jsi::Value &thisValue,
79 | const jsi::Value *args, size_t count) {
80 | if(count != 3 || !args[0].isNumber() || !args[1].isNumber() ||
81 | !args[2].isNumber())
82 | throw jsi::JSError(rt,
83 | "React-Native-Clusterer: getTile "
84 | "expects 3 numbers as arguments");
85 |
86 | int zoom = (int)args[0].asNumber();
87 | int x = (int)args[1].asNumber();
88 | int y = (int)args[2].asNumber();
89 |
90 | auto tiles = instance.value()->getTile(zoom, x, y);
91 |
92 | jsi::Array result = jsi::Array(rt, tiles.size());
93 | int i = 0;
94 | for(auto &tile : tiles) {
95 | jsi::Object jsiTile = jsi::Object(rt);
96 | tileToJSI(rt, jsiTile, tile, featuresInput.value());
97 | result.setValueAtIndex(rt, i, jsiTile);
98 | i++;
99 | }
100 | return result;
101 | }
102 |
103 | jsi::Value HybridClusterer::getChildren(jsi::Runtime &rt,
104 | const jsi::Value &thisValue,
105 | const jsi::Value *args, size_t count) {
106 | if(count != 1 || !args[0].isNumber())
107 | throw jsi::JSError(rt,
108 | "React-Native-Clusterer: getChildren "
109 | "expects a number for cluster_id");
110 |
111 | auto cluster_id = (int)args[0].asNumber();
112 | auto children = instance.value()->getChildren(cluster_id);
113 | jsi::Array result = jsi::Array(rt, children.size());
114 |
115 | int i = 0;
116 | for(auto &child : children) {
117 | jsi::Object jsiChild = jsi::Object(rt);
118 | clusterToJSI(rt, jsiChild, child, featuresInput.value());
119 | result.setValueAtIndex(rt, i, jsiChild);
120 | i++;
121 | }
122 | return result;
123 | }
124 |
125 | jsi::Value HybridClusterer::getLeaves(jsi::Runtime &rt,
126 | const jsi::Value &thisValue,
127 | const jsi::Value *args, size_t count) {
128 | if(count < 1 || count > 3)
129 | throw jsi::JSError(rt,
130 | "React-Native-Clusterer: getLeaves "
131 | "expects at least 1 argument, at most 3");
132 |
133 | if(!args[0].isNumber())
134 | throw jsi::JSError(rt,
135 | "React-Native-Clusterer: getLeaves "
136 | "first argument must be a number");
137 |
138 | if(count >= 2 && !args[1].isNumber())
139 | throw jsi::JSError(rt,
140 | "React-Native-Clusterer: getLeaves "
141 | "second argument must be a number");
142 |
143 | if(count == 3 && !args[2].isNumber())
144 | throw jsi::JSError(rt,
145 | "React-Native-Clusterer: getLeaves "
146 | "third argument must be a number");
147 |
148 | auto cluster_id = (int)args[0].asNumber();
149 | auto limit = count >= 2 ? (int)args[1].asNumber() : 10;
150 | auto offset = count == 3 ? (int)args[2].asNumber() : 0;
151 |
152 | auto leaves = instance.value()->getLeaves(cluster_id, limit, offset);
153 | jsi::Array result = jsi::Array(rt, leaves.size());
154 |
155 | int i = 0;
156 | for(auto &leaf : leaves) {
157 | jsi::Object jsiLeaf = jsi::Object(rt);
158 | clusterToJSI(rt, jsiLeaf, leaf, featuresInput.value());
159 | result.setValueAtIndex(rt, i, jsiLeaf);
160 | i++;
161 | }
162 |
163 | return result;
164 | }
165 |
166 | jsi::Value HybridClusterer::getClusterExpansionZoom(jsi::Runtime &rt,
167 | const jsi::Value &thisValue,
168 | const jsi::Value *args,
169 | size_t count) {
170 | if(count != 1 || !args[0].isNumber())
171 | throw jsi::JSError(
172 | rt,
173 | "React-Native-Clusterer: getClusterExpansionZoom expects "
174 | "number for cluster_id");
175 |
176 | auto cluster_id = (int)args[0].asNumber();
177 |
178 | return (int)instance.value()->getClusterExpansionZoom(cluster_id);
179 | }
180 |
181 | } // namespace margelo::nitro::clusterer
182 |
--------------------------------------------------------------------------------
/src/Supercluster.ts:
--------------------------------------------------------------------------------
1 | // import { NativeModules, Platform } from 'react-native';
2 | import GeoViewport from '@mapbox/geo-viewport';
3 | import {
4 | getMarkersCoordinates,
5 | getMarkersRegion,
6 | isClusterFeature,
7 | regionToBBox,
8 | } from './utils';
9 |
10 | import type * as GeoJSON from 'geojson';
11 | import type { MapDimensions, Region } from './types';
12 | import type { Supercluster } from './types';
13 |
14 | import { NitroModules } from 'react-native-nitro-modules';
15 | import type { Clusterer } from './Clusterer.nitro';
16 |
17 | const defaultOptions = {
18 | minZoom: 0, // min zoom to generate clusters on
19 | maxZoom: 16, // max zoom level to cluster the points on
20 | minPoints: 2, // minimum points to form a cluster
21 | radius: 40, // cluster radius in pixels
22 | extent: 512, // tile extent (radius is calculated relative to it)
23 | log: false, // whether to log timing info
24 | generateId: false, // whether to generate numeric ids for input features (in vector tiles)
25 | };
26 |
27 | export default class SuperclusterClass<
28 | P extends GeoJSON.GeoJsonProperties = Supercluster.AnyProps,
29 | C extends GeoJSON.GeoJsonProperties = Supercluster.AnyProps,
30 | > {
31 | private clusterer: any | null = null;
32 | private options: Required>;
33 |
34 | constructor(options?: Supercluster.Options) {
35 | this.options = { ...defaultOptions, ...options };
36 | }
37 |
38 | /**
39 | * Loads an array of GeoJSON Feature objects. Each feature's geometry
40 | * must be a GeoJSON Point. Once loaded, index is immutable.
41 | *
42 | * @param points Array of GeoJSON Features, the geometries being GeoJSON Points.
43 | */
44 | load(points: Array>): this {
45 | if (this.clusterer) {
46 | throw new Error(
47 | 'React-Native-Clusterer: The .load() method can only be called once.'
48 | );
49 | }
50 | this.clusterer = NitroModules.createHybridObject('Clusterer');
51 | this.clusterer.load(points, this.options);
52 | return this;
53 | }
54 |
55 | /**
56 | * Returns an array of clusters and points as `GeoJSON.Feature` objects
57 | * for the given bounding box (`bbox`) and zoom level (`zoom`).
58 | *
59 | * @param bbox Bounding box (`[westLng, southLat, eastLng, northLat]`).
60 | * @param zoom Zoom level.
61 | */
62 | getClusters(
63 | bbox: GeoJSON.BBox,
64 | zoom: number
65 | ): Array | Supercluster.PointFeature> {
66 | this.throwIfNotInitialized();
67 |
68 | return this.clusterer
69 | .getClusters(bbox, zoom)
70 | .map(this.addExpansionRegionToCluster);
71 | }
72 |
73 | /**
74 | * Returns an array of clusters and points as `GeoJSON.Feature` objects
75 | * for the given bounding box (`bbox`) and zoom level (`zoom`).
76 | *
77 | * @param bbox Bounding box (`[westLng, southLat, eastLng, northLat]`).
78 | * @param zoom Zoom level.
79 | */
80 | getClustersFromRegion(
81 | region: Region,
82 | mapDimensions: MapDimensions
83 | ): Array | Supercluster.PointFeature> {
84 | this.throwIfNotInitialized();
85 |
86 | const bbox = regionToBBox(region);
87 |
88 | if (region.longitudeDelta >= 40)
89 | return this.clusterer
90 | .getClusters(bbox, this.options.minZoom)
91 | .map(this.addExpansionRegionToCluster);
92 |
93 | const viewport = GeoViewport.viewport(
94 | bbox,
95 | [mapDimensions.width, mapDimensions.height],
96 | this.options.minZoom,
97 | this.options.maxZoom + 1,
98 | this.options.extent
99 | );
100 |
101 | return this.clusterer
102 | .getClusters(bbox, viewport.zoom)
103 | .map(this.addExpansionRegionToCluster);
104 | }
105 |
106 | /**
107 | * For a given zoom and x/y coordinates, returns a
108 | * [geojson-vt](https://github.com/mapbox/geojson-vt)-compatible JSON
109 | * tile object with cluster any point features.
110 | */
111 | getTile(x: number, y: number, zoom: number): Supercluster.Tile | null {
112 | this.throwIfNotInitialized();
113 |
114 | return { features: this.clusterer.getTile(x, y, zoom) };
115 | }
116 |
117 | /**
118 | * Returns the children of a cluster (on the next zoom level).
119 | *
120 | * @param clusterId Cluster ID (`cluster_id` value from feature properties).
121 | * @throws {Error} If `clusterId` does not exist.
122 | */
123 | getChildren(
124 | clusterId: number
125 | ): Array | Supercluster.PointFeature> {
126 | this.throwIfNotInitialized();
127 |
128 | return this.clusterer.getChildren(clusterId);
129 | }
130 |
131 | /**
132 | * Returns all the points of a cluster (with pagination support).
133 | *
134 | * @param clusterId Cluster ID (`cluster_id` value from feature properties).
135 | * @param limit The number of points to return (set to `Infinity` for all points).
136 | * @param offset The amount of points to skip (for pagination).
137 | */
138 | getLeaves(
139 | clusterId: number,
140 | limit?: number,
141 | offset?: number
142 | ): Array> {
143 | this.throwIfNotInitialized();
144 |
145 | return this.clusterer.getLeaves(clusterId, limit ?? 10, offset ?? 0);
146 | }
147 |
148 | /**
149 | * Returns the zoom level on which the cluster expands into several
150 | * children (useful for "click to zoom" feature).
151 | *
152 | * @param clusterId Cluster ID (`cluster_id` value from feature properties).
153 | */
154 | getClusterExpansionZoom(clusterId: number): number {
155 | this.throwIfNotInitialized();
156 |
157 | return this.clusterer.getClusterExpansionZoom(clusterId);
158 | }
159 |
160 | /**
161 | * Returns a region containing the center of all the points in a cluster
162 | * and the delta value by which it should be zoomed out to see all the points.
163 | * (usefull for animating a MapView after a cluster press).
164 | * @param clusterId Cluster ID (`cluster_id` value from feature properties).
165 | */
166 | getClusterExpansionRegion = (clusterId: number): Region => {
167 | this.throwIfNotInitialized();
168 |
169 | const clusterMarkersCoordinates = this.getMarkersInCluster(clusterId).map(
170 | getMarkersCoordinates
171 | );
172 |
173 | return getMarkersRegion(clusterMarkersCoordinates);
174 | };
175 |
176 | private throwIfNotInitialized(): void {
177 | if (!this.clusterer) {
178 | throw new Error(
179 | 'React-Native-Clusterer: this Supercluster has not features. Use the load() method to add features.'
180 | );
181 | }
182 | }
183 |
184 | private getMarkersInCluster = (
185 | clusterId: number
186 | ): Array> => {
187 | const clusterChildren = this.getChildren(clusterId);
188 |
189 | if (clusterChildren.length > 1) {
190 | return clusterChildren;
191 | }
192 | return this.getMarkersInCluster(clusterChildren[0]!.id as number);
193 | };
194 |
195 | private addExpansionRegionToCluster = (
196 | feature: Supercluster.PointFeature | Supercluster.ClusterFeatureBase
197 | ) => {
198 | if (isClusterFeature(feature)) {
199 | feature.properties.getExpansionRegion = () =>
200 | this.getClusterExpansionRegion(feature.properties!.cluster_id);
201 | }
202 | return feature;
203 | };
204 | }
205 |
--------------------------------------------------------------------------------
/cpp/clustererJSIHelpers.cpp:
--------------------------------------------------------------------------------
1 | #include "clustererJSIHelpers.hpp"
2 |
3 | namespace margelo::nitro::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 |
--------------------------------------------------------------------------------
/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 | # SPDX-License-Identifier: Apache-2.0
19 | #
20 |
21 | ##############################################################################
22 | #
23 | # Gradle start up script for POSIX generated by Gradle.
24 | #
25 | # Important for running:
26 | #
27 | # (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
28 | # noncompliant, but you have some other compliant shell such as ksh or
29 | # bash, then to run this script, type that shell name before the whole
30 | # command line, like:
31 | #
32 | # ksh Gradle
33 | #
34 | # Busybox and similar reduced shells will NOT work, because this script
35 | # requires all of these POSIX shell features:
36 | # * functions;
37 | # * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
38 | # «${var#prefix}», «${var%suffix}», and «$( cmd )»;
39 | # * compound commands having a testable exit status, especially «case»;
40 | # * various built-in commands including «command», «set», and «ulimit».
41 | #
42 | # Important for patching:
43 | #
44 | # (2) This script targets any POSIX shell, so it avoids extensions provided
45 | # by Bash, Ksh, etc; in particular arrays are avoided.
46 | #
47 | # The "traditional" practice of packing multiple parameters into a
48 | # space-separated string is a well documented source of bugs and security
49 | # problems, so this is (mostly) avoided, by progressively accumulating
50 | # options in "$@", and eventually passing that to Java.
51 | #
52 | # Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
53 | # and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
54 | # see the in-line comments for details.
55 | #
56 | # There are tweaks for specific operating systems such as AIX, CygWin,
57 | # Darwin, MinGW, and NonStop.
58 | #
59 | # (3) This script is generated from the Groovy template
60 | # https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
61 | # within the Gradle project.
62 | #
63 | # You can find Gradle at https://github.com/gradle/gradle/.
64 | #
65 | ##############################################################################
66 |
67 | # Attempt to set APP_HOME
68 |
69 | # Resolve links: $0 may be a link
70 | app_path=$0
71 |
72 | # Need this for daisy-chained symlinks.
73 | while
74 | APP_HOME=${app_path%"${app_path##*/}"} # leaves a trailing /; empty if no leading path
75 | [ -h "$app_path" ]
76 | do
77 | ls=$( ls -ld "$app_path" )
78 | link=${ls#*' -> '}
79 | case $link in #(
80 | /*) app_path=$link ;; #(
81 | *) app_path=$APP_HOME$link ;;
82 | esac
83 | done
84 |
85 | # This is normally unused
86 | # shellcheck disable=SC2034
87 | APP_BASE_NAME=${0##*/}
88 | # Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
89 | APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s\n' "$PWD" ) || exit
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="\\\"\\\""
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 | if ! command -v java >/dev/null 2>&1
137 | then
138 | die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
139 |
140 | Please set the JAVA_HOME variable in your environment to match the
141 | location of your Java installation."
142 | fi
143 | fi
144 |
145 | # Increase the maximum file descriptors if we can.
146 | if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
147 | case $MAX_FD in #(
148 | max*)
149 | # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
150 | # shellcheck disable=SC2039,SC3045
151 | MAX_FD=$( ulimit -H -n ) ||
152 | warn "Could not query maximum file descriptor limit"
153 | esac
154 | case $MAX_FD in #(
155 | '' | soft) :;; #(
156 | *)
157 | # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
158 | # shellcheck disable=SC2039,SC3045
159 | ulimit -n "$MAX_FD" ||
160 | warn "Could not set maximum file descriptor limit to $MAX_FD"
161 | esac
162 | fi
163 |
164 | # Collect all arguments for the java command, stacking in reverse order:
165 | # * args from the command line
166 | # * the main class name
167 | # * -classpath
168 | # * -D...appname settings
169 | # * --module-path (only if needed)
170 | # * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
171 |
172 | # For Cygwin or MSYS, switch paths to Windows format before running java
173 | if "$cygwin" || "$msys" ; then
174 | APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
175 | CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
176 |
177 | JAVACMD=$( cygpath --unix "$JAVACMD" )
178 |
179 | # Now convert the arguments - kludge to limit ourselves to /bin/sh
180 | for arg do
181 | if
182 | case $arg in #(
183 | -*) false ;; # don't mess with options #(
184 | /?*) t=${arg#/} t=/${t%%/*} # looks like a POSIX filepath
185 | [ -e "$t" ] ;; #(
186 | *) false ;;
187 | esac
188 | then
189 | arg=$( cygpath --path --ignore --mixed "$arg" )
190 | fi
191 | # Roll the args list around exactly as many times as the number of
192 | # args, so each arg winds up back in the position where it started, but
193 | # possibly modified.
194 | #
195 | # NB: a `for` loop captures its iteration list before it begins, so
196 | # changing the positional parameters here affects neither the number of
197 | # iterations, nor the values presented in `arg`.
198 | shift # remove old arg
199 | set -- "$@" "$arg" # push replacement arg
200 | done
201 | fi
202 |
203 |
204 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
205 | DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
206 |
207 | # Collect all arguments for the java command:
208 | # * DEFAULT_JVM_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
209 | # and any embedded shellness will be escaped.
210 | # * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
211 | # treated as '${Hostname}' itself on the command line.
212 |
213 | set -- \
214 | "-Dorg.gradle.appname=$APP_BASE_NAME" \
215 | -classpath "$CLASSPATH" \
216 | -jar "$APP_HOME/gradle/wrapper/gradle-wrapper.jar" \
217 | "$@"
218 |
219 | # Stop when "xargs" is not available.
220 | if ! command -v xargs >/dev/null 2>&1
221 | then
222 | die "xargs is not available"
223 | fi
224 |
225 | # Use "xargs" to parse quoted args.
226 | #
227 | # With -n1 it outputs one arg per line, with the quotes and backslashes removed.
228 | #
229 | # In Bash we could simply go:
230 | #
231 | # readarray ARGS < <( xargs -n1 <<<"$var" ) &&
232 | # set -- "${ARGS[@]}" "$@"
233 | #
234 | # but POSIX shell has neither arrays nor command substitution, so instead we
235 | # post-process each arg (as a line of input to sed) to backslash-escape any
236 | # character that might be a shell metacharacter, then use eval to reverse
237 | # that process (while maintaining the separation between arguments), and wrap
238 | # the whole thing up as a single "set" statement.
239 | #
240 | # This will of course break if any of these variables contains a newline or
241 | # an unmatched quote.
242 | #
243 |
244 | eval "set -- $(
245 | printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
246 | xargs -n1 |
247 | sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
248 | tr '\n' ' '
249 | )" '"$@"'
250 |
251 | exec "$JAVACMD" "$@"
252 |
--------------------------------------------------------------------------------
/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 react-native-nitro-modules
9 | ```
10 | > `react-native-nitro-modules` is required as this library relies on [Nitro Modules](https://nitro.margelo.com/).
11 |
12 | # Example
13 |
14 | 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.
15 |
16 | # Usage
17 |
18 | This library provides three different ways to use Supercluster based on your needs:
19 |
20 | - [**useClusterer**](#useclusterer): Hook for most hassle-free implementation.
21 | - [**Clusterer**](#Clusterer): React Native component.
22 | - [**Supercluster**](#Supercluster): Class for custom functionality.
23 |
24 | If you are looking for a JS drag-and-drop replacement to speed up point clustering, you should be aware of some caveats:
25 |
26 | - Missing `Map/reduce` functionality.
27 |
28 | # useClusterer
29 |
30 | ```js
31 | import { useClusterer } from 'react-native-clusterer';
32 |
33 | const MAP_DIMENSIONS = { width: MAP_WIDTH, height: MAP_HEIGHT }
34 |
35 | //...
36 | const [region, setRegion] = useState(initialRegion);
37 | const [points, supercluster] = useClusterer(
38 | markers,
39 | MAP_DIMENSIONS,
40 | region
41 | );
42 |
43 | // ...
44 | return (
45 |
49 | {points.map(point => (
50 | // These should be memoized components,
51 | // otherwise you might see flickering
52 |
55 | {/*
56 | // ... marker children - callout, custom marker, etc.
57 | */}
58 |
59 | );
60 | )}
61 | />
62 |
63 | );
64 | ```
65 |
66 | ## useClusterer Params
67 |
68 | ### `data`
69 |
70 | Same as [points](<#load(points)>) passed to `supercluster.load()`.
71 |
72 | ### `mapDimensions`
73 |
74 | Object containing `width` and `height` of the `` Component
75 |
76 | ### `region`
77 |
78 | Region from the `` Component: Object containing `latitude`, `longitude`, `latitudeDelta` and `longitudeDelta` values.
79 |
80 | ### `options`
81 |
82 | Same as [options](#Supercluster-options) for Supercluster, not required.
83 |
84 | ## useClusterer Returns
85 |
86 | An array with two elements:
87 |
88 | - `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 [isClusterFeature](<#isClusterFeature(point)>) to check if this property is defined). Same as [getClusterExpansionRegion](<#getClusterExpansionRegion(clusterId)>) without the need for `clusterId` param.
89 | - `supercluster` - [Supercluster](#Supercluster) instance.
90 |
91 | # Clusterer
92 |
93 | ```js
94 | //...
95 | import { Clusterer } from 'react-native-clusterer';
96 | import MapView, { Marker } from 'react-native-maps';
97 |
98 | const MAP_DIMENSIONS = { width: MAP_WIDTH, height: MAP_HEIGHT }
99 |
100 | // ...
101 | const [markers, setMarkers] = useState([]);
102 | const [region, setRegion] = useState(initialRegion);
103 |
104 | // ...
105 | return (
106 |
110 | {
116 | return (
117 | // These should be memoized components,
118 | // otherwise you might see flickering
119 |
122 | {/* marker children - callout, custom marker, etc. */}
123 | {item.properties.cluster_id ? (
124 | // render cluster
125 | ) : (
126 | // render marker
127 | )}
128 |
129 | );
130 | }}
131 | />
132 |
133 | );
134 | ```
135 |
136 | ## Clusterer Props
137 |
138 | ### `data`
139 |
140 | Same as [points](<#load(points)>) passed to `supercluster.load()`.
141 |
142 | ### `mapDimensions`
143 |
144 | Object containing `width` and `height` of the `` Component
145 |
146 | ### `region`
147 |
148 | Region from the `` Component: Object containing `latitude`, `longitude`, `latitudeDelta` and `longitudeDelta` values.
149 |
150 | ### `options`
151 |
152 | Same as [options](#Supercluster-Options) for Supercluster.
153 |
154 | ### `renderItem`
155 |
156 | Function that takes an item (`GeoJSON Feature point or cluster`) and returns a React component.
157 |
158 | # Supercluster
159 |
160 | ```js
161 | import Supercluster from 'react-native-clusterer';
162 | //...
163 |
164 | // Create a new instance of Supercluster
165 | const supercluster = new Supercluster(options);
166 |
167 | // Load points
168 | supercluster.load(points);
169 |
170 | // Get clusters
171 | supercluster.getClustersFromRegion(region, mapDimensions);
172 | ```
173 |
174 | ## Supercluster Options
175 |
176 | | Option | Default | Description |
177 | | ---------- | ------- | ----------------------------------------------------------------- |
178 | | minZoom | 0 | Minimum zoom level at which clusters are generated. |
179 | | maxZoom | 16 | Maximum zoom level at which clusters are generated. |
180 | | minPoints | 2 | Minimum number of points to form a cluster. |
181 | | radius | 40 | Cluster radius, in pixels. |
182 | | extent | 512 | (Tiles) Tile extent. Radius is calculated relative to this value. |
183 | | generateId | false | Whether to generate ids for input features in vector tiles. |
184 |
185 | ## Supercluster Methods
186 |
187 | ### `load(points)`
188 |
189 | 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.
190 |
191 | #### `getClusters(bbox, zoom)`
192 |
193 | 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.
194 |
195 | #### `getClustersFromRegion(region, mapDimensions)`
196 |
197 | 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.
198 |
199 | #### `getTile(z, x, y)`
200 |
201 | 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.
202 |
203 | #### `getChildren(clusterId)`
204 |
205 | Returns the children of a cluster (on the next zoom level) given its id (`clusterId` value from feature properties).
206 |
207 | #### `getLeaves(clusterId, limit = 10, offset = 0)`
208 |
209 | Returns all the points of a cluster (given its `clusterId`), with pagination support:
210 | `limit` is the number of points to return, and `offset` is the number of points to skip (for pagination).
211 |
212 | #### `getClusterExpansionZoom(clusterId)`
213 |
214 | Returns the zoom on which the cluster expands into several children (useful for "click to zoom" feature) given the cluster's `clusterId`.
215 |
216 | #### `getClusterExpansionRegion(clusterId)`
217 |
218 | 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.
219 |
220 | #### `destroy()`
221 |
222 | No longer needed (version 1.2.0 and up).
223 |
224 | ~~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.~~
225 |
226 | ## Utility Methods
227 |
228 | #### `isClusterFeature(point)`
229 |
230 | Typescript type guard for checking if a point is a cluster.
231 |
232 | ##### **Example**
233 |
234 | ```js
235 | const _handlePointPress = (point: IFeature) => {
236 | if (isClusterFeature(point)) {
237 | const toRegion = point.properties.getExpansionRegion();
238 | mapRef.current?.animateToRegion(toRegion, 500);
239 | }
240 | };
241 |
242 | {
245 | return ;
246 | }}
247 | />;
248 | ```
249 |
250 | #### `coordsToGeoJSONFeature(coords, properties)`
251 |
252 | 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.
253 |
254 | ## Troubleshooting
255 |
256 | - 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.
257 |
258 | ## TO-DOs
259 |
260 | - [x] Proper input and return types for methods
261 | - [x] Implement `getClusters(bbox, zoom)`
262 | - [x] Parse and return additional Point properties added by users
263 | - [x] Find a better implementation for `destroy()`.
264 | - [ ] Map/reduce options
265 |
266 | ## Contributing
267 |
268 | See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
269 |
270 | ## License
271 |
272 | MIT
273 |
274 | Copyright (c) 2021 Jiri Hoffmann
275 |
276 | Uses supercluster for point clustering. Check out [mapbox/supercluster.hpp](https://github.com/mapbox/supercluster.hpp) for additional licensing.
277 |
--------------------------------------------------------------------------------
/example/src/GetClusters.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react-native/no-inline-styles */
2 | import { type FunctionComponent, useState } from 'react';
3 | import {
4 | StyleSheet,
5 | SafeAreaView,
6 | View,
7 | Text,
8 | ScrollView,
9 | TextInput,
10 | Platform,
11 | TouchableOpacity,
12 | Modal,
13 | } from 'react-native';
14 | import { PerformanceNow, superclusterOptions, timeDelta } from './utils';
15 | import Supercluster from 'react-native-clusterer';
16 | import SuperclusterJS from 'supercluster';
17 |
18 | type BBox = [number, number, number, number];
19 | interface Props {
20 | data: supercluster.PointFeature[];
21 | }
22 |
23 | const GetClusters: FunctionComponent = ({ data }) => {
24 | const [westLng, setWestLng] = useState('-180');
25 | const [southLat, setSouthLat] = useState('-90');
26 | const [eastLng, setEastLng] = useState('180');
27 | const [northLat, setNorthLat] = useState('90');
28 | const [zoom, setZoom] = useState('1');
29 |
30 | const [numberOfRuns, setNumberOfRuns] = useState('100');
31 | const [jsTimeAverage, setJsTimeAverage] = useState('0');
32 | const [cppTimeAverage, setCppTimeAverage] = useState('0');
33 |
34 | const zoomInt = parseInt(zoom, 10);
35 | const bbox = [westLng, southLat, eastLng, northLat].map(parseFloat) as BBox;
36 |
37 | const [time, setTime] = useState(['0', '0']);
38 | const [result, setResult] = useState('');
39 | const [showModal, setShowModal] = useState(false);
40 |
41 | const _handleRunJS = () => {
42 | if (bbox.some(isNaN)) return console.warn('Invalid input', bbox);
43 | if (isNaN(zoomInt)) return console.warn('Invalid input', zoomInt);
44 |
45 | const start = PerformanceNow();
46 | const superclusterJS = new SuperclusterJS(superclusterOptions);
47 | superclusterJS.load(data);
48 | const end = PerformanceNow();
49 |
50 | const getClustersS = PerformanceNow();
51 | const clusterRes = superclusterJS.getClusters(bbox, zoomInt);
52 | const getClustersE = PerformanceNow();
53 |
54 | setResult(JSON.stringify(clusterRes));
55 | setTime([timeDelta(start, end), timeDelta(getClustersS, getClustersE)]);
56 | setShowModal(false); // Don't auto-show modal
57 | };
58 |
59 | const _handleRunCPP = () => {
60 | if (bbox.some(isNaN)) return console.warn('Invalid input', bbox);
61 | if (isNaN(zoomInt)) return console.warn('Invalid input', zoomInt);
62 |
63 | const start = PerformanceNow();
64 | const supercluster = new Supercluster(superclusterOptions);
65 | supercluster.load(data);
66 | const end = PerformanceNow();
67 |
68 | const getClustersS = PerformanceNow();
69 | const clusterRes = supercluster.getClusters(bbox, zoomInt);
70 | const getClustersE = PerformanceNow();
71 |
72 | setResult(JSON.stringify(clusterRes));
73 | setTime([timeDelta(start, end), timeDelta(getClustersS, getClustersE)]);
74 | setShowModal(false); // Don't auto-show modal
75 | };
76 |
77 | const _handleRunMultiple = () => {
78 | const superclusterJS = new SuperclusterJS(superclusterOptions);
79 | superclusterJS.load(data);
80 |
81 | const supercluster = new Supercluster(superclusterOptions);
82 | supercluster.load(data);
83 |
84 | const numberOfRunsInt = parseInt(numberOfRuns, 10);
85 |
86 | const randomBboxAndZoom = Array.from({ length: numberOfRunsInt }, () => {
87 | return [
88 | Math.random() * 360 - 180,
89 | Math.random() * 180 - 90,
90 | Math.random() * 360 - 180,
91 | Math.random() * 180 - 90,
92 | Math.floor(Math.random() * 10),
93 | ];
94 | });
95 |
96 | const jsTimes: number[] = [];
97 | const cppTimes: number[] = [];
98 |
99 | for (const bboxAndZoom of randomBboxAndZoom) {
100 | const startJS = PerformanceNow();
101 | const clusterResJS = superclusterJS.getClusters(
102 | bboxAndZoom as BBox,
103 | bboxAndZoom[4]!
104 | );
105 | const endJS = PerformanceNow();
106 |
107 | const startCPP = PerformanceNow();
108 | const clusterResCPP = supercluster.getClusters(
109 | bboxAndZoom as BBox,
110 | bboxAndZoom[4]!
111 | );
112 | const endCPP = PerformanceNow();
113 |
114 | if (clusterResJS.length !== clusterResCPP.length) {
115 | console.warn(
116 | 'size mismatch',
117 | clusterResJS.length,
118 | clusterResCPP.length
119 | );
120 | continue;
121 | }
122 |
123 | // only count runs that have a result
124 | if (clusterResJS.length !== 0) {
125 | jsTimes.push(parseFloat(timeDelta(startJS, endJS)));
126 | cppTimes.push(parseFloat(timeDelta(startCPP, endCPP)));
127 | }
128 | }
129 |
130 | console.log('datasize', data.length);
131 | console.log('numberOfRunsInt', numberOfRunsInt);
132 | console.log('jsTimes', jsTimes);
133 | console.log('cppTimes', cppTimes);
134 |
135 | setJsTimeAverage(
136 | `${Math.round((jsTimes.reduce((a, b) => a + b, 0) / numberOfRunsInt) * 1000) / 1000}`
137 | );
138 | setCppTimeAverage(
139 | `${Math.round((cppTimes.reduce((a, b) => a + b, 0) / numberOfRunsInt) * 1000) / 1000}`
140 | );
141 | };
142 |
143 | return (
144 |
145 |
146 | westLng
147 | southLat
148 | eastLng
149 | northLat
150 | zoom
151 |
152 |
153 |
161 |
169 |
177 |
185 |
193 |
194 |
195 |
196 |
197 | JS Impementation
198 |
199 |
200 | C++ Impementation
201 |
202 |
203 |
204 |
205 |
206 | Initialization time: {time[0]} ms
207 | Get clusters time: {time[1]} ms
208 |
209 | setShowModal(true)}
212 | disabled={!result}
213 | >
214 | Show Result
215 |
216 |
217 |
218 | Run multiple times
219 |
220 | Number of runs:
221 |
229 |
230 |
231 |
232 | Run multiple times
233 |
234 |
235 |
236 | JS average time: {jsTimeAverage} ms
237 | C++ average time: {cppTimeAverage} ms
238 |
239 | setShowModal(false)}
244 | >
245 |
253 |
262 | Result:
263 |
264 | {result}
265 |
266 | setShowModal(false)}
276 | >
277 | Close
278 |
279 |
280 |
281 |
282 |
283 | );
284 | };
285 |
286 | const styles = StyleSheet.create({
287 | container: {
288 | paddingTop: 20,
289 | },
290 | scrollView: {
291 | height: 300,
292 | },
293 | h2: {
294 | fontSize: 16,
295 | fontWeight: 'bold',
296 | marginTop: 10,
297 | marginBottom: 10,
298 | },
299 | h3: {
300 | fontSize: 14,
301 | fontWeight: 'bold',
302 | },
303 | rowContainer: {
304 | flexDirection: 'row',
305 | width: '100%',
306 | },
307 | flex: {
308 | flex: 1,
309 | textAlign: 'center',
310 | },
311 | flexInput: {
312 | flex: 1,
313 | textAlign: 'center',
314 | borderWidth: 1,
315 | borderRadius: 5,
316 | borderColor: '#eda78e',
317 | height: 35,
318 | paddingBottom: Platform.OS === 'android' ? 7 : undefined,
319 | marginHorizontal: 5,
320 | },
321 | buttonContainer: {
322 | flexDirection: 'row',
323 | gap: 10,
324 | },
325 | button: {
326 | flex: 1,
327 | borderRadius: 5,
328 | justifyContent: 'center',
329 | alignItems: 'center',
330 | height: 40,
331 | marginVertical: 10,
332 | backgroundColor: '#eda78e',
333 | },
334 | showResultButton: {
335 | backgroundColor: '#eda78e',
336 | borderRadius: 5,
337 | paddingVertical: 10,
338 | paddingHorizontal: 20,
339 | alignSelf: 'center',
340 | },
341 | resultsContainer: {
342 | flexDirection: 'row',
343 | justifyContent: 'space-between',
344 | alignItems: 'center',
345 | },
346 | });
347 |
348 | export { GetClusters };
349 |
--------------------------------------------------------------------------------
/example/src/Tests.tsx:
--------------------------------------------------------------------------------
1 | import { type FunctionComponent } from 'react';
2 | import { StyleSheet, View, Text } from 'react-native';
3 |
4 | import Supercluster from 'react-native-clusterer';
5 | import SuperclusterJS from 'supercluster';
6 | import { places, placesTile, placesTileMin5 } from './test/fixtures';
7 | import { deepEqualWithoutIds, superclusterOptions } from './utils';
8 | import { getRandomData } from './places';
9 |
10 | export const Tests: FunctionComponent<{}> = () => {
11 | const generatesClustersProperly = () => {
12 | const index = new Supercluster().load(places.features);
13 | const tile = index.getTile(0, 0, 0);
14 | return deepEqualWithoutIds(tile, placesTile);
15 | };
16 |
17 | const supportsMinPointsOption = () => {
18 | const index = new Supercluster({ minPoints: 5 }).load(places.features);
19 | const tile = index.getTile(0, 0, 0);
20 | return deepEqualWithoutIds(tile?.features, placesTileMin5.features);
21 | };
22 |
23 | const returnChildrenOfACluster = () => {
24 | const index = new Supercluster().load(places.features);
25 | const childCounts = index
26 | .getChildren(1)
27 | .map((p) => p.properties.point_count || 1);
28 | return deepEqualWithoutIds(childCounts, [6, 7, 2, 1]);
29 | };
30 |
31 | const returnLeavesOfACluster = () => {
32 | const index = new Supercluster().load(places.features);
33 | const leafNames = index.getLeaves(1, 10, 5).map((p) => p.properties.name);
34 | return deepEqualWithoutIds(leafNames, [
35 | 'Niagara Falls',
36 | 'Cape San Blas',
37 | 'Cape Sable',
38 | 'Cape Canaveral',
39 | 'San Salvador',
40 | 'Cabo Gracias a Dios',
41 | 'I. de Cozumel',
42 | 'Grand Cayman',
43 | 'Miquelon',
44 | 'Cape Bauld',
45 | ]);
46 | };
47 |
48 | const generatesUniqueIdsWithGenerateIdOption = () => {
49 | const index = new Supercluster({ generateId: true }).load(places.features);
50 | const ids = index
51 | .getTile(0, 0, 0)!
52 | .features.filter((f) => !f.tags.cluster)
53 | .map((f) => (f as any).id);
54 | return deepEqualWithoutIds(
55 | ids,
56 | [12, 20, 21, 22, 24, 28, 30, 62, 81, 118, 119, 125, 81, 118]
57 | );
58 | };
59 |
60 | const getLeavesHandlesNullPropertyFeatures = () => {
61 | const index = new Supercluster({ radius: 1 }).load([
62 | {
63 | type: 'Feature',
64 | properties: null as any,
65 | geometry: {
66 | type: 'Point',
67 | coordinates: [-79.04411780507252, 43.08771393436908],
68 | },
69 | },
70 | {
71 | type: 'Feature',
72 | properties: null as any,
73 | geometry: {
74 | type: 'Point',
75 | coordinates: [-79.04511780507252, 43.08781393436908],
76 | },
77 | },
78 | ]);
79 | const leaves = index.getLeaves(1, Infinity, 0);
80 | return leaves[0]?.properties === null;
81 | };
82 |
83 | const returnsClusterExpansionZoom = () => {
84 | const index = new Supercluster().load(places.features);
85 |
86 | return (
87 | index.getClusterExpansionZoom(2) === 2 &&
88 | index.getClusterExpansionZoom(2978) === 3 &&
89 | index.getClusterExpansionZoom(516) === 5 &&
90 | index.getClusterExpansionZoom(3014) === 6
91 | );
92 | };
93 |
94 | const returnsClusterExpansionZoomForMaxZoom = () => {
95 | const index = new Supercluster({
96 | radius: 60,
97 | extent: 256,
98 | maxZoom: 4,
99 | }).load(places.features);
100 |
101 | return index.getClusterExpansionZoom(2341) === 5;
102 | };
103 |
104 | const returnsClustersWhenQueryCrossesInternationalDateline = () => {
105 | const index = new Supercluster().load([
106 | {
107 | type: 'Feature',
108 | properties: {},
109 | geometry: {
110 | type: 'Point',
111 | coordinates: [-178.989, 0],
112 | },
113 | },
114 | {
115 | type: 'Feature',
116 | properties: {},
117 | geometry: {
118 | type: 'Point',
119 | coordinates: [-178.99, 0],
120 | },
121 | },
122 | {
123 | type: 'Feature',
124 | properties: {},
125 | geometry: {
126 | type: 'Point',
127 | coordinates: [-178.991, 0],
128 | },
129 | },
130 | {
131 | type: 'Feature',
132 | properties: {},
133 | geometry: {
134 | type: 'Point',
135 | coordinates: [-178.992, 0],
136 | },
137 | },
138 | ]);
139 |
140 | const nonCrossing = index.getClusters([-179, -10, -177, 10], 1);
141 | const crossing = index.getClusters([179, -10, -177, 10], 1);
142 |
143 | return (
144 | nonCrossing.length > 0 &&
145 | crossing.length > 0 &&
146 | nonCrossing.length === crossing.length
147 | );
148 | };
149 |
150 | const doesNotCrashOnWeirdBboxValues = () => {
151 | const index = new Supercluster().load(places.features);
152 | return (
153 | index.getClusters([129.42639, -103.720017, -445.930843, 114.518236], 1)
154 | .length === 26 &&
155 | index.getClusters([112.207836, -84.578666, -463.149397, 120.169159], 1)
156 | .length === 27 &&
157 | index.getClusters([129.886277, -82.33268, -445.470956, 120.39093], 1)
158 | .length === 26 &&
159 | index.getClusters([458.220043, -84.239039, -117.13719, 120.206585], 1)
160 | .length === 25 &&
161 | index.getClusters([456.713058, -80.354196, -118.644175, 120.539148], 1)
162 | .length === 25 &&
163 | index.getClusters([453.105328, -75.857422, -122.251904, 120.73276], 1)
164 | .length === 25 &&
165 | index.getClusters([-180, -90, 180, 90], 1).length === 61
166 | );
167 | };
168 |
169 | const doesNotCrashOnNonIntegerZoomValues = () => {
170 | const index = new Supercluster().load(places.features);
171 | return (
172 | typeof index.getClusters([179, -10, -177, 10], 1.25).length === 'number'
173 | );
174 | };
175 |
176 | const makeSureSameLocationPointsAreClustered = () => {
177 | const index = new Supercluster({
178 | maxZoom: 20,
179 | extent: 8192,
180 | radius: 16,
181 | }).load([
182 | {
183 | type: 'Feature',
184 | geometry: { type: 'Point', coordinates: [-1.426798, 53.943034] },
185 | properties: {},
186 | },
187 | {
188 | type: 'Feature',
189 | geometry: { type: 'Point', coordinates: [-1.426798, 53.943034] },
190 | properties: {},
191 | },
192 | ]);
193 | const clusters = index.getClusters([-180, -85, 180, 85], 1);
194 | return clusters[0]?.properties.point_count === 2;
195 | };
196 |
197 | const makesSureUnclusteredPointCoordsAreNotRounded = () => {
198 | const index = new Supercluster({ maxZoom: 19 }).load([
199 | {
200 | type: 'Feature',
201 | geometry: {
202 | type: 'Point',
203 | coordinates: [173.19150559062456, -41.340357424709275],
204 | },
205 | properties: {},
206 | },
207 | ]);
208 |
209 | return deepEqualWithoutIds(
210 | index.getTile(20, 1028744, 656754)!.features[0]?.geometry[0],
211 | [421, 281]
212 | );
213 | };
214 |
215 | const doesNotThrowOnZeroItems = () => {
216 | const index = new Supercluster().load([]);
217 | return deepEqualWithoutIds(index.getClusters([-180, -85, 180, 85], 0), []);
218 | };
219 |
220 | const resultsAreTheSameAsJS = () => {
221 | const clusterCPP = new Supercluster(superclusterOptions).load(
222 | places.features
223 | );
224 | const clusterJS = new SuperclusterJS(superclusterOptions).load(
225 | places.features
226 | );
227 | return deepEqualWithoutIds(
228 | clusterCPP.getClusters([-180, -85, 180, 85], 0),
229 | clusterJS.getClusters([-180, -85, 180, 85], 0)
230 | );
231 | };
232 |
233 | const randomDataResultsAreTheSameAsJS = () => {
234 | const randomData = getRandomData(100);
235 | const clusterCPP = new Supercluster(superclusterOptions).load(randomData);
236 | const clusterJS = new SuperclusterJS(superclusterOptions).load(randomData);
237 | const dataCPP = clusterCPP.getClusters([-180, -85, 180, 85], 0);
238 | const dataJS = clusterJS.getClusters([-180, -85, 180, 85], 0);
239 | return deepEqualWithoutIds(dataCPP, dataJS);
240 | };
241 |
242 | return (
243 |
244 |
245 | generates clusters properly {generatesClustersProperly() ? '✅' : '❌'}
246 |
247 |
248 | supports minPoints option {supportsMinPointsOption() ? '✅' : '❌'}
249 |
250 |
251 | return children of a cluster {returnChildrenOfACluster() ? '✅' : '❌'}
252 |
253 |
254 | return leaves of a cluster {returnLeavesOfACluster() ? '✅' : '❌'}
255 |
256 |
257 | generates unique ids with generateId option{' '}
258 | {generatesUniqueIdsWithGenerateIdOption() ? '✅' : '❌'}
259 |
260 |
261 | getLeaves handles null property features{' '}
262 | {getLeavesHandlesNullPropertyFeatures() ? '✅' : '❌'}
263 |
264 |
265 | returns cluster expansion zoom{' '}
266 | {returnsClusterExpansionZoom() ? '✅' : '❌'}
267 |
268 |
269 | returns cluster expansion zoom for maxZoom{' '}
270 | {returnsClusterExpansionZoomForMaxZoom() ? '✅' : '❌'}
271 |
272 |
273 | returns clusters when query crosses international dateline{' '}
274 | {returnsClustersWhenQueryCrossesInternationalDateline() ? '✅' : '❌'}
275 |
276 |
277 | does not crash on weird bbox values{' '}
278 | {doesNotCrashOnWeirdBboxValues() ? '✅' : '❌'}
279 |
280 |
281 | does not crash on non-integer zoom values{' '}
282 | {doesNotCrashOnNonIntegerZoomValues() ? '✅' : '❌'}
283 |
284 |
285 | make sure same location points are clustered{' '}
286 | {makeSureSameLocationPointsAreClustered() ? '✅' : '❌'}
287 |
288 |
289 | makes sure unclustered point coords are not rounded{' '}
290 | {makesSureUnclusteredPointCoordsAreNotRounded() ? '✅' : '❌'}
291 |
292 |
293 | does not throw on zero items {doesNotThrowOnZeroItems() ? '✅' : '❌'}
294 |
295 |
296 |
297 | results are the same as JS {resultsAreTheSameAsJS() ? '✅' : '❌'}
298 |
299 |
300 | random data results are the same as JS{' '}
301 | {randomDataResultsAreTheSameAsJS() ? '✅' : '❌'}
302 |
303 |
304 | );
305 | };
306 |
307 | const styles = StyleSheet.create({
308 | container: {
309 | flex: 1,
310 | marginTop: 10,
311 | marginHorizontal: 10,
312 | gap: 20,
313 | },
314 | h2: {
315 | fontSize: 16,
316 | fontWeight: 'bold',
317 | },
318 | buttonContainer: {
319 | position: 'absolute',
320 | bottom: 20,
321 | left: 0,
322 | right: 0,
323 | flexDirection: 'row',
324 | justifyContent: 'space-around',
325 | width: '100%',
326 | },
327 | defaultDataButton: {
328 | marginVertical: 5,
329 | borderRadius: 5,
330 | justifyContent: 'center',
331 | alignItems: 'center',
332 | height: 40,
333 | backgroundColor: '#8eb3ed',
334 | },
335 | button: {
336 | flex: 1,
337 | borderRadius: 5,
338 | justifyContent: 'center',
339 | alignItems: 'center',
340 | height: 40,
341 | backgroundColor: '#8eb3ed',
342 | },
343 | inputContainer: {
344 | flexDirection: 'row',
345 | marginBottom: 10,
346 | },
347 | input: {
348 | flex: 1,
349 | borderWidth: 1,
350 | borderRadius: 5,
351 | borderColor: '#8eb3ed',
352 | height: 40,
353 | },
354 | type: {
355 | flex: 1,
356 | borderRadius: 5,
357 | justifyContent: 'center',
358 | alignItems: 'center',
359 | height: 40,
360 | borderWidth: 2,
361 | marginTop: 20,
362 | },
363 | });
364 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------