Heat maps

[1ec5]

This GL JS example and this Android SDK demo app activity claim to demonstrate “heat maps”, but in reality they’re hot spot maps. The “heat” only represents frequency, but not, say, a magnitude property in the GL JS example. The overlaid shapes can be blurred circles but not amorphous shapes, and the heat comes apart as you zoom in rather than spreading out.

Some of the requests we’ve gotten for heat maps (such as mapbox/mapbox-gl-native#3420, mapbox/mapbox-gl-native#6304) have turned out to be for actual heat maps. In the Google Maps JavaScript API, HeatmapLayer can work with WeightedLocations for this effect. The Google Maps SDK for Android supports heat maps as well using HeatmapTileProvider and WeightedLatLng. On iOS/macOS, there are a number of libraries based on MapKit (example) that implement heat maps using a custom-rendered MKOverlayView or the more modern MKOverlayRenderer.

The Android and iOS SDKs support something along the lines of these MapKit-based libraries, via an unsupported, undocumented OpenGL style layer API. But we should have a straightforward, officially supported solution for heat maps. As far as I can tell, we may need a new layer type that clusters nearby points of similar intensity into amorphous shapes (rather than collapsing them down into a single point). Please chime in if you think it’s doable with the existing layer types, though.

/cc @mourner @lucaswoj @danswick @noemiwalzebuck @johndpope

[lucaswoj]

Prior art of which I'm aware:

• @peterqliu has been working on a proposal for a colorize-alpha property which would enable users to create heatmaps based on existing layer types.
• @peterqliu has been working on a GL JS proof-of-concept plugin that adds a new heatmap layer type https://github.com/mapbox/mapbox-gl-heatmap (private repo, sorry)
• an implementation of custom layer types is underway in GL JS which would provide an officially-supported way to add a heatmap layer type Support custom layer types powered by WebGL  mapbox-gl-js#281

[johndpope]

https://developer.skobbler.com/
also noteworthy -

[johndpope]

I did it using the raster tile overlay.
(ideally it would be done using opengl but this is ok out of the gate)

(this involved hacking the http_file_source.mm and would also involve protocol swizzling in order to override the control flow outside of sdk)

 NSURLSessionConfiguration *sessionConfig = [NSURLSessionConfiguration defaultSessionConfiguration];
        sessionConfig.protocolClasses = @[NetSandbox.class];

inside the http_file_source.mm to overide the

NetSandbox.h
https://gist.github.com/johndpope/ebcb7c870cb09fd0cbf9b822f3f677a6

https://gist.github.com/johndpope/fc9749391faad76ee6b94d2ea7a237b6

IMPORTANT
At the heart of this - I need the mapbox SDK to surface a way to provide a raster datasource for local data (not by disk location) / but by a delegate / callback like MKTileOverlay methods.
(or document the way to do this - as it's not entirely obvious)

eg.
GridTileOverlay
-(void)loadTileAtPath:(MKTileOverlayPath)path result:(void (^)(NSData *, NSError *))result {
UIImage *image = [GridTileOverlay imageForTileX:x y:y z:z];
NSData *tileData = UIImagePNGRepresentation(img);
result(tileData,nil);
}

[1ec5]

At the heart of this - I need the mapbox SDK to surface a way to provide a raster datasource for local data (not by disk location) / but by a delegate / callback like MKTileOverlay methods.
(or document the way to do this - as it's not entirely obvious)

There isn’t currently a way to do this for raster content, other than to stand up a local server and point an MGLRasterSource at it. mapbox/mapbox-gl-native#7471 would introduce an API very similar to -[MKTileOverlay loadTileAtPath:result:].

[lucaswoj]

Migrated to mapbox/mapbox-gl-js#3994

[1ec5]

The discussion moved to mapbox/mapbox-gl-js#4756, since we realized TINs wouldn’t help us implement heat maps.