Add getClusterExpansionZoom method

[mourner]

Closes #6. Given a clusterId (with its zoom), returns the zoom on which this cluster expands into multiple clusters or points. This probably covers what most people need when they ask for "click on cluster to zoom to it", and provides a better experience than "zoom to cluster's bounding box".

cc @hyperknot @itamair

[paddoum]

Awesome!

[bdoyle522]

But how is this done with the library already integrated in Mapbox?

In the most basic case from Mapbox examples:

`map.addSource("someGeoJson", {
type: "geojson",
data: fakeGeoJSON,
cluster: true,
clusterMaxZoom: 14,
clusterRadius: 50
});

  map.addLayer({
    id: "clusters",
    type: "circle",
    source: "someGeoJson",
    interative: "true",
    filter: ["has", "point_count"],
    paint: {
        "circle-color": {
            property: "point_count",
            type: "interval",
            stops: [
                [0, "#51bbd6"],
                [100, "#f1f075"],
                [750, "#f28cb1"],
            ]
        },
        "circle-radius": {
            property: "point_count",
            type: "interval",
            stops: [
                [0, 20],
                [100, 30],
                [750, 40]
            ]
        }
    }
  });

  map.addLayer({
      id: "cluster-count",
      type: "symbol",
      source: "someGeoJson",
      filter: ["has", "point_count"],
      layout: {
          "text-field": "{point_count_abbreviated}",
          "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
          "text-size": 12
      }
  });

  map.addLayer({
      id: "unclustered-point",
      type: "circle",
      interactive: "true",
      source: "someGeoJson",
      filter: ["!has", "point_count"],
      paint: {
          "circle-color": "#11b4da",
          "circle-radius": 10,
          "circle-stroke-width": 1,
          "circle-stroke-color": "#fff"
      }
  });

  // Change the cursor to a pointer when the mouse is over the unclustered-point layer.
  map.on('mouseenter', 'clusters', function () {
      map.getCanvas().style.cursor = 'pointer';
  });

  map.on('mouseleave', 'clusters', function () {
    map.getCanvas().style.cursor = '';
  });

  map.on('click', 'clusters', function (e) {

    // const latLng = e.features[0].geometry.coordinates;

    // call getClusterExpansionZoom on cluster on click... how?
  });

`

[luka1983]

@bdoyle522 still not possible, waiting for #2457

[bdoyle522]

@luka1983 i have a workaround here, by adding the supercluster library directly to my project and doing as follows:

`
map.on('click', 'cluster', function (e) {

      const latLng = e.features[0].geometry.coordinates;
      const superC = supercluster({radius: 50}).load(myGeoJSON.features);
      const currentZoom = parseInt(map.getZoom());
      const thisCluster = superC.getClusters([e.lngLat.lng-1, e.lngLat.lat-1, e.lngLat.lng+1, e.lngLat.lat+1], currentZoom);
      let clusterId;
      for(let i = 0; i < thisCluster.length; i++) {
        if(thisCluster[i].properties) {
          if(thisCluster[i].properties.cluster){
            clusterId = thisCluster[i].properties.cluster_id;
          }
        }
      }

      if(clusterId || clusterId === 0) {
        const zoom = superC.getClusterExpansionZoom(clusterId, currentZoom);
        map.flyTo({center: latLng, zoom: zoom});
      }
    });

`

It is not pretty but it accomplishes my click-to-zoom in my project.