TrackAsiaTrackAsia GL JS DocsExamplesAdd multiple geometries from one GeoJSON source

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>