Add multiple geometries from one GeoJSON source
Add a polygon and circle layer from the same GeoJSON source.
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Add multiple geometries from one GeoJSON source</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /><script src="https://unpkg.com/trackasia-gl@1.0.5/dist/trackasia-gl.js"></script><link href="https://unpkg.com/trackasia-gl@1.0.5/dist/trackasia-gl.css" rel="stylesheet" /><style> body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; }</style></head><body><div id="map"></div><script>var map = new trackasiagl.Map({container: 'map',style: 'https://maps.track-asia.com/styles/v1/streets.json?key=public_key',center: [106.415997,10.506542],zoom: 10}); map.on('load', function () {map.addSource('national-park', {'type': 'geojson','data': {'type': 'FeatureCollection','features': [{'type': 'Feature','geometry': {'type': 'Polygon','coordinates': [[[106.353637,10.584978],[106.284551,10.584758],[106.275349,10.541646],[106.246768,10.541017],[106.251343,10.423383],[106.32687,10.423768],[106.360619,10.43479],[106.363694,10.409124],[106.439713,10.409197],[106.439711,10.423791],[106.572133,10.423548],[106.577415,10.550766],[106.539486,10.558107],[106.520284,10.572459],[106.487219,10.550822],[106.446951,10.56319],[106.370644,10.563267],[106.353637,10.584978]]]}},{'type': 'Feature','geometry': {'type': 'Point','coordinates': [106.415061,10.506229]}},{'type': 'Feature','geometry': {'type': 'Point','coordinates': [106.505184,10.488084]}},{'type': 'Feature','geometry': {'type': 'Point','coordinates': [106.354465,10.488737]}}]}}); map.addLayer({'id': 'park-boundary','type': 'fill','source': 'national-park','paint': {'fill-color': '#888888','fill-opacity': 0.4},'filter': ['==', '$type', 'Polygon']}); map.addLayer({'id': 'park-volcanoes','type': 'circle','source': 'national-park','paint': {'circle-radius': 6,'circle-color': '#B42222'},'filter': ['==', '$type', 'Point']});});</script> </body></html>