Differentiate feature on click

Switch to another map style. See the example: https://docs.mapbox.com//mapbox-gl-js/example/setstyle/

by jscastro76

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>



<div id="map"></div>

CSS

body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }

JavaScript

let mapConfig = {
		  NYC: {
		    origin: [-74.044514, 40.689259, 39],
		    center: [-74.0137, 40.70346, 0],
		    zoom: 16.2,
		    pitch: 60,
		    bearing: 35
		  }
		}

		mapboxgl.accessToken = 'PASTE YOUR TOKEN HERE';
		let point = mapConfig.NYC;
		var map = new mapboxgl.Map({
		  style: 'mapbox://styles/mapbox/streets-v11',
		  center: point.center,
		  zoom: point.zoom,
		  pitch: point.pitch,
		  bearing: point.bearing,
		  container: 'map',
		  antialias: true,
		  hash: true
		});

		map.on('style.load', function() {

		  if (map.getSource('composite')) {
		    map.addLayer({
		      'id': '3d-buildings',
		      'source': 'composite',
		      'source-layer': 'building',
		      'type': 'fill-extrusion',
		      'minzoom': 14,
		      'paint': {
		        'fill-extrusion-color': [
		          'case',
		          ['boolean', ['feature-state', 'hover'], false],
		          '#ff0000',
		          '#ddd'
		        ],
		        'fill-extrusion-height': ["number", ["get", "height"], 5],
		        'fill-extrusion-base': ["number", ["get", "min_height"], 0],
		        'fill-extrusion-opacity': 1
		      }
		    }, 'road-label');
		  }

		  let fHover;

		  map.on('click', function(e) {
		    var features = map.queryRenderedFeatures(e.point, {
		      layers: ['3d-buildings']
		    });
		    console.log(features[0].id);
		  })

		  map.on('mousemove', function(e) {
		    //157001066
		    var features = map.queryRenderedFeatures(e.point, {
		      layers: ['3d-buildings']
		    });
		    if (features[0] && features[0].id == 42455719) {
		      mouseover(features[0]);
		    } else {
		      mouseout();
		    }

		  });

		  map.on('mouseout', function(e) {
		    mouseout();
		  });

		  function mouseout() {
		    if (!fHover) return;
		    map.getCanvasContainer().style.cursor = 'default';
		    map.setFeatureState({
		      source: fHover.source,
		      sourceLayer: fHover.sourceLayer,
		      id: fHover.id
		    }, {
		      hover: false
		    });

		 ...