How the JavaScript heatmap implementation works?

A heatmap is a powerful way to visualise data. Given a matrix of data each value is represented by a color. The implementation of the heatmap algorithm is expensive in computation terms: for each grid’s pixel you need to compute its colour from a set of known values. As you can thing, it is not feasible to be implement it on the client side because map rendering would be really slow.

But OpenLayers3 comes with a handy class, ol.layer.Heatmap, which allows to render vector data as a heatmap, so the question is: how it is made?

Really, the ol.layer.Heatmap layer uses a smart approximation to the algorithm which produces great results and is really fast. The steps can be summarised as:

  • A gradient of colors is created as a 1×256 pixel size image.
  • Each known value is rendered in a canvas as a grey blurred point using some radius. This produces a canvas where the blurred points can overlap each other and create more obscure zones. Something similar to this.

  • Finally, an image is obtained from the canvas and for each pixels a color is assigned. The color is obtained from the previous 1×256 pixel image obtained the color specified by the grey value (which goes from 0..255).

The coloured image is then rendered in the map canvas, obtaining a nice effect suited to be used for density maps. The ol.layer.Heatmap offers some properties we can use to play better: blur, radius, gradient, shadow and weight. This last can be configured per feature, allowing to assign a level of importance to each feature determining in more or less measure the final color.

The Book of OpenLayers 3, completed !!!

It was a long road but finally it comes true: The Book of OpenLayers 3 is finished.

The chapter Controls and Interactions concludes the exploration of the main concepts related with OpenLayers version 3. This chapter is focused on showing how to work with the two main tools necessary to interact with the maps and its contents.

New samples have been created. Remember the source code can be found at https://github.com/acanimal/thebookofopenlayers3 and a running demo is available at http://acanimal.github.io/thebookofopenlayers3/.

I must admit finished is not the best word to apply, OpenLayers3 is big, complex and awesome enough to write tons of chapters, but I must put a final dot and leave the typewriter… for a while :)

Some of you have contact to me notifying spelling errors. I have given priority to the release of the final chapter.

Please don’t hesitate to contact me to notify me more error (or anything), my next release will be a maintenance version fixing all that errors.

Many of you has suggested me many ideas on features to write about, so I think I will come back with a “There is more” really final chapter some day.

Thanks for your confidence.

Things to know when writing a book

Everyday is not the best day to write

It is fact, a law of universe. You could desire write but some days your brain is not clear enough, agile enough, fresh enough to write as you like.

Don’t force yourself. Don’t hate yourself to be unable to write as you would like. Relax. Disconnect. Put your head in another tasks. Do some sport.

The best thing to do when today isn’t the best day to write is not to write.

Markdown notation is great

Yes, markdown syntax is great. It is simple, clear and powerful.

At the beginning, if you come from a complex word processor like Word, Pages, LibreOffice or similar, you feel nude, but later you will appreciate that nudity.

Markdown separates your raw writes from the final visualisation.

A text editor is enough

People tend to drown looking for the perfect tool to make the work. My advice is don’t bother you, a simple text editor is enough to write any kind of book (otherwise ask to the hundreds of people that have written using a typewriter). Personally, I prefer a simple text editor over a word processor, because the first isolates the content from the way to visualise it.

Of course technology can improve the way we work. We have tons of text editor, classics like vim or emacs text editors, the new ones like SublimeTextTextMate or the Ulysses application, and also, many online text editors, like dillinger.io or StackEdit.

Keep cross references organised

Some kind of books, like technical books, arre plenty of cross references pointing to other sections, chapters or samples. It is vital for the author to maintain these references updated and organised.

When using markdown a tend to organise the book as follows:

  • Each chapter in a separate file named chapterNumber_chapterName.md
  • Put a reference on each chapter title like: 1- Introduction {#ch1-introduction}
  • Put a reference on each section title as 1.1- Some section {#sc1-some-section}

These simple tips help you organise the whole book references and simplifying the process to create cross references.

 

 

New Overlays chapter on The Book of OpenLayers3

The Book of OpenLayers 3 has been updated !!!

This book is self-published, no great editorial is behind it neither a marketing campaign, so I appreciate any shares you can make through social networks and any other media.

What you can find in this new update?

  • A new Overlays chapter. This is a short but necessary chapter that explains how we can work with overlays to place any kind of HTML located within the map. As I comment, it is a short chapter but I prefer to leave it as an independent chapter.
  • A new sample on the Events, listeners and properties chapter, named Styling features under the pointer. Once we know about feature styling and events, the sample demonstrates how we can change the style of the features under the pointer.

The book has now 6 chapters and is 80% complete. Currently I continue working on a more extensive chapter called Controls and Interactions, which I hope to have finished in approximately a month.

Please, don’t hesitate to contact me with comments and suggestions. Your feedback is really valuable for me.

Thanks for your confidence in The Book of OpenLayers 3.