Heatmap made easy with uMap

Posted by ybon on 21 April 2014 in English (English)

I’m working on adding a new type of layer in uMap: heatmap. Here is a demo

heatmap on uMap

When creating a new layer, you can now chose between three types: Default, Cluster or Heatmap (new). And you can still switch from one type to another once created.

layer switch

When editing a heatmap layer, two new advanced properties will appear (both are optional):

  • heatmap radius: this allows you to override the default radius of the heatmap, which is by default 25px

  • heatmap intensity property: you can define a property of your feature (say a property of the geojson you have uploaded) to be used as intensity factor; for example, in the demo I’ve set up, I’ve added “CIRCONF” as intensity property, which is the circumference of each tree used of computing the heatmap.

Many thanks go to @mourner for the plugin Leaflet.heat.

Once again, this is a working progress easter egg, please test and give feedback!

Comment from baditaflorin on 21 April 2014 at 22:23

Wow, this is exactly what i was looking for the mapping party that we will do in Bucharest, next month.

Now i was doing a analyst to see where in bucharest we are missing restaurants, pharmacies,street numbers, etc. I did it with QGIS, using voronoi. So we know what neighborhoods require the most attention, so we know where to focus

And i spend like 2 hours downloading the data, formatting, etc.

Alt text

Alt text

Can you help me make a working demo for Bucharest, with a heatmap for street numbers ( our top priority is to finish adding all the street numbers in bucharest . ( We have added around 30000, we still have around 30000 to go, at least.

Also we want to add points of interest, accessibility, etc

Comment from baditaflorin on 21 April 2014 at 22:37

At least for the type of data what i want, i find the heatmap not really usefull, for presenting the data

There is an obtion to change the default color ? The blue is really pale and not really simple to see. But i realy live the cluster information :)

Comment from baditaflorin on 21 April 2014 at 22:38

Maybe if i know how to change the intensity, the i will get by default a more nice heatmap ? Can i overide the intensity in the dialog box ? Without having to create a new field in my original document ?

Comment from ybon on 22 April 2014 at 09:29

Cool :)

Comment from pnorman on 24 April 2014 at 18:56

Great to see more heatmap options. Are you able to change the colours used to a more traditional heatmap option?

If you’re using Leaflet.heat, does come with the same advantages and disadvantages of it?

I’ve looked at Leaflet.heat, but it falls down in the face of large datasets.

Comment from ybon on 24 April 2014 at 19:07

Yes, I’m using Leaflet.heat from the Great Vladimir.

I’ve not yet added all the options that heat has because I try to make a balance between useful option for the masses and too much options that makes the UI confusing. So I’m going step by step, and I think there is yet too much option for the common user, so I need to refactor a bit. But I will add the color option certainly soon (also this one is hard to make easy and user friendly to configure, as it’s an Array), in particular if it’s been asked ;)

BTW, I’m curious about what you mean by “more traditional heatmap option”, isn’t blue to red the common palette for this?

Comment from FrViPofm on 7 May 2014 at 08:58

Maybe an option like on comcomMaker to switch between “basic” and “expert”.


If I remember well, it is pure CSS, only a bit of js to change le class of the body.

Comment from ybon on 7 May 2014 at 09:05

This is exactly what I’ve in mind :)

Comment from tyme on 14 March 2016 at 19:47

I was wondering what format the data needs to be for the heatmap to work right? I uploaded a bunch of gpx files, and nothing shows on the screen if I set it to heatmap.

Comment from Romainbou on 11 October 2016 at 15:07

Hi, I am pretty skeptic about the good working of the overall process. I just created a heatmap in umap, using a dataset made using overpass-turbo: I selected just all the nodes witch tag name= finishes by “ey”. But there is an odd behaviour of the heatmap generated, when you change the zoom level, a particular area is wether clear, wether fully colored. We can see when zooming in that the majority of the point of the data is located on the east middle of France. But when you zoom out, the heatmap does not show this at all. Here are the links at different zoom levels:

zoom8, the data is clearly to the East zoom6 : the data is more diffuse

Changing the “radius” parameter tends to amplify this weird behaviour. Do you have any advices please @ybon ?

Login to leave a comment