keplergl / keplergl/kepler.gl

Heatmap for geojson polygons

Open
#1,392 4 comments 3 reactions 1 assignee Claimed by @heshan0131 View on GitHub
waiting for response
Dominant language
TypeScript
Stars
12k
Forks
2k
Avg merge
1d 5h
Merged PRs (30d)
66

Description

**Is your feature request related to a problem? Please describe.**
In kepler.gl it's not currently possible to make a heatmap to see the overlaps in a large polygon dataset. Heatmap is only possible for points data.

I had this problem working with a large dataset of historical maps (geojson representing the polygon areas covered by each map). I wanted to see which places had the most number of maps created for them through time.
Googling, I found other people wanting to do the same thing eg: [1](https://gis.stackexchange.com/questions/344082/is-it-possible-to-create-heatmap-from-layers-of-polygon-geometry-type), [2](https://gis.stackexchange.com/questions/86897/counting-and-rasterizing-polygon-overlaps-in-qgis), [3](https://gis.stackexchange.com/questions/121381/a-map-for-the-number-of-overlapping-polygons), for [biodiversity data](https://gis.stackexchange.com/questions/334530/make-biodiversity-heatmap-in-qgis-out-of-polygons-and-not-points), [areas used by polar bears](https://gis.stackexchange.com/questions/48803/creating-heat-map-or-density-map-from-stacked-polygons-in-arcmap), [areas where pathogens are found](https://gis.stackexchange.com/questions/177738/count-overlapping-polygons-including-duplicates), [bird species](https://gis.stackexchange.com/questions/119439/counting-overlapping-polygons-from-one-shapefile-using-arcgis-desktop) etc. so I think it would be generally useful.

One way to do this is to create a new set of polygons that represent all the areas of overlap, calculate the overlap count for each - and make a choropleth. But this is not a simple GIS operation and can be very slow for large datasets.

The layer blending options in kepler.gl are helpful - but being able to apply a hue scale is even better.

**Describe the solution you'd like**
I've demoed how to make a polygon heatmap in WebGL using a fragment shader in [this Observable notebook](https://observablehq.com/@oliviafvane/heatmap-for-polygons) - inspired by the Mapbox [Colorize-Alpha filter](https://blog.mapbox.com/create-heatmaps-using-new-colorize-alpha-image-filter-2490fa5277b3). It's a simple operation: all the polygons are drawn semi-transparently; a fragment shader recolours the image with a hue scale according to the resulting opacity at any point. See example image below:

![Screenshot 2021-01-14 at 10 38 10](https://user-images.githubusercontent.com/10629004/104580176-cf4b6b00-5654-11eb-9463-50dbeab322b3.png)
**Left**: heat map. **Middle**: 'Multiply blendmode'. **Right**: semi-transparent polygons — 47,742 polygons representing map sheets created by the Ordnance Survey 1840s-1960s. Data courtesy of National Library of Scotland.

I can imagine 'heatmap' being an option in the Polygon/Geojson layer. 'Heatmap' button somewhere here?:
![Screenshot 2021-01-14 at 10 49 21](https://user-images.githubusercontent.com/10629004/104581236-31f13680-5656-11eb-9506-6c36afbec2cb.png)

If this is of interest, I am happy to make the code contribution to add this as a feature, based on my Observable demo.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.