Allow to prevent default behavior on cluster click about vue-mapbox-gl HOT 6 CLOSED

Hi @titouanmathis, I've just opened a PR with this change. #88

Thank you for the patch-package tip, I didn't knew it 😃

from vue-mapbox-gl.

Hi @asanmiguel-nodrizatech, I am not sure that this issue is related to our package as this seems to be a behavior that would happen when using mapbox-gl directly.

If you can confirm that this is related to our package, could you provide us a link to a reproduction of the issue?

from vue-mapbox-gl.

In the mapbox cluster example (https://docs.mapbox.com/mapbox-gl-js/example/cluster/), there is this code to handle the click:

 // inspect a cluster on click
map.on('click', 'clusters', (e) => {
    const features = map.queryRenderedFeatures(e.point, {
        layers: ['clusters']
    });
    const clusterId = features[0].properties.cluster_id;
    map.getSource('earthquakes').getClusterExpansionZoom(
        clusterId,
        (err, zoom) => {
            if (err) return;

            map.easeTo({
                center: features[0].geometry.coordinates,
                zoom: zoom
            });
        }
    );
});

This code is very similar to the one in your package, but in here I could add some condition before the easeTo call.

The default behavior of the click on a cluster point should be exactly what is happening, but in your package I can't add the condition myself, so I was thinking in use the exposed event to prevent the default behavior, something like this:

function clustersClickHandler(event) {
  const feature = unref(map).queryRenderedFeatures(event.point, {
    layers: [unref(clustersLayer).id],
  })[0];
  const { cluster_id: clusterId } = feature.properties;
  // Emit a cluster click event
  emit('mb-cluster-click', clusterId, event);
  
  // Check if event is prevented before to move the view
  if (event.defaultPrevented) {
    return;
  }

  unref(map)
    .getSource(unref(sourceId))
    .getClusterExpansionZoom(clusterId, (err, zoom) => {
      if (err) {
        return;
      }
      unref(map).easeTo({
        center: feature.geometry.coordinates,
        zoom,
      });
    });
}

from vue-mapbox-gl.

Thanks for the clarification, I understand your problem better. Your proposal of a condition on the event.defaultPrevented property seems a nice addition. Could you open a PR to add it to the component?

from vue-mapbox-gl.

In the meantime, you can patch the module in your project with patch-package.

from vue-mapbox-gl.

Fixed in #88, thanks for the PR @asanmiguel-nodrizatech!

from vue-mapbox-gl.