Skip to content

Commit

Permalink
Merge pull request #201 from venits/version-3.4.0
Browse files Browse the repository at this point in the history 
Update
  • Loading branch information
@venits
venits committed Jan 3, 2021
2 parents 420a8df + bcd4842 commit 338d4d1
Show file tree
Hide file tree
Showing 5 changed files with 47 additions and 37 deletions.
28 changes: 13 additions & 15 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,22 @@ React Native module that handles map clustering for you.

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

This repo is proudly sponsored by:

<a href="https://reactnativemarket.com/" rel="nofollow" target="_blank">
<img src="https://raw.githubusercontent.com/venits/react-native-market/master/assets/banner.png" width="280"><br />
React Native Templates & Starter Kits and Apps for easier start.
</a>

## Demo

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

## Installation

```js
npm install react-native-map-clustering --save
// yarn add react-native-map-clustering

// and only if you haven't installed it before
npm install react-native-maps --save
npm install react-native-map-clustering react-native-maps --save
// yarn add react-native-map-clustering react-native-maps
```

### Full example
Expand Down Expand Up @@ -52,7 +56,7 @@ export default App;
## Props

| Name | Type | Default | Note |
| ------------------------------------------- | --------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ------------------------------------------- | --------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
| **clusterColor** | String | #00B386 | Background color of cluster. |
| **clusterTextColor** | String | #FFFFFF | Color of text in cluster. |
| **clusterFontFamily** | String | undefined | Font family of text in cluster. |
Expand All @@ -64,6 +68,7 @@ export default App;
| **extent** | Number | 512 | [SuperCluster extent](https://github.com/mapbox/supercluster#options). |
| **minZoom** | Number | 1 | [SuperCluster minZoom](https://github.com/mapbox/supercluster#options). |
| **maxZoom** | Number | 20 | [SuperCluster maxZoom](https://github.com/mapbox/supercluster#options). |
| **minPoints** | Number | 2 | [SuperCluster minPoints](https://github.com/mapbox/supercluster#options). |
| **preserveClusterPressBehavior** | Bool | false | If set to true, after clicking on cluster it will not be zoomed. |
| **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. |
| **animationEnabled** | Bool | true | Animate imploding/exploding of clusters' markers and clusters size change. **Works only on iOS**. |
Expand Down Expand Up @@ -122,16 +127,9 @@ const App = () => {
export default App;
```

#### This repo is proudly sponsored by:

<a href="https://nativeforms.com" rel="nofollow" target="_blank">
<img src="https://raw.githubusercontent.com/venits/native-forms/master/assets/sponsor.png" width="350"><br />
Build forms, surveys and polls for React Native apps.
</a>

## Support
### Support

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:
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:
[tony@venits.com](tony@venits.com)

### Happy Coding 💖🚀
2 changes: 1 addition & 1 deletion example/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
"react": "16.8.3",
"react-dom": "16.8.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
"react-native-map-clustering": "^3.3.7",
"react-native-map-clustering": "^3.4.0",
"react-native-maps": "^0.26.1",
"react-native-web": "^0.11.7"
},
Expand Down
3 changes: 3 additions & 0 deletions index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,13 @@ declare module "react-native-map-clustering" {
minZoom?: number;
extent?: number;
nodeSize?: number;
minPoints?: number;
edgePadding?: { top: number; left: number; right: number; bottom: number };
clusterColor?: string;
clusterTextColor?: string;
clusterFontFamily?: string;
selectedClusterId?: string;
selectedClusterColor?: string;
spiderLineColor?: string;
superClusterRef?: React.MutableRefObject<any>;
mapRef?: (ref: React.Ref<Map>) => void;
Expand Down
45 changes: 27 additions & 18 deletions lib/ClusteredMapView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ const ClusteredMapView = forwardRef(
radius,
maxZoom,
minZoom,
minPoints,
extent,
nodeSize,
children,
Expand Down Expand Up @@ -70,6 +71,7 @@ const ClusteredMapView = forwardRef(
updateSpiderMarker([]);
updateMarkers([]);
updateChildren(propsChildren);
setSuperCluster(null);
return;
}

Expand All @@ -85,11 +87,13 @@ const ClusteredMapView = forwardRef(
radius,
maxZoom,
minZoom,
minPoints,
extent,
nodeSize,
});

superCluster.load(rawData);
updateRegion(restProps.region || restProps.initialRegion);

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

if (isSpiderfier && markers.length > 0) {
let allSpiderMarkers = [];

let spiralChildren = [];
markers.map((marker, i) => {
let positions = generateSpiral(marker, clusterChildren, markers, i);
if (marker.properties.cluster) {
spiralChildren = superCluster.getLeaves(
marker.properties.cluster_id,
Infinity
);
}
let positions = generateSpiral(marker, spiralChildren, markers, i);
allSpiderMarkers.push(...positions);
});

Expand All @@ -129,16 +139,14 @@ const ClusteredMapView = forwardRef(
const bBox = calculateBBox(region);
const zoom = returnMapZoom(region, bBox, minZoom);
const markers = superCluster.getClusters(bBox, zoom);

if (animationEnabled && Platform.OS === "ios") {
LayoutAnimation.configureNext(layoutAnimationConf);
}
if (zoom >= 17 && markers.length > 0 && clusterChildren) {
if (zoom >= 18 && markers.length > 0) {
if (spiralEnabled) updateSpiderfier(true);
} else {
if (spiralEnabled) updateSpiderfier(false);
}

updateMarkers(markers);
onMarkersChange(markers);
onRegionChangeComplete(region, markers);
Expand Down Expand Up @@ -196,7 +204,11 @@ const ClusteredMapView = forwardRef(
key={`cluster-${marker.id}`}
{...marker}
onPress={_onClusterPress(marker)}
clusterColor={clusterColor}
clusterColor={
restProps.selectedClusterId === marker.id
? restProps.selectedClusterColor
: clusterColor
}
clusterTextColor={clusterTextColor}
clusterFontFamily={clusterFontFamily}
tracksViewChanges={tracksViewChanges}
Expand All @@ -212,18 +224,14 @@ const ClusteredMapView = forwardRef(
})
: null;
})}
{spiderMarkers.map((marker, index) => {
{
return (
<Polyline
key={index}
coordinates={[marker.centerPoint, marker, marker.centerPoint]}
strokeColor={spiderLineColor}
strokeWidth={1}
/>
);
}
})}
{spiderMarkers.map((marker, index) => (
<Polyline
key={index}
coordinates={[marker.centerPoint, marker, marker.centerPoint]}
strokeColor={spiderLineColor}
strokeWidth={1}
/>
))}
</MapView>
);
}
Expand All @@ -240,6 +248,7 @@ ClusteredMapView.defaultProps = {
radius: Dimensions.get("window").width * 0.06,
maxZoom: 20,
minZoom: 1,
minPoints: 2,
extent: 512,
nodeSize: 64,
// Map parameters
Expand Down
6 changes: 3 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-native-map-clustering",
"version": "3.3.7",
"version": "3.4.0",
"description": "React Native Map Clustering both for Android and iOS",
"types": "index.d.ts",
"main": "index.js",
Expand All @@ -27,8 +27,8 @@
},
"homepage": "https://github.com/venits/react-native-map-clustering#readme",
"dependencies": {
"supercluster": "^7.0.0",
"@mapbox/geo-viewport": "^0.4.0"
"supercluster": "^7.1.0",
"@mapbox/geo-viewport": "^0.4.1"
},
"peerDependencies": {
"react-native-maps": "*",
Expand Down

0 comments on commit 338d4d1

Please sign in to comment.