Skip to content

Instantly share code, notes, and snippets.

@lossyrob

lossyrob/index.html Secret

Last active May 24, 2018 04:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save lossyrob/aa3481a6686509bd16dff3e2e76306a8 to your computer and use it in GitHub Desktop.
Save lossyrob/aa3481a6686509bd16dff3e2e76306a8 to your computer and use it in GitHub Desktop.
Download ZIP
Hashtag extent v1
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
#menu {
position: absolute;
background: #fff;
padding: 10px;
font-family: 'Open Sans', sans-serif;
}
</style>
<div id='map'></div>
<div id='menu'>
<select>
<option value="missingmaps">#missingmaps</option>
<option value="redcross">#redcross</option>
<option value="eliminatemalaria">#eliminatemalaria</option>
<option value="tanzania">#tanzania</option>
<option value="peacecorps">#peacecorps</option>
<option value="maproulette">#maproulette</option>
</select>
<!-- <input type="text" name="uname" value="missingmaps"></input> -->
</div>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibG9zc3lyb2IiLCJhIjoiY2o3a3V2cWFmMmkyeDMybzJtem5xNmIzZyJ9.L1sWznm30l5lih8MAWGQ8A';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
zoom: 6,
center: [34.158319, -1.320277]
});
// encodeURIComponent()
map.on('load', function () {
//Heatmap layers also work with a vector tile source.
map.addSource('footprint', {
type: 'vector',
tiles: ['https://s3.amazonaws.com/osmesa-osm-pds/test/results/hashtag-extent-vts/missingmaps/{z}/{x}/{y}.mvt']
});
function changeSource(newName) {
var newSource = "https://s3.amazonaws.com/osmesa-osm-pds/test/results/hashtag-extent-vts/" + newName + "/{z}/{x}/{y}.mvt"
map.removeSource('footprint');
map.addSource('footprint', {
type: 'vector',
tiles: [newSource]
});
/* var newSource = "https://s3.amazonaws.com/vectortiles/test-vts/hashtag-extent-vts/" + newName + "/{z}/{x}/{y}.mvt"
* map.setFilter('footprint-heat', ['==', 'hashtag', newSource]);
* map.setFilter('footprint-point', ['==', 'hashtag', newSource]);*/
}
map.addLayer({
"id": "footprint-heat",
"type": "heatmap",
"source": "footprint",
"source-layer": "hashtag_footprint",
"maxzoom": 15,
"paint": {
//Increase the heatmap weight based on frequency and property magnitude
"heatmap-weight": {
"property": "density",
"type": "exponential",
"stops": [
[0, 0],
[1, 0.1],
[10, 0.3],
[100, 0.6],
[1000, 0.8],
[10000, 1]
]
/* "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],
[90000, 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.0, "rgba(0, 0, 4, 0)"],
* [0.045454545454545456, "rgb(6, 5, 26)"],
* [0.09090909090909091, "rgb(19, 13, 52)"],
* [0.13636363636363635, "rgb(34, 17, 80)"],
* [0.18181818181818182, "rgb(54, 16, 107)"],
* [0.22727272727272727, "rgb(74, 16, 121)"],
* [0.2727272727272727, "rgb(93, 23, 127)"],
* [0.3181818181818182, "rgb(112, 31, 129)"],
* [0.36363636363636365, "rgb(131, 38, 129)"],
* [0.4090909090909091, "rgb(150, 44, 128)"],
* [0.45454545454545453, "rgb(170, 51, 125)"],
* [0.5, "rgb(189, 57, 119)"],
* [0.5454545454545454, "rgb(208, 65, 111)"],
* [0.5909090909090909, "rgb(226, 77, 102)"],
* [0.6363636363636364, "rgb(239, 93, 94)"],
* [0.6818181818181818, "rgb(247, 114, 92)"],
* [0.7272727272727273, "rgb(252, 137, 97)"],
* [0.7727272727272727, "rgb(254, 159, 109)"],
* [0.8181818181818182, "rgb(254, 182, 124)"],
* [0.8636363636363636, "rgb(254, 204, 143)"],
* [0.9090909090909091, "rgb(253, 226, 163)"],
* [0.9545454545454546, "rgb(252, 247, 185)"]
* ]
* },*/
"heatmap-color": [
"interpolate",
["linear"],
["heatmap-density"],
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)"
/* 0.0, "rgba(0, 0, 4, 0)",
* 0.045454545454545456, "rgb(6, 5, 26)",
* 0.09090909090909091, "rgb(19, 13, 52)",
* 0.13636363636363635, "rgb(34, 17, 80)",
* 0.18181818181818182, "rgb(54, 16, 107)",
* 0.22727272727272727, "rgb(74, 16, 121)",
* 0.2727272727272727, "rgb(93, 23, 127)",
* 0.3181818181818182, "rgb(112, 31, 129)",
* 0.36363636363636365, "rgb(131, 38, 129)",
* 0.4090909090909091, "rgb(150, 44, 128)",
* 0.45454545454545453, "rgb(170, 51, 125)",
* 0.5, "rgb(189, 57, 119)",
* 0.5454545454545454, "rgb(208, 65, 111)",
* 0.5909090909090909, "rgb(226, 77, 102)",
* 0.6363636363636364, "rgb(239, 93, 94)",
* 0.6818181818181818, "rgb(247, 114, 92)",
* 0.7272727272727273, "rgb(252, 137, 97)",
* 0.7727272727272727, "rgb(254, 159, 109)",
* 0.8181818181818182, "rgb(254, 182, 124)",
* 0.8636363636363636, "rgb(254, 204, 143)",
* 0.9090909090909091, "rgb(253, 226, 163)",
* 0.9545454545454546, "rgb(252, 247, 185)"*/
],
//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": [
[12, 1],
[15, 0]
]
},
}
}, 'waterway-label');
map.addLayer({
"id": "footprint-point",
"type": "circle",
"source": "footprint",
"source-layer": "hashtag_footprint",
"minzoom": 12,
"paint": {
//Size circle raidus by earthquake magnitude and zoom level
"circle-radius": {
"property": "density",
"type": "exponential",
/* "stops": [
* [{ zoom: 7, value: 1 }, 1],
* [{ zoom: 7, value: 6 }, 4],
* [{ zoom: 16, value: 1 }, 5],
* [{ zoom: 16, value: 6 }, 50],
* ]*/
stops: [
[1, 2],
[10, 4],
[100, 6],
[1000, 8],
[10000, 10],
[34615, 15]
]
},
//Color circle by point density
"circle-color": {
"property": "density",
"type": "exponential",
"stops": [
[1, "rgb(54, 16, 107)"],
[2, "rgb(74, 16, 121)"],
[3, "rgb(93, 23, 127)"],
[10, "rgb(112, 31, 129)"],
[100, "rgb(189, 57, 119)"],
[1000, "rgb(239, 93, 94)"],
[10000, "rgb(254, 204, 143)"],
]
},
/* "circle-color": {
* "property": "density",
* "type": "exponential",
* "stops": [
* [0, "rgba(33,102,172,0)"],
* [2, "rgb(103,169,207)"],
* [4, "rgb(209,229,240)"],
* [6, "rgb(253,219,199)"],
* [8, "rgb(239,138,98)"],
* [10, "rgb(178,24,43)"]
* ]
* },*/
"circle-stroke-color": "red",
"circle-stroke-width": 1,
//Transition from heatmap to circle layer by zoom level
"circle-opacity": {
"stops": [
[7, 0],
[8, 1]
]
}
}
}, 'waterway-label');
/* var inputs = document.getElementById('menu').getElementsByTagName('input');
* for (var i = 0; i < inputs.length; i++) {
* inputs[i].onkeypress = function(e) {
* if (!e) e = window.event;
* var keyCode = e.keyCode || e.which;
* if (keyCode == '13'){
* changeSource(e.currentTarget.value);
* return false;
* }
* }
* }*/
var inputs = document.getElementById('menu').getElementsByTagName('select');
for (var i = 0; i < inputs.length; i++) {
inputs[i].onchange = function(e) {
if (!e) e = window.event;
changeSource(e.currentTarget.value);
return false;
}
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment