Skip to content

Instantly share code, notes, and snippets.

@Hirosaji
Last active April 7, 2020 07:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Hirosaji/bd74553c671ee200d4b621ebaabdd278 to your computer and use it in GitHub Desktop.
Save Hirosaji/bd74553c671ee200d4b621ebaabdd278 to your computer and use it in GitHub Desktop.
Mapbox - helper.html in Storytelling
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>
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment