61 lines
No EOL
1.7 KiB
HTML
61 lines
No EOL
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Visualization</title>
|
|
|
|
<script src='https://api.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.js'></script>
|
|
<link href='https://api.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.css' rel='stylesheet' />
|
|
<script src="data/berlin_geojs.js"></script>
|
|
|
|
|
|
<style>
|
|
#map {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
</style>
|
|
<script src="own_libs/valuehexgrid.js"></script>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<div id='map'></div>
|
|
<script>
|
|
mapboxgl.accessToken = 'pk.eyJ1IjoiZGktdG8iLCJhIjoiY2o0bnBoYXcxMW1mNzJ3bDhmc2xiNWttaiJ9.ZccatVk_4shzoAsEUXXecA';
|
|
var map = new mapboxgl.Map({
|
|
container: 'map',
|
|
style: 'mapbox://styles/mapbox/light-v9',
|
|
center: [13.38032, 52.51239],
|
|
zoom: 11
|
|
});
|
|
|
|
|
|
map.on("load", function(){
|
|
var heatmap = new HexgridHeatmap(map, "hexgrid-heatmap", "waterway-label");
|
|
heatmap.setIntensity(6); // dunno yet
|
|
heatmap.setSpread(0.15); // dunno yet
|
|
heatmap.setCellDensity(0.5); // small value == bigger hexagons
|
|
heatmap.setPropertyName('qmprice');
|
|
heatmap.setData(data);
|
|
heatmap.update();
|
|
var qmprices = data.features.map(function(d){return d['properties']['qmprice']});
|
|
qmprices = qmprices.sort(function(a,b){return a-b;});
|
|
// setting the color stops, min is at 5th percentile, max at 95percentile
|
|
var min = qmprices[Math.round(qmprices.length * 0.05)];
|
|
var max = qmprices[Math.round(qmprices.length * 0.95)];
|
|
heatmap.setColorStops([
|
|
[min, "rgba(0,185,243,0)"],
|
|
[min + (max - min) * 0.25, "rgba(0,185,243,0.24)"],
|
|
[min + (max - min) * 0.6, "rgba(255,223,0,0.3)"],
|
|
[max, "rgba(255,105,0,0.3)"],
|
|
]);
|
|
});
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html> |