Highlight Feature On Click

Highlight Feature On Click See the example: https://docs.mapbox.com//mapbox-gl-js/example/geojson-polygon/

by fxi

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css">

<h3> Click on a feature to highlight it.</h3>
<div id="map"></div>

CSS

html {
  font-family: helvetica, sans-serif;
}

body {
  margin: 0;
  padding: 0;
}

#map {
  position: absolute;
  top: 40px;
  bottom: 0;
  width: 100%;
}

JavaScript

// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = 'pk.eyJ1IjoidW5lcGdyaWQiLCJhIjoiY2lrd293Z3RhMDAzNHd4bTR4YjE4MHM0byJ9.9c-Yt3p0aKFSO2tX6CR26Q';
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: {
    lng: 61.5,
    lat: 38
  },
  zoom: 3
});



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

  map.addSource('rrrr', {
    'type': 'geojson',
    'promoteId': 'gid',
    'data': 'https://gist.githubusercontent.com/fxi/93c7f41cc0e18674a967b8758a173b44/raw/567bda911196ff26a7a34c2cd545fc333c94ec9d/map.geojson'
  });

  map.addSource('shed', {
    'type': 'geojson',
    'promoteId': 'gid',
    'data': 'https://gist.githubusercontent.com/fxi/f6e0fd9e38f749025ecc13733803b74b/raw/6bd7896f98658bb95e13048996e8ae45e6133b90/map.geojson'
  });

  map.addSource('points', {
    'type': 'geojson',
    'promoteId': 'gid',
    'data': 'https://gist.githubusercontent.com/fxi/5d67c0611816302e8420c8b64f837f84/raw/87ac2b729c42c4040d48ceda6ed7f95d020dfbd8/map.geojson'
  });


  map.addSource('lines', {
    'type': 'geojson',
    'promoteId': 'gid',
    'data': 'https://gist.githubusercontent.com/fxi/4bca38869a248af5b136cb08a07ab35d/raw/ea7fe2ef1620f2d5404d62f2489c4c660ebf3c34/map.geojson'
  });



  map.addLayer({
    'id': 'l-rrrr',
    'type': 'fill',
    'source': 'rrrr',
    'layout': {},
    'paint': {
      'fill-color': '#000',
      'fill-opacity': ['case',
        ['boolean', ['feature-state', 'highlight'], false],
        1,
        0.6
      ],
      'fill-outline-color': "rgba(0, 0, 0, 0)"

    }
  });


  map.addLayer({
    'id': 'l-points',
    'type': 'circle',
    'source': 'points',
    'layout': {},
    'paint': {
      'circle-color': '#0FF',
      'circle-opacity': ['case',
        ['boolean', ['feature-state', 'highlight'], false],
        1,
        0.6
      ],
      'circle-radius': 10
    }
  });

  map.addLayer({
    'id': 'l-lines',
    'type': 'line',
...