{{!-- We need to detect layer order so bind event to all mouse interactions--}}
{{mapbox-gl-on "mousemove" (action "handleLayerMouseMove")
  eventSource=this.map}}

{{!-- Bind layer groups" layers --}}
{{#each this.layers key="style" as |layerObject|}}
  {{mapbox-gl-layer
    map=this.map
    layer=layerObject.mapboxGlStyle
    before=layerObject.before
  }}
  {{!-- if the layer is hightlightable or tooltipable, bind events --}}
  {{#if (or layerObject.highlightable layerObject.tooltipable)}}
    {{mapbox-gl-on "mouseleave" layerObject.mapboxGlStyle.id (action "handleLayerMouseLeave")
      eventSource=this.map}}
  {{/if}}

  {{#if layerObject.clickable}}
    {{mapbox-gl-on "click" layerObject.mapboxGlStyle.id (action "handleLayerMouseClick")
      eventSource=this.map}}
  {{/if}}
{{/each}}

{{yield (hash
  tooltip=(if (and this.mousePosition this.hoveredFeature this.hoveredLayer.tooltipable)
    (component this.toolTipComponent
      feature=this.hoveredFeature
      layer=this.hoveredLayer
      mousePosition=this.mousePosition
      top=this.mousePosition.y
      left=this.mousePosition.x
    )
  )
)}}