azavea / azavea/osmesa

Test tippecanoe generation of Vector Tiles for user stats heatmap

Open
#9 0 comments 1 reaction 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.