[Draft] 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. |
modules/core/RapidSystem.js
Outdated
| @@ -92,6 +92,11 @@ export class RapidSystem extends AbstractSystem { | |||
| enabled: false, // whether the user has checked it on | |||
| conflated: true, | |||
| service: 'mapwithai', | |||
| overlay: { | |||
| url: 'https://external.xx.fbcdn.net/maps/vtp/rapid_overlay_footways/1/{z}/{x}/{y}/', | |||
There was a problem hiding this comment.
I'm unsure right now if it's possible for us to update an existing overlay without needing to respin rapid- i.e. generating a new overlay would necessarily bump the 1 in the url to a 2.
| @@ -217,7 +217,7 @@ export class PixiFeaturePoint extends AbstractFeature { | |||
| // Apply effectiveZoom style adjustments | |||
| // This is where we adjust the actual texture and anchor properties | |||
| // | |||
| if (zoom < 16) { // Hide container and everything under it | |||
| if (zoom < 10) { // Hide container and everything under it | |||
There was a problem hiding this comment.
Oops, should probably remove this. Bryan and I did this while we were trying to get SOME points to display- no longer necessary as I'm not relying on PixiFeaturePoint to do the rendering.
| 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.
| 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.
…ector data for footways.
…akes showing/hiding the overlays work as the checkbox is toggled.
| @@ -118,6 +118,11 @@ export class RapidSystem extends AbstractSystem { | |||
| enabled: false, // whether the user has checked it on | |||
| conflated: true, | |||
| service: 'mapwithai', | |||
There was a problem hiding this comment.
This 'overlay' section is entirely optional and the overlays rendering code will skip any dataset that doesn't have it defined.
| const datasets = this.context.systems.rapid.datasets; | ||
| const parentContainer = this.overlaysContainer; | ||
|
|
||
| //Extremely inefficient but we're not drawing anything else at this zoom |
There was a problem hiding this comment.
For now we just expensively delete all the container's children at each render pass. and just redraw them. It's maybe a hundred points that we're rendering at a time, so it seems to stay lightning fast as we zoom in / out.
We could still also gain speed by texture-izing the points themselves instead of drawing circles and filling them, but again, this seems pretty quick.
| } | ||
| const overlayData = vtService.getData(overlay.url).map(d => d.geojson); | ||
| const points = overlayData.filter(d => d.geometry.type === 'Point' || d.geometry.type === 'MultiPoint'); | ||
| this.renderPoints(frame, viewport, zoom, points, customColor); |
There was a problem hiding this comment.
We call renderPoints once per dataset with an 'overlay' defined. Oh, the dataset has to be enabled too!
|
|
||
| const xyCoords = viewport.project(coords); | ||
| const feature = new PIXI.Graphics(). | ||
| beginFill(color, 0.05). |
There was a problem hiding this comment.
we just fill each point with a 5% transparency for now. It's kludgy and hacky to expect this to work - but for the fact that the points generated by the endpoint are dense enough to actually make this look pretty decent.
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.