Grouping Markers about google-map-react HOT 26 CLOSED

Nice ! Too bad there's recompose, it makes it harder to understand :/

from google-map-react.

Could someone provide simpler example of clustered markers without recompose? That would be very helpful!

from google-map-react.

for those looking for an implementation without recompose, it's here : https://github.com/Tim152/clustering-google-map-react

from google-map-react.

@istarkov right, I get that and it looks pretty handy, but the code is organized strangely and not immediately apparent what's happening, especially to unseasoned React devs. Similar to @seleckis I don't have the time to go through the large React/Redux app I've built and reorganize everything when really I just need to get clustering working on a map. It might be something I consider in the future, but right this second clustering is more important.

from google-map-react.

It would be cool if it were part of core functionality! But I think you could write your own code to group markers before passing them into the map without too much difficulty, and you would have the advantage of being able to customize it however you want in that case. Here are my suggestions for how to do it:

If you pass in a bounds change callback, i.e. <GoogleMap onBoundsChange={this.onBoundsChange}/>, then it will call that function when the user zooms or finishes dragging with the following arguments: onBoundsChange([centerLatLng.lat, centerLatLng.lng], zoom, bounds, marginBounds).

So first off, you could store that in state, with setState({bounds: bounds}).

You would also need to know the size of your map, so in your componentDidMount() and probably also a window resize event callback, you could:

var map = React.findDOMNode(this.refs.map);
this.setState({
  width: map.offsetWidth,
  height: map.offsetHeight
});

With this information, in your render(), you compute each child's position in pixels by finding its percent X and Y relative to this.state.bounds and multiplying those by this.state.width and this.state.height. Then you can use whatever algorithm you want to group children that are too close together (doing it efficiently isn't completely trivial, but I bet with a bit of Googling you could find a JavaScript RTree or other spatial index library to help with that).

You could pass these groups into some <MarkerGroup> component you create that displays whatever information you want about the group, and possibly even expands itself out to the individual children when hovered over. For its lat and lng props you could pass in the average of the children's lat and lng.

If children don't fall into a group, then of course you could just pass them straight into the map as usual.

One could easily put this functionality in a nice wrapper component that could be used as a drop-in replacement for <GoogleMap>, so if you manage to get something working, feel free to make a pull request!

from google-map-react.

Thanks for the quick and detailed response. I have a question on calculating the child's positions, I have the bounds and the map width/height but how do I find the marker's percent X and Y in relation to the this.state.bounds values I have?

The this.state.bounds value I have is an array of GPS coordinates if I am understanding correctly I need to figure out a percentage x value and y value in relation to the GPS coordinates and translate it to pixels then feed the width, height and all the point's x and y values into a R-tree library (like mourner/rbush) to determine how close together they are?

Thanks again for the help.

from google-map-react.

The bounds are in this form (yeah we should document this at some point):

[topLatitude, leftLongitude, bottomLatitude, rightLongitude]

Important note: It's possible for rightLongitude < leftLongitude if the map area includes 180 degrees longitude. So we have to check this when computing the pixel position of the marker.

So a basic method should be, in ES6 code: (I haven't tested this)

var {bounds, mapWidth, mapHeight} = this.state;
var [topLat, leftLng, bottomLat, rightLng] = this.state.bounds;
if (rightLng < leftLng) rightLng += 360;

React.Children.forEach(this.children, marker => {
  var {lat, lng} = marker.props;
  if (lng < leftLng) lng += 360;

  var x = (lng - leftLng) * mapWidth / (rightLng - leftLng),
      y = (lat - topLat) * mapHeight / (bottomLat - topLat);

  // use RTree to determine whether to group or not
  ...
});

from google-map-react.

I've add an example https://github.com/istarkov/google-map-clustering-example just now

from google-map-react.

@arvinkx and @istarkov : Hi do you have any idea how can i grouping into different types like (googlemaps/js-marker-clusterer ) does, using this library.

from google-map-react.

@nishankkumar1994 I'm not an expert of google maps, please provide href to example

from google-map-react.

Here is the example and thanks for the help,
https://github.com/googlemaps/js-marker-clusterer

On Thu, Jul 14, 2016 at 11:47 PM, Ivan Starkov [email protected]
wrote:

@nishankkumar1994 https://github.com/nishankkumar1994 I'm not an expert
of google maps, please provide href to example

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#27 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/AH2ctQGFb2YHoGKb_1QfC1LPshqY3O8fks5qVn1AgaJpZM4Fn8SA
.

Thanks & Regards
Nishank Kumar
Skype Id - nishankkumar94 *
*M.N. - +919891782404

CONFIDENTIALITY NOTICE: The information contained in this e-mail is for the
intended recipient(s) alone. It may contain privileged and confidential
information that is exempt from disclosure under applicable law. If you
have received this email in error, please notify the sender of the error
and delete this message immediately.

from google-map-react.

As I see it's just different markers for usual clustering algorithm so just output different markers using the same idea as here #27 (comment)

from google-map-react.

@seleckis recompose is very simple library, I promise that your development life will changed a lot since u will start using it. Im saying that not because Im collaborator of recompose, but because I work with a huge react projects, and nice plain logic flow seems like the only thing which makes team code readable.

from google-map-react.

I see, but I need to use google maps in our existing project where we have defined code style and there are a lot of dependences, so we prefer to not expand the code as possible.

from google-map-react.

In my practice such limitation causes just one thing - legacy code increase in your project.
As instead of using well documented - maintained open source libraries people write their own versions of similar things.
BTW it's fun to write such code, so why not ;-)
It's easy to rewrite clustering example by yourself, just do what enhancers says you.
withHandlers - just methods in your class
withPropsOnChange - update internal state when shallowEqual of picked props is not true,
withProps - just transform props
withState - just an object property of your state

from google-map-react.

Thank you! Works well! But why cluster shoud be doubleclicked instead of one click like in original Marker Clustering example https://developers.google.com/maps/documentation/javascript/marker-clustering? Or simple click is just not implemented and map is zoomed because I just doubleclick on the map?

from google-map-react.

This clustering example is fully independent of google clustering api, so I did that clusters depends on zoom only, and does not use clicks as the source of information like show this as not a cluster.
Its just a simple example, nothing else.

from google-map-react.

Ok, thank you for explanation.

from google-map-react.

@seleckis Do you have an example that you can provide clustering without recompose? I'm newbie on react yet, and I've been facing the same issue as ours

from google-map-react.

@ribeiroguilherme I adopted this example for my project, so I could post an example without recompose later, when I finish current sprint. Most probably on Thursday.

from google-map-react.

Thanks @seleckis for your help. It will be very appreciated.

from google-map-react.

Hi @istarkov could you explain marker cluster algorithm on your example here
sorry.. because it's hard to understand that code, especially for noob like me :|

from google-map-react.

@seleckis any update on an example without recompose? I've almost got it figured out, but a 'vanilla' example would help a lot.

from google-map-react.

@BrockBeldham it's near 3 years I use React, be sure recompose is one of the best libraries in React ecosystem. I highly recommend to use it in your projects, especially for teams, as it makes code easy to read. Recompose is very simple and all enhancers there are really simple.

from google-map-react.

@r3ticuli How to expand cluster when it's clicked ? Can you help me to get this feature in my map ?

from google-map-react.

Maybe if someone still looking simple decision:
import MarkerClusterer from '@google/markerclusterer';

from google-map-react.