Skip to content

Instantly share code, notes, and snippets.

@Hirosaji

Hirosaji/.block

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.
Download ZIP
Mapbox - helper.html in Storytelling
Raw
.block
Mapbox - helper.html in Storytelling
license: mit
Raw
index.html
<!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
target.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
id="svg12417"
sodipodi:docname="Target_simple_3circles.svg"
viewBox="0 0 180.0212 180.02121"
version="1.1"
inkscape:version="0.91 r13725"
width="180.02121"
height="180.02121">
<defs
id="defs14" />
<title
id="title825">Target</title>
<sodipodi:namedview
id="base"
fit-margin-left="0"
inkscape:zoom="1"
height="0px"
borderopacity="1.0"
inkscape:current-layer="layer1"
inkscape:cx="89.904323"
inkscape:cy="99.565238"
fit-margin-right="0"
inkscape:window-maximized="1"
showgrid="false"
width="0px"
inkscape:guide-bbox="true"
showguides="true"
bordercolor="#666666"
inkscape:window-x="-8"
inkscape:window-y="-8"
fit-margin-bottom="0"
inkscape:window-width="1280"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
pagecolor="#ffffff"
inkscape:document-units="px"
inkscape:window-height="962"
fit-margin-top="0" />
<g
id="layer1"
inkscape:label="Layer 1"
inkscape:groupmode="layer"
transform="translate(-258.5309,-452.38999)">
<g
id="g818"
transform="translate(-0.9635,-1.0044)">
<circle
id="path12427-9-3-9"
style="color:#000000;fill:none;stroke:#000000;stroke-width:24.08399963"
transform="matrix(0.41522,0,0,0.41522,203.67,311.84)"
cx="351.13956"
cy="557.68408"
r="180.62735" />
<circle
id="path12427-9-3-9-8-5"
style="color:#000000;fill:none;stroke:#000000;stroke-width:40.13899994"
transform="matrix(0.24913,0,0,0.24913,261.99,404.46)"
cx="351.13956"
cy="557.68408"
r="180.62735" />
<circle
id="path12427-9-3-9-8-2-3"
style="color:#000000;fill:#000000"
transform="matrix(0.12121,0,0,0.12121,306.91,475.8)"
cx="351.13956"
cy="557.68408"
r="180.62735" />
<path
id="path13189-0"
d="m 349.48,455.93 0,174.95"
style="fill:none;stroke:#000000;stroke-width:5;stroke-linecap:round"
inkscape:connector-curvature="0" />
<path
id="path45"
style="fill:none;stroke:#000000;stroke-width:5;stroke-linecap:round"
inkscape:connector-curvature="0"
d="m 436.98,543.41 -174.95,0" />
</g>
</g>
<metadata
id="metadata12">
<rdf:RDF>
<cc:Work>
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<cc:license
rdf:resource="http://creativecommons.org/publicdomain/zero/1.0/" />
<dc:publisher>
<cc:Agent
rdf:about="http://openclipart.org/">
<dc:title>Openclipart</dc:title>
</cc:Agent>
</dc:publisher>
<dc:title>Target</dc:title>
<dc:date>2012-02-15T07:37:04</dc:date>
<dc:description>Target symbol</dc:description>
<dc:source>https://openclipart.org/detail/168253/target-by-fanda@cz</dc:source>
<dc:creator>
<cc:Agent>
<dc:title>Fanda@CZ</dc:title>
</cc:Agent>
</dc:creator>
<dc:subject>
<rdf:Bag>
<rdf:li>target</rdf:li>
</rdf:Bag>
</dc:subject>
</cc:Work>
<cc:License
rdf:about="http://creativecommons.org/publicdomain/zero/1.0/">
<cc:permits
rdf:resource="http://creativecommons.org/ns#Reproduction" />
<cc:permits
rdf:resource="http://creativecommons.org/ns#Distribution" />
<cc:permits
rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
</cc:License>
</rdf:RDF>
</metadata>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment