Is it possible to create cluster of custom overlays? about ember-google-maps

[lolmaus]

PS Just noticed this thread is two and a half years old! 🙀

[acorncom]

@estshy to do that, your best bet would probably be to take advantage of the addon system implemented in #17

You should be able to end up with a template that looks something like this:

{{#g-map lat="51.508530" lng="-0.076132" as |g|}}
  {{g.markerCluster markers=(your array of positions here)}}
{{/g-map}}

To do that, you'll need to generate an addon (or an in-repo addon if #38 lands). Take a look at https://github.com/sandydoo/ember-google-maps-sample-addon/blob/master/addon/components/g-map-addons/sample-addon.js for an example of what you can do.

Once you've got your components loading up, you'll have access to the existing map and be able to do what you want.

[sandydoo]

@estshy, I'm not convinced I implied that you should use overlays instead of clustering 😅
We don't yet have a clustering component, but I think it's worth adding. Going to add this request towards the next release.
You can try following @acorncom suggestions, but there isn't any concrete documentation other than a sample addon implementation.

[lolmaus]

I have looked into clusterizing vanilla markers (not custom overlays), and turns out that adding this feature to the addon is quite challenging.

I doubt that it can be done with an ember-google-maps-addon without heavily modifying the core addon:

• the clusterer has to be initialized on the map level;
• the markers must have a reference to the clusterer;
• lots of options must be exposed to allow clusterer configuration;
• etc.

On the other hand, clusterizing in the userland is quite easy. The sample below is written from my head, might need adjustments to actually work:

import MarkerClusterer from '@googlemaps/markerclustererplus';

{
  @action
  onLoad({map, components: {markers}}) {
    new MarkerClusterer(
      map,
      markers: markers.map(item => item.markers),
      {
        // Should correspond to app.import in ember-cli-build.js
        imagePath: 'assets/images/google-maps-clusterer/m',
      }
    );
  }
}

  // ember-cli-build.js
  const fs = require('fs');
  const path = require('path');

  const clustererImagesPath = 'node_modules/@googlemaps/markerclustererplus/images';

  fs.readdirSync(clustererImagesPath).forEach(file => {
    const fileFullPath = path.join(clustererImagesPath, file);
    app.import(fileFullPath, {
      destDir: 'assets/images/google-maps-clusterer'
    });
  });

I don't know if https://github.com/googlemaps/js-markerclustererplus can be retrofitted to clusterize custom overlays. Maybe Glimmer components can be duck-typed to mimic as markers... In the worst case, this lib can be ported into the Ember land, and it doesn't necessarily have to be hardwired into ember-google-maps.

[sandydoo]

I have looked into clusterizing vanilla markers (not custom overlays), and turns out that adding this feature to the addon is quite challenging.

https://github.com/sandydoo/ember-google-maps-markerclustererplus is almost ready. Should be plug-n-play with ember-google-maps 🤞

Is there anything similar (clustering) that can be used as replacement for overlays

AFAIK there is no ready-made solution for this. I reckon the clustering library will likely accept an overlay view that mimics a marker. But don't quote me on that.

This feature is out of the scope of this addon, unless someone is generous enough to fund it.