markers clusterer?

[cekk]

what do you think about adding support to markers clustering?

[MicheleBertoli]

hey @cekk,
thanks for your question, it would be a very interesting feature.

I don't think I'm going to have time to work on it very soon but I will be more than happy to review a PR.

in the meanwhile, you can use the onMapCreated callback to access the original map and create your clusters.

[cekk]

unluckily this is my first React project and i think that i will not be able to make a proper PR for this issue.

I've tried to use that event like you suggested, but i have some problems.
First of all, i retrieve the list of markers with an async ajax call to an external API, so when onMapCreated event is fired, i don't have yet the markers (first problem).

I tried to bypass this problem with a static list of markers (but i don't know how to fix previous problem), to check if the cluster library works.
As i understand correctly, i need to create a list of markers objects and pass them to a MakerClusterer instance.

On the child component i have this event handler:

onMapCreated = (gmaps) => {
    const markers = this.props.projects.map(function (item) {
        var latLng = new context.refs.gmaps.LatLng(item.latitudine, item.longitudine);
        var marker = new context.refs.gmaps.Marker({'position': latLng});
        return marker;
    });
    console.log(markers);
    // var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'images/m'});
}

But neither gmaps and this.refs.gmaps have the constructors that i need (LatLng and Marker).

Do you have any idea?

[MicheleBertoli]

hey @cekk

once the map has been created (and onMapCreated is fired) you can use the Google SDK methods, like new google.maps.LatLng.

also, if you need to access the map asynchronously (e.g. outside the onMapCreated callback) you can always do: this.refs.YOUR_GMAP_REF.getMap().

hope this helps.

[peterpetre]

Hi there, just solved this one.

OnMapCreated create the clusterer
this.markerClusterer = new MarkerClusterer(map);

then when you create your markers
this.markerClusterer.addMarker(yourmarker);

[cekk]

hi all, thanks for your help!

At the end, i skipped the creation of markers with React components of this library and managed all (markers, infowindows and clusters) with gmaps apis to not have mixed items, and because otherwise it doesn't works very well.

I really liked this library because is much easier than others, so if we can provide clusters feature in the future, could be a great thing.

Can i leave this issue open for a possible future integration?

[MicheleBertoli]

thanks @cekk, please leave this issue open.

I'll implement the feature as soon as I'll some free time (unfortunately, I'm pretty busy until the end of October but who knows :)).

If anyone wants to open a PR I'll be happy to review and merge it.

[edap]

This feature would be really nice to have. @peterpetre, did you manage to use the Marker component with this.markerClusterer.addMarker(yourmarker); how?

[peterpetre]

Unfortunately not with Marker component, but with google.maps.Marker
check my detailed solution below plus a quick solution for markers overlapping :)

onMapCreated(map) {
  // set map options
  map.setOptions({
    disableDefaultUI: true,
  });
  // add resize dom listerner on the map
  // this example keeps the center of the map on resize
  google.maps.event.addDomListener(window, 'resize', () => {
    const center = map.getCenter();
    google.maps.event.trigger(map, 'resize');
    map.setCenter(center);
  });
  // create new markerClusterer
  this.markerClusterer = new MarkerClusterer(map);
  // you can set styles to the markerClusterer if you like
  // this.markerClusterer.setStyles(mcStyles);

  // here you set the mapReady
  // i m doing it with redux
  // this.props.dispatch(setMapReady(true));
}

handleSamePosition(position) {
  if (this.markers.length > 0) {
    for (let i = 0; i < this.markers.length; i += 1) {
      const lat = this.markers[i].getPosition().lat();
      const lng = this.markers[i].getPosition().lng();
      const tempPosition = {
        lat,
        lng,
      };
      const samePosition = tempPosition.lat === position.lat && tempPosition.lng === position.lng;
      if (samePosition) {
        const newLat = position.lat + (Math.random() - 0.5) / 1500;
        const newLng = position.lng + (Math.random() - 0.5) / 1500;
        const newPosition = {
          lat: newLat,
          lng: newLng,
        };
        return newPosition;
      }
    }
  }
  return position;
}

renderMarkers() {
  // mapReady is set true in the end of onMapCreated()
  // i m doing it with redux so mapReady is this.props.mapReady
  if (mapReady) {
    const getMap = this.refs.gmaps.getMap();
    // clear out markers and markerClusterer
    this.markers = [];
    this.markerClusterer.clearMarkers();
    // map you array of markers
    // example getting data from a database or static
    yourArrayMarkers.map((coords, index) => {
      // call handleSamePosition() to solve markers on the same position problem
      const checkedCoords = this.handleSamePosition(coords);
      // create new marker
      const marker = new google.maps.Marker({
        map: getMap,
        draggable: false,
        position: {
          lat: checkedCoords.lat,
          lng: checkedCoords.lng,
        },
      });
      // add click listener on the marker and do your stuff there
      marker.addListener('click', () => this.toggleMarker(index));
      // add the marker to the clusterer
      this.markerClusterer.addMarker(marker);
      // add the marker to the markers array to use it on handleSamePosition()
      this.markers.push(marker);
      // just return false
      return false;
    });
  }
}

[edap]

Thank you @peterpetre for your detailed explanation. But I'm using react-route, and I will have do display a link in the marker using a link component, and I do not think that is possible to inject react component in markers created in the way that you've described.

[hipertracker]

How to get info from Google Map to the external code? I want to capture the zoom and all visible markers. I render <Gmaps onZoomChange={nothing => "nothing is returned :("}/> I found Gmaps has getMap() function but how to use it? I tried const ref = <Gmaps/>; ref.getMap(), it does not work. I tried <Gmaps getMap={nothing => 'again, nothing is returned here :('}/> and no joy either. Any hint?

[MicheleBertoli]

Hello @hipertracker, is this related to the markers clusterer? (It doesn't seem so).
If that's the case, do you mind opening a dedicated issue? Thanks!

[hipertracker]

I wrote my own custom wrapper for Google Maps to solve it. My callbacks return the map instance. So I can run every Google API I need.

[MicheleBertoli]

Oh, that's exactly what this package does @hipertracker :)

The onMapCreated callback gives you the map object and the getMap method can be called on the Component's instance (see here how to use refs).

The onZoomChanged (please note the final "d") event does not pass any argument:

[MicheleBertoli]

I'm closing this as it's not relevant anymore, but PRs are always welcome.
Thank you very much, everyone.