Create a heatmap layer
Visualize the frequency of events by location using a heatmap layer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.smartmaps.cloud/packages/smartmaps/smartmaps-gl/v2/umd/smartmaps-gl.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
html,
body,
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
const map = new smartmapsgl.Map({
apiKey: 'INSERT API-KEY',
container: 'map',
center: [-120, 50],
zoom: 2,
style: 'essential'
});
map.on('load', () => {
// Add a geojson point source.
// Heatmap layers also work with a vector tile source.
map.addSource('earthquakes', {
type: 'geojson',
data: '../data/earthquakes.geojson'
});
map.addLayer({
id: 'earthquakes-heat',
type: 'heatmap',
source: 'earthquakes',
maxzoom: 9,
paint: {
// Increase the heatmap weight based on frequency and property magnitude
'heatmap-weight': ['interpolate', ['linear'], ['get', 'mag'], 0, 0, 6, 1],
// Increase the heatmap color weight weight by zoom level
// heatmap-intensity is a multiplier on top of heatmap-weight
'heatmap-intensity': ['interpolate', ['linear'], ['zoom'], 0, 1, 9, 3],
// Color ramp for heatmap. Domain is 0 (low) to 1 (high).
// Begin color ramp at 0-stop with a 0-transparency color
// to create a blur-like effect.
'heatmap-color': [
'interpolate',
['linear'],
['heatmap-density'],
0,
'rgba(33,102,172,0)',
0.2,
'rgb(103,169,207)',
0.4,
'rgb(209,229,240)',
0.6,
'rgb(253,219,199)',
0.8,
'rgb(239,138,98)',
1,
'rgb(178,24,43)'
],
// Adjust the heatmap radius by zoom level
'heatmap-radius': ['interpolate', ['linear'], ['zoom'], 0, 2, 9, 20],
// Transition from heatmap to circle layer by zoom level
'heatmap-opacity': ['interpolate', ['linear'], ['zoom'], 7, 1, 9, 0]
}
});
map.addLayer({
id: 'earthquakes-point',
type: 'circle',
source: 'earthquakes',
minzoom: 7,
paint: {
// Size circle radius by earthquake magnitude and zoom level
'circle-radius': [
'interpolate',
['linear'],
['zoom'],
7,
['interpolate', ['linear'], ['get', 'mag'], 1, 1, 6, 4],
16,
['interpolate', ['linear'], ['get', 'mag'], 1, 5, 6, 50]
],
// Color circle by earthquake magnitude
'circle-color': [
'interpolate',
['linear'],
['get', 'mag'],
1,
'rgba(33,102,172,0)',
2,
'rgb(103,169,207)',
3,
'rgb(209,229,240)',
4,
'rgb(253,219,199)',
5,
'rgb(239,138,98)',
6,
'rgb(178,24,43)'
],
'circle-stroke-color': 'white',
'circle-stroke-width': 1,
// Transition from heatmap to circle layer by zoom level
'circle-opacity': ['interpolate', ['linear'], ['zoom'], 7, 0, 8, 1]
}
});
});
</script>
</body>
</html>