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.3.1/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",
                "properties": {"type": "A"},
                "geometry": {
                  "type": "Point",
                  "coordinates": [
                    13.410322, 52.512163
                  ]
                }
              },
              {
                "type": "Feature",
                "properties": {"type": "B"},
                "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.loadImage('https://i.postimg.cc/j5yshS7t/bgb-sdf-s5.png', (err, image) => {
      this.map.addImage('bg', image, {sdf: true});
      
      map.addSource('iconsSource', {
      type: "geojson",
      data: geoData
    });

  	map.addLayer({
          "id": "iconsSource",
          "source": "iconsSource",
          "type": "symbol",
          "layout": {
          	"symbol-sort-key": ["case", ["==", ["get", "type"], "A"], 1, 0],
            "icon-image": "bg",
            "icon-allow-overlap": true,  
            "text-allow-overlap": true,
          },
          "paint": {
          "icon-color": ["case", ["==", ["get", "type"], "A"], "red", "green"]
          },
        });
    })
    

	
  

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

      if (!features.length) { return; }
	  console.log(features[0].properties);
      //var feature = e.features[0];
    });
    
  });