Ref:
- https://blog.mapbox.com/how-to-build-a-scrollytelling-map-ead6baf2cd1b
- https://github.com/mapbox/storytelling
Built with blockbuilder.org
Mapbox - helper.html in Storytelling | |
license: mit |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset='utf-8' /> | |
<title>Position Helper</title> | |
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> | |
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script> | |
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' /> | |
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.min.js'></script> | |
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.css' type='text/css' /> | |
<style> | |
body { margin:0; padding:0; } | |
#map { position:absolute; top:0; bottom:0; width:100%; } | |
#target { | |
position:absolute; top:0; bottom:0; width:100%; | |
display: flex; justify-content: center; align-items: center; | |
pointer-events: none; | |
} | |
#target img { width:50px; height:50px; } | |
#position { | |
position:absolute; top:0; height: 80px; width: 300px; | |
background-color: #fff; | |
padding: 15px; | |
margin: 10px; | |
font-family: 'Courier New', Courier, monospace; | |
} | |
</style> | |
</head> | |
<body> | |
<div id='map'></div> | |
<div id="target"><img src="./target.svg" alt=""></div> | |
<div id="position"></div> | |
<script> | |
var position = document.getElementById("position"); | |
mapboxgl.accessToken = 'pk.eyJ1IjoiaGlyb3NhamkiLCJhIjoiY2szOWlqZWNzMDJueTNjcWhyNjhqdXBnOSJ9._6mJT202QqpnMuK-jvMr3g'; | |
var map = new mapboxgl.Map({ | |
container: 'map', // container id | |
style: 'mapbox://styles/hirosaji/ck8pi8a2i0fcq1imikt012wtt', // stylesheet location | |
center: [137.5, 37.0], // starting position [lng, lat] | |
zoom: 4.5, // starting zoom | |
pitch: 45, | |
bearing: 0 | |
}); | |
map.addControl(new MapboxGeocoder({ | |
accessToken: mapboxgl.accessToken, | |
mapboxgl: mapboxgl | |
})); | |
map.addControl(new mapboxgl.NavigationControl()); | |
map.on("load", function() { | |
updatePosition(); | |
// Insert the layer beneath any symbol layer | |
var layers = map.getStyle().layers; | |
var labelLayerId; | |
for (var i = 0; i < layers.length; i++) { | |
if (layers[i].type === 'symbol' && layers[i].layout['text-field']) { | |
labelLayerId = layers[i].id; | |
break; | |
} | |
} | |
map.addLayer({ | |
'id': '3d-buildings', | |
'source': 'composite', | |
'source-layer': 'building', | |
'filter': ['==', 'extrude', 'true'], | |
'type': 'fill-extrusion', | |
'minzoom': 15, | |
'paint': { | |
'fill-extrusion-color': '#aaa', | |
// add a smooth transition effect to the buildings as the user zooms in | |
'fill-extrusion-height': [ | |
"interpolate", ["linear"], ["zoom"], | |
15, 0, | |
15.05, ["get", "height"] | |
], | |
'fill-extrusion-base': [ | |
"interpolate", ["linear"], ["zoom"], | |
15, 0, | |
15.05, ["get", "min_height"] | |
], | |
'fill-extrusion-opacity': .6 | |
} | |
}, labelLayerId); | |
}); | |
map.on("moveend", function() { | |
updatePosition() | |
}); | |
var updatePosition = function() { | |
var settings = 'center: [' + map.getCenter().lng.toFixed(5) + ', ' + map.getCenter().lat.toFixed(5) + '],\n' + | |
'zoom: ' + map.getZoom().toFixed(2) + ',\n' + | |
'pitch: ' + map.getPitch().toFixed(2) + ',\n' + | |
'bearing: ' + map.getBearing().toFixed(2) + '\n'; | |
position.innerText = settings; | |
}; | |
</script> | |
</body> | |
</html> |