hover3

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">
<script src="//unpkg.com/@turf/turf@4.7.3/turf.js"></script>
<div id="map3"></div>

CSS

body {
  margin: 0;
}

#map3 {
  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 map3 = new mapboxgl.Map({
  container: 'map3',
  style: style
})

map3.on('load', () => {
  map3.addSource('geojson', {
    type: 'geojson',
    data: {
      type: 'FeatureCollection',
      features: []
    }
  })

  map3.addLayer({
    id: 'hover',
    type: 'fill',
    source: 'geojson',
    paint: {
      'fill-color': 'red'
    }
  })

  map3.on('mousemove', 'layer', e => {
    const features = map3.querySourceFeatures('source', {
      'sourceLayer': 'nzprimarypareclsgeojson',
      'filter': ['==', 'id', e.features[0].properties.id]
    })

    let unionFeatures = features[0]
    features.forEach(feature => {
      unionFeatures = turf.union(unionFeatures, feature)
    })

    map3.getSource('geojson').setData(unionFeatures)
  })

  map3.on('mouseleave', 'layer', e => {
    map3.getSource('geojson').setData({
      type: 'FeatureCollection',
      features: []
    })
  })
})