venits / react-native-map-clustering Goto Github PK
View Code? Open in Web Editor NEWReact Native map clustering both for Android and iOS.
React Native map clustering both for Android and iOS.
Hi,
Is this library support async load marker? I try it by load from service and add it with redux but no marker display in my map.
I noticed that when I'm using custom cluster in Android it is truncated once it's too big (~50), is this a known issue\limitation ?
I'm getting the following error, randomly:
undefined is not an object (evaluating 'tree.range')
I checked within the code and found that for some cases getZoomLevel
function returns zoom
as NaN
.
The particular case which I tracked was this:
bbox = [ 392.6867911219597, -28.446937064843333, -74.18819949030876, 148.92655940484119 ]
height = 592
width = 360
In the meanwhile, I'm gonna try something like this: zoom = this.getZoomLevel(bbox).zoom || 0;
The original MapView from react-native-maps
provides an onRegionChange
callback, which can be used in the following case:
<MapView region={this.state.region} onRegionChange={(region) => this.setState({ region })} />
Without the callback the map is basically locked in place in this case.
Or is there a way to perhaps access the original MapView object?
Hi Venits,
Thank you very much for this component.
I'm trying the onClusterPress method but is not being triggered because is undefined on the state.
Fix: I added locally onClusterPress to the default state and on the assignment made on createMarkers() but I'm not sure if that it's a good solution for you.
Thanks.
Hi Venits,
Thanks for the cool module,
but i'm getting error "this.mapRef.animateToRegion" is not a function when i trying to programatically animate to a region.
Can you please advise?
Thanks
This commit 9420a07#diff-b75bf6bb36e3beebc410d167c3ecb1e1R158 changes MapView ref from this._root
to this.root
.
I had to access this ref in order to use some method such as animateToRegion or fitToCoordinates.
Are we supposed to use this.root
from now on ?
Thanks in advance.
When i double click a cluster it opens one of the markers inside the cluster on iOS. How can i solve that issue? i tried to pass a function to onClusterPress but its not working.
It seems the npm package for this package is out of date. Npm says its on version 1.2.8 and not published for 2 months where as the package.json on Github is reading version 1.2.2 and updated in the last few days. Would be nice to keep the npm package update to date with Master.
Maybe need to increase the max marker amount for the clusters. It looks like there are too many points to cluster so its hiding the cluster maybe?
When creating marker, ref are not created. The following code works fine with react-native-maps MapView but fails when using react-native-map-clustering MapView :
<MapView
region={{
latitude: 46.847807,
longitude: 2.924655,
latitudeDelta: 50,
longitudeDelta: 50,
}}
style={{
flex: 1,
}}
>
{this.props.parks.map((park, i) => (
<Marker
coordinate={{
latitude: parseFloat(park.lat),
longitude: parseFloat(park.lng),
}}
ref={(c) => {
this[`marker_${i}`] = c;
console.log('ref', `marker_${i}`, this[`marker_${i}`]);
}}
onPress={() => {
console.log('press', `marker_${i}`, this[`marker_${i}`]);
this[`marker_${i}`].showCallout();
}}
>
{this.renderCallout(park, i)}
</Marker>
))}
</MapView>
Versions :
"react": "16.0.0-alpha.12",
"react-native": "^0.49",
"react-native-map-clustering": "^1.2.1",
"react-native-maps": "^0.16.4",
Great job on this one I must say although I found that it couldn't handle >1000 markers without performance issues. Is this an issue with react-native-maps in general or with your mods?
This code was working with react-native-maps MapView. It shows an error with this package.
<MapView
initialRegion={this.state}
clusterColor = '#000'
clusterTextColor = '#fff'
clusterBorderColor = '#fff'
clusterBorderWidth = {4}
ref = {(ref)=>this.mapView=ref}
onClusterPress={(coordinate)=>{
this.animate(coordinate);
}}
radius={25}
style={styles.map}
region={region}
showsUserLocation = {true}
>
{ this.renderMarker(selectedExplore)}
<WardBorder/>
</MapView>
And on WardBorder component
<Polygon
coordinates={cords}
strokeColor="rgba(0,0,0,0.2)"
fillColor="rgba(0,0,0,0.1)"
strokeWidth={1} />
But if i comment out the WardBorder (polygon) component marker is clustered.
Hello,
if I have two or more markers that are almost at the same coords. The markers are not displayed. Even if I zoom 100% the clusters stays active. How can I fix that?
when my callback in region change to makes setState I cannot change map zoom. tested on IOS simulator
onRegionChange = { region => {
this.setState(() => ({ region }))
}}
Currently react-native-map-clustering MapView crashes if the region is not set, but the initialRegion is. This is contrary to how the base react-native-map MapView behaves and causes annoying bugs (ex. map skips back to the previous region after the user moves the map) in the case that the dev wants to save the region via onRegionChangeComplete() in the redux store.
HI, the first, i want to say deeply thank for you module
It's really helpful
But i got some problems,
My code is:
<MapView
onClusterPress={(coordinate) => {
alert("11212123" + prop);
}} ...
In class MapWithClustering , method componentWillReceiveProps is not fired
so method onClusterPress in class CustomMarker is undefined --> not fired too.
Problem 2, please add more information on onClusterPress such as onClusterPress(coordinate, markers) which markers are children of clustering
Thank for your helpful module
I'm trying to have the map zoom in or out to show the different markers when filtering the markers.
Sometimes it works ok (though the cluster markers are sometimes outside the map somewhat).
But other times it seems to go crazy and zoom in as far as possible at a random spot on the map somewhere inside the area where the markers are.
It zooms in so far that a small building on the map covers the screen, and then it refuses to try zooming out again.
I assumed it could be an issue of the markers not being done being filtered yet, as it most often happened with text search filtering; so I added 5 second delay after filtering before calling fitToElements, but it doesn't help. When i change the code to use plain MapView without clustering it works fine.
I'm thinking the issue might be that the clustering is yanking markers in and out of the map while zooming causing the fitToElements to zoom even further when pseudo markers are removed until no markers are visible (and I assume those far outside the viewport are removed for performance reasons) and therefore it stops.
It seems to only happen when the filtering reduces the markers from covering the whole of Norway to just covering a city (especially one with a lot of markers).
When it's working okay, it seems tries to fit the center of the clusters that were there before zooming, instead of the actual markers, since it will zoom in and split a cluster and if I pan the map there is often other clusters or markers outside the viewport that was originally inside the cluster (seems to happen more far north than in the south of norway).
Is there some other method that is recommended when using clustering for zooming in?
example:
map on load https://prnt.sc/hiw4oo
map after some zoom https://prnt.sc/hiw4u8
Use case / issue:
When at least two map markers are in the same location, I can't zoom in far enough to split them up, it just keeps showing the cluster marker with the number 2 on it.
I'm wondering if there is a way I could maybe disable the clustering at a certain zoom level, or somehow show both the markers below the cluster, when they are at the same location.
Not entirely sure it's possible, but just wanted to check if it might be :)
When we click on cluster, that app is getting crashed in android, and working fine with debugging
<MapView
// region={this.state.reg}
style={styles.map}
ref = {(ref)=>this.mapView=ref}
showsMyLocationButton={false}
showsUserLocation={true}
loadingEnabled={true}
initialRegion={region}
onPress={() => this.onMapPress()}
onRegionChangeComplete={(reg) => {
latDelta = reg.latitudeDelta;
longDelta = reg.longitudeDelta;
console.log(latDelta+'lat');
console.log(longDelta+'long');
}}
toolbarEnabled={false}
onMapReady={() => this.resetUserPosition()}
radius={15}
clusterTextColor='#006E81'
clusterBorderWidth={5}
clusterTextSize={14}
customClusterMarkerDesign ={this.clusters()}
onClusterPress = {(coordinates,markers)=>{
console.warn(markers)
alert("testing clustering")
}}
>
{this.markersArray()}
</MapView>
here is the code
When I drop in my component for a custom pin I made, the generic pin is rendered. Any idea on a fix?
Love this library, its exactly what I need, however, I happen to check the repo and saw that 1.2 was out, so I upgraded, however, I have custom marker images as a child to showing a users avatar once zoomed in enough.
After switching to 1.2, all the custom images missing and instead it just showed the red pin icon.
So far I have just downgraded back to 1.1.6 and that seems to be working fine.
Thanks again for this library :)
I sometimes have to do pan before the cluster expands after animateToRegion, any idea why?
Hi, thank you for this great library.
I've success fully implement this library and follow the example.
The clustering was working fine.
When I tried to create a custom component for my marker.
I tried to create a <JobMarker/>
component that wrap Marker
and Callout
component.
Clustering not shown on the map.
How can I solve this?
Thank Your
http://prntscr.com/hivgzk when I scroll i get the error
When some markers are merged, we don't know how many
So, i suggest when some markers are merged, we should do as onClusterPress do (#3)
such as
customClusterMarkerDesign = ((coordinates,markers)=>{
(<Image style = {{width: imageWidth, height:imageHeight}}
source = {require('./customCluster.png')}/>)}}
ex: when 10 markers are merged, we based on type of them and show 10 and background of marker, we split 2 parts with red area is 30% and green area is 70%
Thank you
Hi, is there any way to have custom text size for cluster marker. Because the text seems overflow if it doesn't fit the size of custom cluster marker. Appreciate if you can help. Thank you.
Callout out is not showing.
Hello!
I have a problem: when I click on cluster (which is located in the corner of the screen) - I see only animation (scroll to clicked scroll), but I decrease latitudeDelta and longitudeDelta when I call this.mapView._root.animateToRegion().
It works only when I click on the cluster first time. After first click, if I click on the same cluster it works correctly.
I record a video with this problem: http://jmp.sh/E6pXwLw
onPressCluster = (coordinates: any, markers: any) => {
markerClickStatus.status = true;
if (markerClickStatus.timer) clearTimeout(markerClickStatus.timer);
markerClickStatus.timer = setTimeout(() => { markerClickStatus.status = false; }, 100);
this.animateToRegion(coordinates);
this.setState({
coordinates,
currentMarkers: markers.map((x: any) => this.props.benefitsOfCategories[x.item.key]),
});
}
animateToRegion = (coordinates: any) => {
const { region } = this.mapView.state;
const minDelta = MAP_ZOOM.minDelta * MAP_ZOOM.scaleRate;
const newRegion: IFullCoordinates = {
latitude: coordinates.latitude || region.latitude,
longitude: coordinates.longitude || region.longitude,
latitudeDelta: Math.max(minDelta, this.state.region.latitudeDelta * MAP_ZOOM.scaleRate),
longitudeDelta: Math.max(minDelta, this.state.region.longitudeDelta * MAP_ZOOM.scaleRate),
};
this.mapView._root.animateToRegion(newRegion, ANIMATION_DURATION);
!this.state.delta && this.setState({
delta: {
lat: region.latitudeDelta,
lng: region.longitudeDelta,
},
});
}
<MapWithClusters
ref={(ref: any) => this.mapView = ref}
clustering={clustering}
region={this.state.region}
style={styles.screen}
showsUserLocation={true}
followsUserLocation={true}
customMapStyle={mapStyle}
maxZoomLevel={MAP_ZOOM.max}
minZoomLevel={MAP_ZOOM.min}
onPress={this.onMapPress}
showsMyLocationButton={false}
onRegionChangeComplete={this.onRegionChangeComplete}
onClusterPress={this.onPressCluster}
clusterTextColor={CLUSTER_TEXT_ICON_COLOR}
customClusterMarkerDesign={(<Image source={CLUSTER_ICON} style={styles.clusterMargin} />)}
>
{renderMarkers(this.props.benefitsOfCategories, this.onPressMarker)}
</MapWithClusters>
Versions:
react-native: 0.52.0
react-native-map: 0.19.0
react-native-map-clustering: 1.2.6
Hello,
After review, I noticed that the radius and the clusterTextSize are still set to constant values and are not actually respecting user assignments.
Way of reproduce (this is not 100% sure):
Result:
TypeError: Cannot read property 'range' of undefined
This error is located at:
...
at SuperCluster.getClusters (index.js:77)
at MapWithClustering.calculateClustersForMap (MapWithClustering.js:139)
at MapWithClustering.proxiedMethod (createPrototypeProxy.js:44)
at MapWithClustering.createMarkersOnMap (MapWithClustering.js:99)
at MapWithClustering.proxiedMethod (createPrototypeProxy.js:44)
at MapWithClustering.componentWillReceiveProps (MapWithClustering.js:34)
at MapWithClustering.proxiedMethod (createPrototypeProxy.js:44)
Conclusion:
It seems the tree object in getClusters method from supercluster is undefined:
getClusters: function (bbox, zoom) {
var tree = this.trees[this._limitZoom(zoom)];
var ids = tree.range(lngX(bbox[0]), latY(bbox[3]), lngX(bbox[2]), latY(bbox[1]));
var clusters = [];
for (var i = 0; i < ids.length; i++) {
var c = tree.points[ids[i]];
clusters.push(c.numPoints ? getClusterJSON(c) : this.points[c.id]);
}
return clusters;
},
onClusterPress={(coordinate)=>{
consloe.log("press");
}}
nothing happend.
Do I need to set something?
example:
map on load https://prnt.sc/hiw4oo
map after some zoom https://prnt.sc/hiw4u8
I not sure that It is bug in react-native-map-view, because before using your library markers was showing correct.
when I turn off clustering, markers are showing always
the problem in the code http://prntscr.com/hk7qe6
Right now I am using the onClusterPress and the animate function to zoom in on press, however, sometimes I have to tap a couple times in order to get to the next place where the clusters 'break apart'.
I was wondering if it's possible to zoom into the next cluster break?
It looks like if I could get an array back from the markers that are in the cluster, I could pass that to react-native-maps fitToSuppliedMarkers method perhaps?
I have tried playing around with the amount of zoom, and that got me closer to what I'm wanting, but not quite.
Thanks in advance!
Since I cannot use onRegionChange here
Any idea how can I do something when I pan over the map?
Also how can I get the region if I need it in my state?
How would you go about capturing the onPress event for the cluster component? I would like to zoom to the region of markers when pressing a cluster. It would also be nice if we could override the cluster component as well.
Custom cluster component where you pass an array of markers would let me render a price range for the clustered markers for instance.
Thanks again for the great clustering component!
I recently updated to get the makers array back in the onClusterPress event, which is helpful :)
However, now I am experiencing an issue where each custom marker, once no longer in a cluster, is rendering a whole new map.
Looks like the once it's no longer in a cluster, it's getting passed a type of MapView()
instead of Feature
and it's getting an item
prop, whereas the cluster markers are not.
Seems like the change happens somewhere between v1.2.1 and v1.2.4. After going back down to 1.2.1 the custom markers render as expected.
Thanks in advance :)
Whenever I tap on a marker close to the screen border, the callout is shown, the map "moves" in order to put selected marker in the center of the screen and the callout disappears.
I am using a custom callout
The issue seems to come from react-native-map-clustering, I haven't been able to reproduce it using react-native-maps.
Here are the versions I am using :
"react": "16.0.0-alpha.12",
"react-native": "^0.47",
"react-native-map-clustering": "^1.2.3",
"react-native-maps": "^0.16.4",
I need get marker coordinates of cluster that in screenshot http://prntscr.com/hivu8e
I'm using react-native-maps through Expo for my app with your clustering module however on iOS the map is not able to scroll. All the markers and everything show up correctly but the map does not move around. Any help would be appreciated. Below is my map code.
<MapView
clusterColor="#FB4F94"
clusterTextColor="#fff"
clusterBorderColor="#F86048"
clusterBorderWidth={0}
region={{
latitude: 52.5,
longitude: 19.2,
latitudeDelta: 6.5,
longitudeDelta: 6.5
}}
style={styles.mapView}
>
{
this.state.markers.map((marker, i) => {
return (
<Marker
key={i}
onPress={this._show.bind(this, marker.image)}
coordinate={{ latitude: marker.latitude, longitude: marker.longitude }}
>
<Image
source={{uri: marker.image}}
style={styles.markerImage}
/>
</Marker>
)
})
}
</MapView>
I believe changing the 'region' prop to 'initialRegion' when you creacte the react-native-maps component will fix the issue so I have submitted a PR.
I'm trying to get the group of markers as an object when I press a cluster however right now when I try to JSON.stringify
the markers data (same as in the docs) it errors out because of cyclic structures (json.stringify cannot serialize cyclic structures
). Is it possible to get the markers back as just an object? Thanks!
<MapView
ref={component => {this._map = component;}}
clustering={true}
showsUserLocation={true}
showsMyLocationButton={false}
initialRegion={this.state.region}
onRegionChange={this._onRegionChange}
onClusterPress={(coordinates, markers) => {
console.warn(JSON.stringify(markers))
}}
style={styles.mapView}
>
Hi, i tried to use one of the props customClusterMarkerDesign but it didn't work. I follow exactly like the documentation. Appreciate if you could help
<MapView
ref={(ref) => { this.mapView = ref; }}
region={this.state.currentRegion}
style={{ width, height }}
onClusterPress={(coordinate) => { this.animateRegion(coordinate); }}
customClusterMarkerDeisgn={(
<Image
style={{ width: 24, height: 34, tintColor: '#ff6600' }}
source={ImageMarker}
/>
)}
>
{this.createMarker()}
</MapView>
I have two types
I want to make different marker cluster per types. How do I? @venits
Not sure if this is a missing setting, bug or just an undocumented setting.
It seems to me that the clusters some times are created too close together so that they overlap:
Perhaps the current minimum distance before markers are grouped is too small, at least when there's as many as in my sample data. Several clusters are overlapping so bad you cannot tell which number is on them; and onClusterPress becomes very unreliable since you cannot tell which one you're tapping.
To me it seems most logical to never create clusters that are within the radius of a neighbouring cluster.
Is this configurable somewhere or is this simply a bug?
const { markerList } = this.props;
if (markerList.length > 0) {
return (
<MapView
style={styles.map}
region={this.state.region}
showsUserLocation={true}
showsCompass={true}
loadingEnabled={true}
clustering = {true}
clusterColor = '#000'
clusterTextColor = '#fff'
clusterBorderColor = '#fff'
clusterBorderWidth = {4}>
{markerList.map((marker) => {
return this.renderMarker(marker)
})}
</MapView>
);
}
and
renderMarker(marker) {
return (
<Marker
coordinate={marker.latlng}
key={marker.name} />
);
}
}
I don't get it, with old MapView it was working fine.
First, kudos for this great lib. I don't have so much time to dig into the source code but want to know is there is a way to exclude some markers from clustering. Thanks in advance.
Is it possible to set the position of the cluster's text ?
There are props to define all cluster's text attributes, and also a method to set its background, but unfortunately it's not enough in my case since I also want to show the text in a specific position relative to the custom background I'm using.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.