soal / vue-mapbox

Vuejs 2 components for interacting with mapbox-gl-js
https://soal.github.io/vue-mapbox
MIT License
474 stars 147 forks source link

Click event on layer not firing off? #159

Open shmarts opened 4 years ago

shmarts commented 4 years ago

When I bind an event listener to MglGeojsonLayer it doesn't seem to emit the event

<template>
  <div class="mt-32">
    <MglMap :accessToken="accessToken" :mapStyle="mapStyle" class="map">
      <MglGeojsonLayer
        sourceId="airports"
        layerId="airports"
        :source.sync="geojson"
        :layer.sync="clusters"
        @click="handleClick"
      />
      <MglGeojsonLayer sourceId="airports" layerId="clusterCount" :layer="clusterCount" />
      <MglGeojsonLayer sourceId="airports" layerId="uncusteredPoint" :layer.sync="airport" />
    </MglMap>
  </div>
</template>

This is my template, am I doing something wrong? handleClick isn't seeming to get triggered

rognstad commented 4 years ago

This may be a dumb question, but are you clicking on a rendered feature of that layer (not just on the map generally)? @click and @mouseenter/leave are working in my project using the most recent release.

richdunajewski commented 4 years ago

I'm having the same problem with clusters. The @click event fires for the layer that has the cluster circle, but not for the unclustered layer. Something seems broken.

Maybe it's an issue with layers that reference an existing source?

osvcha commented 4 years ago

Same problem, I tried all events but none were fired.

In the clusters layer is working but not in a geojsonlayer.

Here is some of my code:

<MglMap ref="map" :accessToken="accessToken" :mapStyle.sync="mapStyle" :center="center" :zoom="zoom" @load="onMapLoaded">

<MglGeojsonLayer v-for="myLayer in geoJsonLayer" sourceId="places" :source="geoJsonSource" ref=myLayer.layerID layerId=myLayer.layerID :layer="myLayer" :key="'places' + myLayer.mapKey" @click="handleLayerClick" @mouseenter="handleLayerClick" />

handleLayerClick(event) { console.log(event); },

Anyone with a solution? Thanks!