[Vuejs]-Mouseevent handler is not working in the vue-mapbox package

by

0👍

This works…

  //Make map zoom to a districts cluster when user clicks the cluster
  this.map.on("click", "clustersLayerId", function(e) {
    var features = $this.map.queryRenderedFeatures(e.point, {
      layers: ["clustersLayerId"]
    });
    $this.map.easeTo({
      center: features[0].geometry.coordinates,
      zoom: $this.map.getZoom() + 1
    });
  });

You also have to specify the id in the clustersLayer object…

clustersLayer: {
    id: "clustersLayerId",
    type: "circle",
    filter: ["has", "point_count"],
    paint: {
      "circle-color": "#6a0dad",
      "circle-opacity": 0.4,
      "circle-stroke-color": "#6a0dad",
      "circle-stroke-width": 1,
      "circle-radius": [
        "step",
        ["get", "sum"],
        8,
        100,
        10,
        1000,
        12,
        10000,
        14,
        100000,
        16,
        1000000,
        18
      ]
    }
  },

Leave a comment