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