Mapbox-gl-js-template

HTML

<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.css">
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v2.5.0/mapbox-gl.js"></script>
<div id='map' class="myMap"></div>

CSS

html,
body {
  height: 100%;
}

#map {
  height: 100%;
  width: 100%;
}

JavaScript

mapboxgl.accessToken =  'pk.eyJ1IjoibW9sbHltZXJwIiwiYSI6ImNpazdqbGtiZTAxbGNocm0ybXJ3MnNzOHAifQ.5_kJrEENbBWtqTZEv7g1-w';

const geoData= {
    "type": "FeatureCollection",
    "features": [
			  {
                "type": "Feature",
                //id: 1,
                "properties": {aid: 1},
                "geometry": {
                  "type": "Point",
                  "coordinates": [
                    13.410322, 52.512163
                  ]
                }
              },
              {
                "type": "Feature",
                //id: 2,
                "properties": {aid: 2},
                "geometry": {
                  "type": "Point",
                  "coordinates": [
                    13.420322, 52.512163
                  ]
                }
              }
            ]
  };
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v9',
  zoom: 12,
  center: [13.420322, 52.512163],
});

map.on('load', () => {
    
    map.addSource('points', {
      type: "geojson",
      promoteId: "aid",
      data: geoData
    });
	
		    	map.addLayer({
          "id": "points",
          "source": "points",
          "type": "circle",
          "paint": {"circle-color": [
    "case",
    ["==",["feature-state", "selected"], true], "yellow",
    ["==", ["id" ],  2 ],"red",
    "gray"
]}
        });


	
  

 map.on('click', function (e) {
      var features = map.queryRenderedFeatures(e.point);

      if (features.length && features[0].layer.id === "points") { 
      console.log("add");
        console.log(features[0].id);
        map.setFeatureState({source: 'points',id: features[0].id,}, {selected: true});
      } else {
      console.log("rem");
        map.removeFeatureState({source: 'points'});
      }
    });
    
  });