PolymerVis / mapbox-gl

Polymer 2.0 custom element for mapbox-gl-js. Uses WebGL to render interactive maps from vector tiles and Mapbox styles - compatible with deck-gl.
https://www.webcomponents.org/element/PolymerVis/mapbox-gl
26 stars 8 forks source link

Handling Layer Events Error on Polymer 2 #24

Closed ralexrdz closed 6 years ago

ralexrdz commented 6 years ago

I'm trying to set an onClick event on a Layer like this

<mapbox-layer
  map="[[map]]"
  layer-id="[[candidateLayer.id]]"
  rendering-type="[[candidateLayer.type]]"
  source="[[candidateLayer.source]]"
  color="[[candidateLayer.color]]"
  opacity="0.7"
  events-to-watch="click"
  on-mapbox-layer-click="_layerClicked">
</mapbox-layer>
_layerClicked (e) {
  console.log(e)
}

When clicking a layer I get this error

s[i].call is not a function
    at e.Evented.fire (evented.js:81)
    at h (bind_handlers.js:139)
    at HTMLDivElement.s (bind_handlers.js:114)

I also tried it with mousemove and mouseleave without success

eterna2 commented 6 years ago

I suspect the issue might be because when the dom-repeat update the layer without restamping it.

As my listeners are attached and detached when the layer is attached onto the DOM.

I have not considered the dom-repeat use case when building this. So I suspect most of the bugs are because of this.

Can you do me a favor? Can I know the browser and version you are using? As well as, is the event handling demo working at the webcomponents page?

I want to know whether is it a browser version issue, or the dom-repeat issue?

It would be best if u can have a snippet of ur code, including the previous error. So I can do a more comprehensive debugging.

I will try to fix it over the weekend.

ralexrdz commented 6 years ago

I'm using Chrome Version 59.0.3071.104 and version 2.0.11 of PolymerVis/mapbox-gl

ralexrdz commented 6 years ago

I'm soooo sorry. I did a simple example and didn't have the error.

Anybody can see it and run it here. example repo

What I was doing wrong was that I copied from API in webcomponents

<mapbox-gl id="map"
    interactive
    map="{{map}}"
    map-style-url="mapbox://styles/mapbox/dark-v9"
    script-src="https://api.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.js"
    access-token="pk.eyJ1IjoiZXRlcm5hMiIsImEiOiJjaXppZjRoaTIwMmYxMndsNHJ4dzR1eWJsIn0.MvJ5fsV47RHlSAt2fBEKLg"
    zoom=10
    pitch=45
    bearing=0></mapbox-gl>

removing this line

script-src="https://api.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.js"

made it work, as it loads newest version of mapbox-gl-js by Default as you can see here

@eterna2 I would recomend to remove that line from documentation. Thanks for the atention