hover2

by jingsam

HTML

<script src="//unpkg.com/mapbox-gl@0.40.1/dist/mapbox-gl.js"></script>
<link rel="stylesheet" href="//unpkg.com/mapbox-gl@0.40.1/dist/mapbox-gl.css">
<div id="map2"></div>

CSS

body {
  margin: 0;
}

#map2 {
  height: 100vh;
}

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoiYWxhbnRnZW8tcHJlc2FsZXMiLCJhIjoiNkRKcXdVdyJ9.XVLiu2tRo5f2P__oBfdqsw'

const style = {
  version: 8,
  center: [174.749, -39.458],
  zoom: 7.44,
  sources: {
    source: {
      type: 'vector',
      url: 'mapbox://alantgeo-presales.nzparcels'
    }
  },
  layers: [{
    id: 'layer',
    type: 'fill',
    paint: {
    	'fill-color': 'rgba(0,0,0,0)',
      'fill-outline-color':'black',
    },
    source: 'source',
    'source-layer': 'nzprimarypareclsgeojson'
  }]
}

const map2 = new mapboxgl.Map({
  container: 'map2',
  style: style
})

map2.on('load', () => {
  map2.addSource('source-mirror', {
    type: 'vector',
    url: 'mapbox://alantgeo-presales.nzparcels'
  })

  map2.addLayer({
    id: 'hover',
    type: 'fill',
    source: 'source-mirror',
    'source-layer': 'nzprimarypareclsgeojson',
    paint: {
      'fill-color': 'red'
    },
    filter: ['==', 'id', '']
  })

  map2.on('mousemove', 'layer', e => {
    map2.setFilter('hover', ['in', 'id'].concat(e.features.map(feature => feature.properties.id)))
  })

  map2.on('mouseleave', 'layer', e => {
    map2.setFilter('hover', ['==', 'id', ''])
  })
})