50 lines
1.2 KiB
HTML
50 lines
1.2 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="node_modules/hexgrid-heatmap/dist/HexgridHeatmap.js"></script>
|
||
|
|
<script src="data/berlin_geojs.js"></script>
|
||
|
|
|
||
|
|
|
||
|
|
<style>
|
||
|
|
#map {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
bottom: 0;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
|
||
|
|
</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.setData(data);
|
||
|
|
heatmap.update();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|