Test tippecanoe generation of Vector Tiles for user stats heatmap
- Dominant language
- Scala
- Stars
- 81
- Forks
- 26
- PR merge metrics
- No merged PRs in 30d
Description
Tippecanoe generates pyramided vector tiles from newline-delimited GeoJSON, taking into account a lot of factors for how it structures the vector tiles through zoom levels. It would be advantages for us to take advantage of that work. The test here is to:
- Generate newline-delimited GeoJSONs for each node for commits by a user. Potentially in multipoint features
- Run tippecanoe over this to generate vector tiles that can then be styled in a heatmap, similar to the vector tile spike that lead to the below HTML prototype (previously I was baking the centriod of changesets, which is incorrect):
```html
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
mapboxgl.accessToken = 'pk.eyJ1IjoibG9zc3lyb2IiLCJhIjoiY2o3a3V2cWFmMmkyeDMybzJtem5xNmIzZyJ9.L1sWznm30l5lih8MAWGQ8A';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
zoom: 10,
center: [-122.447303, 37.753574]
});
map.on('load', function () {
//Heatmap layers also work with a vector tile source.
map.addSource('footprint', {
type: 'vector',
tiles: ['https://s3.amazonaws.com/vectortiles/test-vts/peruser/piaco_dk/{z}/{x}/{y}.mvt']
});
map.addLayer({
"id": "footprint-heat",
"type": "heatmap",
"source": "footprint",
"source-layer": "user_footprint",
"maxzoom": 13,
"paint": {
//Increase the heatmap weight based on frequency and property magnitude
"heatmap-weight": {
"property": "mag",
"type": "exponential",
"stops": [
[0, 0],
[6, 1]
]
},
//Increase the heatmap color weight weight by zoom level
//heatmap-ntensity is a multiplier on top of heatmap-weight
"heatmap-intensity": {
"stops": [
[0, 1],
[9, 3]
]
},
//Color ramp for heatmap. Domain is 0 (low) to 1 (high).
//Begin color ramp at 0-stop with a 0-transparancy color
//to create a blur-like effect.
"heatmap-color": {
"stops": [
[0, "rgba(33,102,172,0)"],
[0.2, "rgb(103,169,207)"],
[0.4, "rgb(209,229,240)"],
[0.6, "rgb(253,219,199)"],
[0.8, "rgb(239,138,98)"],
[1, "rgb(178,24,43)"]
]
},
//Adjust the heatmap radius by zoom level
"heatmap-radius": {
"stops": [
[0, 2],
[9, 20]
]
},
//Transition from heatmap to circle layer by zoom level
"heatmap-opacity": {
"default": 1,
"stops": [
[7, 1],
[9, 0]
]
},
}
}, 'waterway-label');
map.addLayer({
"id": "footprint-point",
"type": "circle",
"source": "footprint",
"source-layer": "user_footprint",
"minzoom": 7,
"paint": {
//Size circle raidus by earthquake magnitude and zoom level
"circle-radius": {
"property": "mag",
"type": "exponential",
"stops": [
[{ zoom: 7, value: 1 }, 1],
[{ zoom: 7, value: 6 }, 4],
[{ zoom: 16, value: 1 }, 5],
[{ zoom: 16, value: 6 }, 50],
]
},
//Color circle by earthquake magnitude
"circle-color": {
"property": "mag",
"type": "exponential",
"stops": [
[1, "rgba(33,102,172,0)"],
[2, "rgb(103,169,207)"],
[3, "rgb(209,229,240)"],
[4, "rgb(253,219,199)"],
[5, "rgb(239,138,98)"],
[6, "rgb(178,24,43)"]
]
},
"circle-stroke-color": "white",
"circle-stroke-width": 1,
//Transition from heatmap to circle layer by zoom level
"circle-opacity": {
"stops": [
[7, 0],
[8, 1]
]
}
}
}, 'waterway-label');
});
```
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reviewing the included Mapbox GL JS heatmap prototype and the repository's existing vector-tile spike, then identify where per-user node data can become newline-delimited GeoJSON. Done means producing per-node GeoJSON, generating pyramided tiles with Tippecanoe, and confirming they can drive the heatmap shown in the prototype.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, scala
- Domain
- data-visualization
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100