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('isobands', {
                    type: 'geojson',
                    data: {
                    "type": "FeatureCollection", "features": [
                        {
                        "type": "Feature", "properties": {"name": 0, "value": "0-5"}, "geometry": {
                          "type": "MultiPolygon",
                          "coordinates": [[
                            [
                              [-83.54872105466953, 42.44324172142771],
                              [-83, 42.54037985996971],
                              [-83.38623440886444, 42.716279494849154],
                              [-83.54872105466953, 42.44324172142771]
                            ], 
                            [
                              [-83.43067722107492, 42.558204994447266], 
                              [-83.32527922238276, 42.59062883596098], 
                              [-83.30580765857526, 42.59934648630116],
                              [-83.26731544680634, 42.52946417619238], 
                              [-83.43067722107492, 42.558204994447266]
                            ],
                            [
                              [-83.38431325986953, 42.61568663095704],
                              [-83.36987180091825, 42.61568663095704], 
                              [-83.38369391380526, 42.61500515083244], 
                              [-83.38431325986953, 42.61568663095704]
                            ]
                          ]]
                        }
                    }
                    ]
                }
                });
  
this.addLayer({
                    id: 'time_layer',
                    type:...