Show Sidebar Hide Sidebar
Plotly.js

Mapbox Density Heatmap in JavaScript

How to make a D3.js-based density mapbox in JavaScript. A density mapbox uses a variable binding expression to display population density.

To plot on Mapbox maps with Plotly you may need a Mapbox account and a public Mapbox Access Token. See our Mapbox Map Layers documentation for more information.

var data = [{type: 'densitymapbox', lon: [10, 20, 30], lat: [15, 25, 35], z: [1, 3, 2]}];

var layout = {width: 600, height: 400, mapbox: {style: 'stamen-terrain'}};

Plotly.newPlot('graph', data, layout);
var data = [
  {type: "densitymapbox", lon: [10, 20, 30], lat: [15, 25, 35], z: [1, 3, 2],
   radius: 50, colorbar: {y: 1, yanchor: 'top', len: 0.45}},
  {type: 'densitymapbox', lon: [-10, -20, -30], lat: [15, 25, 35],
   radius: [50, 100, 10],  colorbar: {y: 0, yanchor: 'bottom', len: 0.45}
  }];

var layout = {mapbox: {style: 'light', center: {lat: 20}}, width: 600, height: 400};

var config = {mapboxAccessToken: 'your token'};

Plotly.newPlot('graph', data, layout, config);
Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/earthquakes-23k.csv',
  function(err, rows){function unpack(rows, key) {return rows.map(function(row){ return row[key];
})};

var data = [{
  lon: unpack(rows, 'Longitude'), lat: unpack(rows, 'Latitude'), radius:10,
  z: unpack(rows, 'Magnitude'), type: "densitymapbox", coloraxis: 'coloraxis',
  hoverinfo: 'skip'}];

var layout = {
    mapbox: {center: {lon: 60, lat: 30}, style: "outdoors", zoom: 2},
    coloraxis: {colorscale: "Viridis"}, title: {text: "Earthquake Magnitude"},
    width: 600, height: 400, margin: {t: 30, b: 0}};

var config = {mapboxAccessToken: 'your token'};

Plotly.newPlot('graph', data, layout, config);
})

plotly.js runs on all SVG-compatible browsers