OpenStreetMap

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

Hide this comment

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

http://umap.openstreetmap.fr/en/map/untitled-map_7488#13/44.4311/26.0889

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 :)

Hide this comment

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 ?

Hide this comment

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.

Hide this comment

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?

Hide this comment

Comment from FrViPofm on 7 May 2014 at 08:58

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

See http://comcommaker.openstreetmap.fr/

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

Hide this comment

Comment from ybon on 7 May 2014 at 09:05

This is exactly what I've in mind :)

Hide this comment

Leave a comment

Parsed with Markdown

  • Headings

    # Heading
    ## Subheading

  • Unordered list

    * First item
    * Second item

  • Ordered list

    1. First item
    2. Second item

  • Link

    [Text](URL)
  • Image

    ![Alt text](URL)

Login to leave a comment