JSFiddle - React, Tailwind, and code Playground
HTML
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.css' rel='stylesheet' />
<script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
<div id='map'></div>
CSS
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
JavaScript
mapboxgl.accessToken = 'pk.eyJ1IjoicXVlMzIxNiIsImEiOiJjaWhxZmMxMDUwMDBzdXhsdWh0ZDkyMzVqIn0.sz3lHuX9erctIPE2ya6eCw';
var url = 'https://cdn.rawgit.com/stdob/d1cbdc329ebeee0894246999555dd1f1/raw/fb82a29e441b3f99cb94834c693b323bdc227139/52372543.json';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
center: [8.538961, 47.372476],
zoom: 16,
pitch: 40,
hash: true
});
map.on('load', function() {
map.addLayer({
'id': 'extrusion',
'type': 'fill-extrusion',
"source": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": []
}
},
'paint': {
'fill-extrusion-color': '#00f',
'fill-extrusion-height': ['get', 'frequency'],
'fill-extrusion-base': 0,
'fill-extrusion-opacity': 0.9
}
});
map.addSource("data", {
type: "geojson",
data: url
});
map.addLayer({
"id": "total",
'type': 'circle',
'paint': {
'circle-radius': {
'base': 1.75,
'stops': [
[12, 2],
[22, 180]
]
},
'circle-color': '#ff7770'
},
"source": "data"
});
map.on('sourcedata', function(e) {
if (e.sourceId !== 'data') return
if (e.isSourceLoaded !== true) return
var data = {
"type": "FeatureCollection",
"features": []
}
map.querySourceFeatures('data').forEach(function(f) {
var object = turf.centerOfMass(f)
var center = object.geometry.coordinates
var radius = 10;
var options = {
steps: 16,
units: 'meters',
properties: object.properties
};
data.features.push(turf.circle(center, radius, options))
})
map.getSource('extrusion').setData(data);
})
});