Add multiple geometries from one GeoJSON source

Add a polygon and circle layer from the same GeoJSON source. See the example: https://docs.mapbox.com/mapbox-gl-js/example/multiple-geometries/

by cs09g

HTML

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.0/mapbox-gl.css">
<div id="map"></div>

CSS

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

JavaScript

mapboxgl.accessToken = "pk.eyJ1Ijoic2VtY29nIiwiYSI6ImlvNEFUcmMifQ.VmDLZZG7l6syscFzkBs5eg";
var map = new mapboxgl.Map({
  container: "map",
  style: "mapbox://styles/mapbox/outdoors-v11",
                    center: [-83.3, 42.55],
                    zoom: 10,
});

map.on("load", function() {
  this.addSource('symbol', {
    type: 'geojson',
    data: {
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature", "properties": {"name": 0, "value": "0-5"}, "geometry": {
            "type": "Point",
            "coordinates": [-83.54872105466953, 42.44324172142771]
          }
        }
      ]
    }
  });
  
  this.addLayer({
    id: 'time_layer',
    type: 'symbol',
    source: 'symbol',
    layout: {
      'text-field': 'bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb',
    }
  });
  map.once("styledata", ()=>{
  	console.log(map.getLayer("time_layer"));
  });
});