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: [] }) }) })
<div id="map3"></div>
body { margin: 0; } #map3 { height: 100vh; }