HandsOnDataViz / leaflet-heatmap

Leaflet.js heatmap template

Leaflet Heatmap template

This map uses a Leaflet.Heat plugin to transform points into a heat layer.

Demo

https://handsondataviz.github.io/leaflet-heatmap

Sample data by the Metropolitan Police Service for January–July 2020.

Make your own

1. Press Use this template button to create a copy of this repository in your own GitHub account.
2. Modify map's title and description inside index.html.
3. Put your point coordinates data inside data.csv. Don't use a header, and keep it one point per line. Use latitude,longitude (or y,x) order, like below:

51.506585,-0.139387
51.505467,-0.14655
51.507758,-0.141284

4. Depending on your data density, you might want to tweak radius and blur parameters inside <script> of index.html:

  var heat = L.heatLayer(data, {
    radius: 25,
    blur: 15,
  })

For more information on customization, see Leaflet documentation.

See other Leaflet templates

• Simple Leaflet map
• Leaflet map with CSV data
• Leaflet map with open data APIs
• Leaflet map with data from Socrata
• Leaflet polygon map with tabs
• Searcheable Map Template
• Leaflet Maps with Google Sheets
• Leaflet Storymaps with Google Sheets