Skip to content

Commit 338d4d1

Browse files
tomekvenitstomekvenits
authored
Merge pull request tomekvenits#201 from venits/version-3.4.0
Update
2 parents 420a8df + bcd4842 commit 338d4d1

File tree

5 files changed

+47
-37
lines changed

5 files changed

+47
-37
lines changed

‎README.md

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,22 @@ React Native module that handles map clustering for you.
44

55
Works with **Expo** and **react-native-cli** 🚀
66

7+
This repo is proudly sponsored by:
8+
9+
<a href="https://reactnativemarket.com/" rel="nofollow" target="_blank">
10+
<img src="https://raw.githubusercontent.com/venits/react-native-market/master/assets/banner.png" width="280"><br />
11+
React Native Templates & Starter Kits and Apps for easier start.
12+
</a>
13+
714
## Demo
815

916
![Demo](https://raw.githubusercontent.com/venits/react-native-map-clustering/assets/assets/demo.gif)
1017

1118
## Installation
1219

1320
```js
14-
npm install react-native-map-clustering --save
15-
// yarn add react-native-map-clustering
16-
17-
// and only if you haven't installed it before
18-
npm install react-native-maps --save
21+
npm install react-native-map-clustering react-native-maps --save
22+
// yarn add react-native-map-clustering react-native-maps
1923
```
2024

2125
### Full example
@@ -52,7 +56,7 @@ export default App;
5256
## Props
5357

5458
| Name | Type | Default | Note |
55-
| ------------------------------------------- | --------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
59+
| ------------------------------------------- | --------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
5660
| **clusterColor** | String | #00B386 | Background color of cluster. |
5761
| **clusterTextColor** | String | #FFFFFF | Color of text in cluster. |
5862
| **clusterFontFamily** | String | undefined | Font family of text in cluster. |
@@ -64,6 +68,7 @@ export default App;
6468
| **extent** | Number | 512 | [SuperCluster extent](https://github.com/mapbox/supercluster#options). |
6569
| **minZoom** | Number | 1 | [SuperCluster minZoom](https://github.com/mapbox/supercluster#options). |
6670
| **maxZoom** | Number | 20 | [SuperCluster maxZoom](https://github.com/mapbox/supercluster#options). |
71+
| **minPoints** | Number | 2 | [SuperCluster minPoints](https://github.com/mapbox/supercluster#options). |
6772
| **preserveClusterPressBehavior** | Bool | false | If set to true, after clicking on cluster it will not be zoomed. |
6873
| **edgePadding** | Object | { top: 50, left: 50, bottom: 50, right: 50 } | Edge padding for [react-native-maps's](https://github.com/react-community/react-native-maps/blob/master/docs/mapview.md#methods) `fitToCoordinates` method, called in `onClusterPress` for fitting to pressed cluster children. |
6974
| **animationEnabled** | Bool | true | Animate imploding/exploding of clusters' markers and clusters size change. **Works only on iOS**. |
@@ -122,16 +127,9 @@ const App = () => {
122127
export default App;
123128
```
124129

125-
#### This repo is proudly sponsored by:
126-
127-
<a href="https://nativeforms.com" rel="nofollow" target="_blank">
128-
<img src="https://raw.githubusercontent.com/venits/native-forms/master/assets/sponsor.png" width="350"><br />
129-
Build forms, surveys and polls for React Native apps.
130-
</a>
131-
132-
## Support
130+
### Support
133131

134-
Feel free to create issues and pull requests. I will try to provide as much support as possible over Github. In case of questions or problems, contact me at:
132+
Feel free to create issues and pull requests. I will try to provide as much support as possible over GitHub. In case of questions or problems, contact me at:
135133
[tony@venits.com](tony@venits.com)
136134

137135
### Happy Coding 💖🚀

‎example/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"react": "16.8.3",
1313
"react-dom": "16.8.3",
1414
"react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
15-
"react-native-map-clustering": "^3.3.7",
15+
"react-native-map-clustering": "^3.4.0",
1616
"react-native-maps": "^0.26.1",
1717
"react-native-web": "^0.11.7"
1818
},

‎index.d.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,13 @@ declare module "react-native-map-clustering" {
1717
minZoom?: number;
1818
extent?: number;
1919
nodeSize?: number;
20+
minPoints?: number;
2021
edgePadding?: { top: number; left: number; right: number; bottom: number };
2122
clusterColor?: string;
2223
clusterTextColor?: string;
2324
clusterFontFamily?: string;
25+
selectedClusterId?: string;
26+
selectedClusterColor?: string;
2427
spiderLineColor?: string;
2528
superClusterRef?: React.MutableRefObject<any>;
2629
mapRef?: (ref: React.Ref<Map>) => void;

‎lib/ClusteredMapView.js

Lines changed: 27 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ const ClusteredMapView = forwardRef(
2424
radius,
2525
maxZoom,
2626
minZoom,
27+
minPoints,
2728
extent,
2829
nodeSize,
2930
children,
@@ -70,6 +71,7 @@ const ClusteredMapView = forwardRef(
7071
updateSpiderMarker([]);
7172
updateMarkers([]);
7273
updateChildren(propsChildren);
74+
setSuperCluster(null);
7375
return;
7476
}
7577

@@ -85,11 +87,13 @@ const ClusteredMapView = forwardRef(
8587
radius,
8688
maxZoom,
8789
minZoom,
90+
minPoints,
8891
extent,
8992
nodeSize,
9093
});
9194

9295
superCluster.load(rawData);
96+
updateRegion(restProps.region || restProps.initialRegion);
9397

9498
const bBox = calculateBBox(currentRegion);
9599
const zoom = returnMapZoom(currentRegion, bBox, minZoom);
@@ -112,9 +116,15 @@ const ClusteredMapView = forwardRef(
112116

113117
if (isSpiderfier && markers.length > 0) {
114118
let allSpiderMarkers = [];
115-
119+
let spiralChildren = [];
116120
markers.map((marker, i) => {
117-
let positions = generateSpiral(marker, clusterChildren, markers, i);
121+
if (marker.properties.cluster) {
122+
spiralChildren = superCluster.getLeaves(
123+
marker.properties.cluster_id,
124+
Infinity
125+
);
126+
}
127+
let positions = generateSpiral(marker, spiralChildren, markers, i);
118128
allSpiderMarkers.push(...positions);
119129
});
120130

@@ -129,16 +139,14 @@ const ClusteredMapView = forwardRef(
129139
const bBox = calculateBBox(region);
130140
const zoom = returnMapZoom(region, bBox, minZoom);
131141
const markers = superCluster.getClusters(bBox, zoom);
132-
133142
if (animationEnabled && Platform.OS === "ios") {
134143
LayoutAnimation.configureNext(layoutAnimationConf);
135144
}
136-
if (zoom >= 17 && markers.length > 0 && clusterChildren) {
145+
if (zoom >= 18 && markers.length > 0) {
137146
if (spiralEnabled) updateSpiderfier(true);
138147
} else {
139148
if (spiralEnabled) updateSpiderfier(false);
140149
}
141-
142150
updateMarkers(markers);
143151
onMarkersChange(markers);
144152
onRegionChangeComplete(region, markers);
@@ -196,7 +204,11 @@ const ClusteredMapView = forwardRef(
196204
key={`cluster-${marker.id}`}
197205
{...marker}
198206
onPress={_onClusterPress(marker)}
199-
clusterColor={clusterColor}
207+
clusterColor={
208+
restProps.selectedClusterId === marker.id
209+
? restProps.selectedClusterColor
210+
: clusterColor
211+
}
200212
clusterTextColor={clusterTextColor}
201213
clusterFontFamily={clusterFontFamily}
202214
tracksViewChanges={tracksViewChanges}
@@ -212,18 +224,14 @@ const ClusteredMapView = forwardRef(
212224
})
213225
: null;
214226
})}
215-
{spiderMarkers.map((marker, index) => {
216-
{
217-
return (
218-
<Polyline
219-
key={index}
220-
coordinates={[marker.centerPoint, marker, marker.centerPoint]}
221-
strokeColor={spiderLineColor}
222-
strokeWidth={1}
223-
/>
224-
);
225-
}
226-
})}
227+
{spiderMarkers.map((marker, index) => (
228+
<Polyline
229+
key={index}
230+
coordinates={[marker.centerPoint, marker, marker.centerPoint]}
231+
strokeColor={spiderLineColor}
232+
strokeWidth={1}
233+
/>
234+
))}
227235
</MapView>
228236
);
229237
}
@@ -240,6 +248,7 @@ ClusteredMapView.defaultProps = {
240248
radius: Dimensions.get("window").width * 0.06,
241249
maxZoom: 20,
242250
minZoom: 1,
251+
minPoints: 2,
243252
extent: 512,
244253
nodeSize: 64,
245254
// Map parameters

‎package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-native-map-clustering",
3-
"version": "3.3.7",
3+
"version": "3.4.0",
44
"description": "React Native Map Clustering both for Android and iOS",
55
"types": "index.d.ts",
66
"main": "index.js",
@@ -27,8 +27,8 @@
2727
},
2828
"homepage": "https://github.com/venits/react-native-map-clustering#readme",
2929
"dependencies": {
30-
"supercluster": "^7.0.0",
31-
"@mapbox/geo-viewport": "^0.4.0"
30+
"supercluster": "^7.1.0",
31+
"@mapbox/geo-viewport": "^0.4.1"
3232
},
3333
"peerDependencies": {
3434
"react-native-maps": "*",

0 commit comments

Comments
 (0)