Heatmap from markers
Create a heat map showing concentrations from marker data.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Heatmap from markers</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-heat/v0.1.3/leaflet-heat.js'></script>
<div id='map'></div>
<script>
L.mapbox.accessToken = '<your access token here>';
var map = L.mapbox.map('map', 'mapbox.light'),
// The maxZoom states which zoom the markers are fully opaque at -
// in this case, there are few markers far apart, so we set it low.
heat = L.heatLayer([], { maxZoom: 12 }).addTo(map);
// We're just using a featureLayer to pull marker data from Mapbox -
// this is not added to the map.
var layer = L.mapbox.featureLayer('examples.map-zr0njcqy').on('ready', function() {
// Zoom the map to the bounds of the markers.
map.fitBounds(layer.getBounds());
// Add each marker point to the heatmap.
layer.eachLayer(function(l) {
heat.addLatLng(l.getLatLng());
});
});
</script>
Get a free Mapbox account to create your own custom map and use it in this example.
Use this example by copying its source into your own HTML page and
replacing the Map ID
with
one of your own from your projects.
Having trouble with JavaScript? Try out Codecademy
or contact our support team.