Create a Heatmap layer on globe
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Create a Heatmap layer on a globe</title>
<meta
property="og:description"
content="Create a Heatmap layer on a globe."
/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://gateway.mapmetrics.org/assets/dist/mapmetrics.css"
/>
<script src="https://gateway.mapmetrics.org/assets/dist/mapmetrics.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
html,
body,
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
const map = new mapmetricsgl.Map({
container: "map",
maxPitch: 55,
center: [-120, 37.422],
zoom: 2,
bearing: 10,
hash: true,
});
map.setStyle("https://tiles.openfreemap.org/styles/liberty", {
transformStyle: (previousStyle, nextStyle) => {
nextStyle.projection = { type: "globe" };
nextStyle.sources = {
...nextStyle.sources,
};
nextStyle.sky = {
"atmosphere-blend": [
"interpolate",
["linear"],
["zoom"],
0,
1,
2,
0,
],
};
return nextStyle;
},
});
map.addControl(
new mapmetricsgl.NavigationControl({
visualizePitch: true,
showZoom: true,
showCompass: true,
})
);
map.addControl(new mapmetricsgl.GlobeControl());
map.on("load", () => {
// Add a geojson point source.
// Heatmap layers also work with a vector tile source.
map.addSource("earthquakes", {
type: "geojson",
data: "https://gateway.mapmetrics.org/assets/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],
],
"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>