Heat map - a cartogram that visually shows the intensity of a point indicator within the territory on the map. Intensity is coded by color and transparency. Surely you have seen such pictures more than once. So, what if you need to make such a cartogram, but you do not have data on hand. Heatmap Painter allows you to interactively upload data to a card and save the result for future use. The thing is very interesting and can be useful to many people: developers, analysts, designers. Read how it works and how to use it.

How does it work

Under the hood of JavaScript: Leaflet library and Leaflet.heat plugin . We have an array where we can add equivalent (by weight / intensity) points. Points can be deleted. When you draw, an array with coordinates can be saved as JSON. Github sources: heatmap-painter . Leaflet.heat pluginThere are various settings for visual display: point radius, intensity, blur, gradient (color scheme). Now, if you do not like the default settings, you need to edit this in the code, but if suddenly these options are in demand, then I will put them in a separate control. Yes, do not forget to limit the zoom of the map so that it cannot be enlarged to individual points, otherwise questions may arise about “strange patterns”. Or make noise when adding points.

How to use

To add points, hold down the space bar and move the mouse. To remove points, hold Ctrland also move the mouse. In the upper right corner, the save button. The saved file can be dragged using drag'n drop. In the hash, you can set the zoom level and coordinates of the center of the map. That's all.

Use cases

Analyst-developer
Urgent task, after 4 hours an unscheduled meeting with the customer, there is no real data yet, and will not be until tomorrow. We need at least believable screenshots, but rather a prototype demo. You sit down, chargecoffee creative and after 30 minutes you get the result.

Analytics-development manager
You are already thinking about how to make excuses to the customer for unintelligible screenshots. And then a link to the demo arrives in the messenger. After 5 minutes, you are already at the analyst-developer and jointly edit the "plausible" data. Now you know how to draw a beautiful screenshot in a presentation.

Designer
You read the article on the hub and now you know how to make a beautiful picture with a heatmap for your cool layout. Yes, and there will be the city you need, and not what you found in Google.

The copter operator The idea
came up to you to draw something on the ground / roof and remove it from the copter. Where to estimate the coordinates you now know.

Write your own ideas for use in the comments.