Locator Overlays aka 'Heatmaps'. #1437
Conversation
|
This is going to be awesome! I can imagine this being useful for any of the data layers to be able to show users at low zoom where the data exists. |
| const vtService = this.context.services.vectortile; | ||
| const datasets = this.context.systems.rapid.datasets; | ||
|
|
||
| // for (const [key, dataset] in datasets) { |
There was a problem hiding this comment.
Eventually this code should go through all the Rapid datasets and look for any overlays. For now it's hard-wired to just go looking for fbRoads.
To keep the PR minimal, I am demonstrating footways overlays wired up to fbRoads, but that's just for demo purposes. Footways impl is in a different branch.
There was a problem hiding this comment.
I have since rewired the PR to look through all the datasets, examine which ones have overlays, and conditionally display those overlays IF the dataset is enabled.
| overlayData = vtService.getData(overlay.url).map(d => d.geojson); | ||
| } | ||
|
|
||
| // const polygons = overlayData.filter(d => d.geometry.type === 'Polygon' || d.geometry.type === 'MultiPolygon'); |
There was a problem hiding this comment.
The vector data we get back seems to consist of two bits of data:
Polygon borders for awater layer (which we can safely discard)
and Points that have a single property: weight. Presumably the weight is to control how bright/vivid the heatmap should be, but in empirical testing I saw values from 100 to 300,000.
There was a problem hiding this comment.
After showing this to Jonah and a few other folks, the existing implementation was fuzzy/blobby enough that they were convinced it was a raster map. I think the existing implementation is more than good enough without needing to resort to darkening/lightening the alpha with a weight value interpolation. We can revisit in the future.
…ector data for footways.
…akes showing/hiding the overlays work as the checkbox is toggled.
Bonkles
changed the title
Locator overlays for Rapid Datasets are now a thing!
The procedure is as follows:
This POC shows the resultant experience of zooming in at very high zooms over the continental US.
To test, enter poweruser mode and enable the 'meta Footways' dataset. You should then see the heatmap appear over the map if you're at low zooms (0-15). The color/checkbox for the dataset also propagates to the heatmap, so you get something like this:
overlays_color_switching_toggling.mov
The code creates a new layer above the map that styles any vector data points it gets from the heatmap endpoint. Right now, we don't do anything fancy- just draw a circle at 5% opacity at every point and make it large enough to overlap with its neighbors and the transparency stacking does a pretty good job.