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.2.0/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.2.0/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')
    .addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/light-v10'));
    // 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.
var 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>

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.

Copy example