Add multiple geometries from one GeoJSON source
Add a polygon and circle layer from the same GeoJSON source.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Add multiple geometries from one GeoJSON source</title>
<meta property="og:description" content="Add a polygon and circle layer from the same GeoJSON source." />
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/trackasia-gl.css" />
<script src="https://unpkg.com/[email protected]/dist/trackasia-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
const 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', () => {
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>