Choropleth Tile Map in JavaScript

How to make a tile-based choropleth map in JavaScript. A Choropleth map shades geographic regions by value.

New to Plotly?

Plotly is a free and open-source graphing library for JavaScript. We recommend you read our Getting Started guide for the latest installation or upgrade instructions, then move on to our Plotly Fundamentals tutorials or dive straight in to some Basic Charts tutorials.

Basic Tile

This tutorial uses Maplibre GL JS to make a map of US states using vector tiles.

var data = [{
  type: "choroplethmap", locations: ["NY", "MA", "VT"], z: [-50, -10, -20],
  geojson: "https://raw.githubusercontent.com/python-visualization/folium/master/examples/data/us-states.json"
}];

var layout = {map: {center: {lon: -74, lat: 43}, zoom: 3.5},
              width: 600, height:400};

Plotly.newPlot('myDiv', data, layout);

Streets Tile

The following example sets geojson object of type feature and geometries of type 'Polygon'. For more information see geojson attribute in the reference page. As you see, the scattermap trace is above the Choropleth map trace. To set the Choropleth map trace above all the other traces you should set below attribute.

var data = [
   {type: "scattermap", lon: [-86], lat: [34], marker: {size: 20, color: 'purple'}},
   {
    type: "choroplethmap",locations: ["AL"], z: [10], coloraxis: "coloraxis",           geojson: {type: "Feature", id: "AL", geometry: {type: "Polygon", coordinates: [[
    [-86, 35], [-85, 34], [-85, 32], [-85, 32], [-85, 32], [-85, 32], [-85, 31],
    [-86, 31], [-87, 31], [-87, 31], [-88, 30], [-88, 30], [-88, 30], [-88, 30],
    [-88, 34], [-88, 35]]]
   }}}];

var layout = {width: 600, height: 400, map: {style: 'streets',
    center: {lon: -86, lat: 33}, zoom: 5}, marker: {line: {color: "blue"}},
    coloraxis: {showscale: false, colorscale: "Viridis"}};

Plotly.newPlot('myDiv', data, layout);

Dark tile

This example uses zmin and zmax to define the lower bound and upper bound of the color domain. If these attributes are not set, Plotly determines the color domain based on the input data.

var data = [{
 type: "choroplethmap", name: "US states", geojson: "https://raw.githubusercontent.com/python-visualization/folium/master/examples/data/us-states.json", locations: [ "AL", "AK", "AZ", "AR", "CA", "CO", "CT", "DE", "FL", "GA", "HI", "ID", "IL", "IN", "IA", "KS", "KY", "LA", "ME", "MD", "MA", "MI", "MN", "MS", "MO", "MT", "NE", "NV", "NH", "NJ", "NM", "NY", "NC", "ND", "OH", "OK", "OR", "PA", "RI", "SC", "SD", "TN", "TX", "UT", "VT", "VA", "WA", "WV", "WI", "WY" ],
z: [ 141, 140, 155, 147, 132, 146, 151, 137, 146, 136, 145, 141, 149, 151, 138, 158, 164, 141, 146, 145, 142, 150, 155, 160, 156, 161, 147, 164, 150, 152, 155, 167, 145, 146, 151, 154, 161, 145, 155, 150, 151, 162, 172, 169, 170, 151, 152, 173, 160, 176 ],
zmin: 25, zmax: 280, colorbar: {y: 0, yanchor: "bottom", title: {text: "US states", side: "right"}}}
 ];

var layout = {map: {style: "dark", center: {lon: -110, lat: 50}, zoom: 0.8}, width: 600, height: 400, margin: {t: 0, b: 0}};

Plotly.newPlot('myDiv', data, layout);

Basic Tile using Mapbox

> Mapbox traces are deprecated and may be removed in a future version of Plotly.js.

Earlier examples use traces that render with Maplibre GL JS. These traces were introduced in Plotly.js 2.35.0 and replace Mapbox-based tile maps, which are now deprecated. Here's one of the earlier examples using the Mapbox-based choroplethmapbox trace

var data = [{
  type: "choroplethmapbox", locations: ["NY", "MA", "VT"], z: [-50, -10, -20],
  geojson: "https://raw.githubusercontent.com/python-visualization/folium/master/examples/data/us-states.json"
}];

var layout = {mapbox: {center: {lon: -74, lat: 43}, zoom: 3.5},
              width: 600, height:400};

var config = {mapboxAccessToken: "your access token"};

Plotly.newPlot('myDiv', data, layout, config);