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 map1 = new mapboxgl.Map({ container: 'map1', style: style }) map1.on('load', () => { map1.addLayer({ id: 'hover', type: 'fill', source: 'source', 'source-layer': 'nzprimarypareclsgeojson', paint: { 'fill-color': 'red' }, filter: ['==', 'id', ''] }) map1.on('mousemove', 'layer', e => { map1.setFilter('hover', ['in', 'id'].concat(e.features.map(feature => feature.properties.id))) }) map1.on('mouseleave', 'layer', e => { map1.setFilter('hover', ['==', 'id', '']) }) })
<div id="map1"></div>
body { margin: 0; } #map1 { height: 100vh; }