#StandWithUkraine - Stop the Russian invasion

Join us and donate. We are contributing all book royalties from 2022 to present to:
Save Life in Ukraine and Ukraine Humanitarian Appeal.

Leaflet Heatmap Points with CSV Data

Heatmaps turn individual points into hotspots or clusters, allowing viewers to explore spatial distributions of events, such as areas of high and low population density or incidents of crime. Figure 12.41 shows an interactive heatmap of bike theft locations in London between January and July 2020. The underlying data are coordinate locations for each reported bike theft, which the Leaflet.heat plugin transforms into areas of various densities. Red shows areas of highest density, or areas where bike theft appeared most often. When you zoom in, areas are re-calculated into more distinct clusters.

Figure 12.41: Explore the interactive Leaflet Heatmap.

You can adapt the code we used for this London heatmap to create your own.

  1. Visit the GitHub repository with our code, make sure you are logged in, and click Use this template button to make a personal copy of this repo.
  2. Modify map’s title and description inside index.html.
  3. Place your point coordinates data inside data.csv. Do not insert any column headers. Instead of the traditional order, you must write them in latitude,longitude (or y,x) order, one pair per line, like this:
51.506585,-0.139387
51.505467,-0.14655
51.507758,-0.141284
  1. Depending on your data density, you might want to tweak radius and blur parameters inside the <script> tag of index.html:
var heat = L.heatLayer(data, {
  radius: 25,
  blur: 15,
})
  1. Edit the following chunk of code to set your map’s default position and zoom level:
var map = L.map('map', {
  center: [51.5, -0.1], // Initial map center
  zoom: 10, // Initial zoom level
})

If for some reason you cannot see clusters, make sure your point data is represented in latitude,longitude order, not the other way around. If you have few points, try increasing the value of radius property of L.heatLayer.