Skip to content

Instantly share code, notes, and snippets.

@geografa

geografa/index.html

Last active April 29, 2022 19:03
Show Gist options
  • Save geografa/8458f9f23637374a56bb25f1b6a839c3 to your computer and use it in GitHub Desktop.
Save geografa/8458f9f23637374a56bb25f1b6a839c3 to your computer and use it in GitHub Desktop.
Download ZIP
tunnels-munich
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Add a GeoJSON line</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
.mapboxgl-popup {
max-width: 400px;
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZ3JhZmEiLCJhIjoiY2ptYjNtZWxnMDBrdDNwbnVicGJzOWg2NyJ9.9OulyCe3kEqMAXPbx1mKUA';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [11.50281,48.1257],
// https://www.openstreetmap.org/query?lat=48.12575&lon=11.50281
zoom: 11
});
map.on('load', function () {
map.addSource('route', {
'type': 'geojson',
'data': 'tunnels-munich.geojson'
});
map.addLayer({
'id': 'route',
'type': 'line',
'source': 'route',
'layout': {
'line-join': 'round',
'line-cap': 'square'
},
'paint': {
'line-color': '#f30',
'line-width': 8
}
});
});
// When a click event occurs on a feature in the places layer, open a popup at the
// location of the feature, with description HTML from its properties.
map.on('click', 'route', function (e) {
var coordinates = e.features[0].geometry.coordinates[0].slice();
var description = coordinates[1] + ',' + coordinates[0];
console.log(description);
// Ensure that if the map is zoomed out such that multiple
// copies of the feature are visible, the popup appears
// over the copy being pointed to.
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML('<a href="geo:' + description + '"><h2>Navigate to location</h2></a>')
.addTo(map);
});
// Change the cursor to a pointer when the mouse is over the places layer.
map.on('mouseenter', 'route', function () {
map.getCanvas().style.cursor = 'pointer';
});
// Change it back to a pointer when it leaves.
map.on('mouseleave', 'route', function () {
map.getCanvas().style.cursor = '';
});
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
tunnels-munich.geojson
{
"type": "FeatureCollection",
"generator": "overpass-ide",
"copyright": "The data included in this document is from www.openstreetmap.org. The data is made available under ODbL.",
"timestamp": "2020-09-17T20:20:04Z",
"features": [
{
"type": "Feature",
"properties": {
"@id": "way/4230970",
"bdouble": "yes",
"highway": "motorway",
"lanes": "2",
"layer": "-1",
"lit": "yes",
"maxheight": "4.0",
"maxspeed": "80",
"oneway": "yes",
"ref": "A 8",
"source:lit": "http://www.autobahn-bilder.de",
"surface": "asphalt",
"tmc": "DE:35163/12569",
"tunnel": "yes",
"tunnel:name": "Tunnel Neubiberg"
},
"geometry": {
"type": "LineString",
"coordinates": [
[
11.6264056,
48.0725389
],
[
11.6287889,
48.0700612
]
]
},
"id": "way/4230970"
},
{
"type": "Feature",
"properties": {
"@id": "way/4247380",
"bdouble": "yes",
"highway": "motorway",
"int_ref": "E 52",
"lanes": "3",
"layer": "-1",
"maxheight": "4.3",
"maxspeed": "signals",
"note:name": "Der reg_name, sowie ggf. der loc_name sind dem zugehörigen Wikipediaartikel entnommen.",
"oneway": "yes",
"ref": "A 99",
"reg_name": "Autobahnring München",
"tmc": "DE:31513/31620",
"tunnel": "yes",
"tunnel:name": "Tunnel Allach"
},
"geometry": {
"type": "LineString",
"coordinates": [
[
11.4540381,
48.2045911
],
[
11.4557421,
48.2048378
],
[
11.4571102,
48.2051473
],
[
11.4583721,
48.2055868
],
[
11.4592611,
48.2060085
],
[
11.4603131,
48.2065859
]
]
},
"id": "way/4247380"
},
{
"type": "Feature",
"properties": {
"@id": "way/4274287",
"bdouble": "yes",
"highway": "motorway",
"lanes": "2",
"layer": "-1",
"maxheight": "4.3",
"maxspeed": "80",
"maxspeed:variable": "peak_traffic",
"note:name": "Der reg_name, sowie ggf. der loc_name sind dem zugehörigen Wikipediaartikel entnommen.",
"oneway": "yes",
"ref": "A 99",
"reg_name": "Autobahnring München",
"source:name": "http://www.autobahn-bilder.de",
"surface": "asphalt",
"tmc": "DE:36238/42385",
"tunnel": "yes",
"tunnel:name": "Tunnel Aubing"
},
"geometry": {
"type": "LineString",
"coordinates": [
[
11.4019349,
48.1577505
],
[
11.4053613,
48.1605025
]
]
},
"id": "way/4274287"
},
{
"type": "Feature",
"properties": {
"@id": "way/4274292",
"bdouble": "yes",
"highway": "motorway",
"lanes": "2",
"layer": "-1",
"maxheight": "4.3",
"maxspeed": "80",
"maxspeed:variable": "peak_traffic",
"note:name": "Der reg_name, sowie ggf. der loc_name sind dem zugehörigen Wikipediaartikel entnommen.",
"oneway": "yes",
"ref": "A 99",
"reg_name": "Autobahnring München",
"source:name": "http://www.autobahn-bilder.de",
"surface": "asphalt",
"tmc": "DE:42385/31954",
"tunnel": "yes",
"tunnel:name": "Tunnel Aubing"
},
"geometry": {
"type": "LineString",
"coordinates": [
[
11.4195444,
48.1705243
],
[
11.4187665,
48.1700221
],
[
11.4157343,
48.1680414
],
[
11.4147899,
48.1674709
],
[
11.4111853,
48.1652936
],
[
11.4051342,
48.1605418
]
]
},
"id": "way/4274292"
},
{
"type": "Feature",
"properties": {
"@id": "way/5212536",
"bdouble": "yes",
"highway": "motorway",
"int_ref": "E 52",
"lanes": "3",
"layer": "-1",
"maxheight": "4.3",
"maxspeed": "80",
"maxspeed:variable": "peak_traffic",
"note:name": "Der reg_name, sowie ggf. der loc_name sind dem zugehörigen Wikipediaartikel entnommen.",
"oneway": "yes",
"ref": "A 99",
"reg_name": "Autobahnring München",
"tmc": "DE:31620/12976",
"tunnel": "yes",
"tunnel:name": "Tunnel Allach"
},
"geometry": {
"type": "LineString",
"coordinates": [
[
11.4660936,
48.2094419
],
[
11.464889,
48.2091588
],
[
11.4637286,
48.2087429
],
[
11.4625052,
48.2081751
],
[
11.4618037,
48.2077789
],
[
11.46125,
48.2074313
],
[
11.4601588,
48.2067339
]
]
},
"id": "way/5212536"
},
{
"type": "Feature",
"properties": {
"@id": "way/8159487",
"bdouble": "yes",
"highway": "motorway",
"int_ref": "E 54",
"lanes": "3",
"layer": "-1",
"maxspeed": "80",
"note:name": "Der reg_name, sowie ggf. der loc_name sind dem zugehörigen Wikipediaartikel entnommen.",
"oneway": "yes",
"ref": "A 96",
"reg_name": "Ammerseeautobahn",
"source:maxspeed": "sign",
"start_date": "1972",
"surface": "asphalt",
"tmc": "DE:36237/12959",
"tunnel": "yes",
"wikipedia": "de:Bundesautobahn 96"
},
"geometry": {
"type": "LineString",
"coordinates": [
[
11.4275478,
48.1290889
],
[
11.4308466,
48.1279063
]
]
},
"id": "way/8159487"
},
{
"type": "Feature",
"properties": {
"@id": "way/24716944",
"bdouble": "yes",
"highway": "motorway",
"lanes": "2",
"layer": "-1",
"lit": "yes",
"maxheight": "4.0",
"maxspeed": "80",
"oneway": "yes",
"ref": "A 8",
"source:lit": "http://www.autobahn-bilder.de",
"surface": "asphalt",
"tmc": "DE:35163/12569",
"tunnel": "yes",
"tunnel:name": "Tunnel Neubiberg"
},
"geometry": {
"type": "LineString",
"coordinates": [
[
11.6289535,
48.0700978
],
[
11.626575,
48.0725712
]
]
},
"id": "way/24716944"
},
{
"type": "Feature",
"properties": {
"@id": "way/25491718",
"bdouble": "yes",
"highway": "motorway",
"int_ref": "E 54",
"lanes": "3",
"layer": "-1",
"maxspeed": "60",
"note:name": "Der reg_name, sowie ggf. der loc_name sind dem zugehörigen Wikipediaartikel entnommen.",
"oneway": "yes",
"ref": "A 96",
"reg_name": "Ammerseeautobahn",
"start_date": "1972",
"surface": "asphalt",
"tmc": "DE:12961",
"tunnel": "yes"
},
"geometry": {
"type": "LineString",
"coordinates": [
[
11.5032376,
48.1258801
],
[
11.5024302,
48.1259
]
]
},
"id": "way/25491718"
},
{
"type": "Feature",
"properties": {
"@id": "way/25491720",
"bdouble": "yes",
"highway": "motorway",
"int_ref": "E 54",
"lanes": "3",
"layer": "-1",
"maxspeed": "80",
"maxspeed:variable": "yes",
"note:maxspeed": "Highest shown speed is 80. Survey 02.2019",
"note:name": "Der reg_name, sowie ggf. der loc_name sind dem zugehörigen Wikipediaartikel entnommen.",
"oneway": "yes",
"ref": "A 96",
"reg_name": "Ammerseeautobahn",
"source:maxspeed": "sign",
"start_date": "1972",
"surface": "asphalt",
"tmc": "DE:12961",
"tunnel": "yes"
},
"geometry": {
"type": "LineString",
"coordinates": [
[
11.5024317,
48.1257523
],
[
11.5032332,
48.1257365
]
]
},
"id": "way/25491720"
},
{
"type": "Feature",
"properties": {
"@id": "way/48600711",
"bdouble": "yes",
"highway": "motorway",
"int_ref": "E 54",
"lanes": "3",
"layer": "-1",
"maxspeed": "80",
"note:name": "Der reg_name, sowie ggf. der loc_name sind dem zugehörigen Wikipediaartikel entnommen.",
"oneway": "yes",
"ref": "A 96",
"reg_name": "Ammerseeautobahn",
"start_date": "1972",
"surface": "asphalt",
"tmc": "DE:36237/12959",
"tunnel": "yes",
"wikidata": "Q10853",
"wikipedia": "de:Bundesautobahn 96"
},
"geometry": {
"type": "LineString",
"coordinates": [
[
11.430928,
48.1280423
],
[
11.4276589,
48.1292169
]
]
},
"id": "way/48600711"
},
{
"type": "Feature",
"properties": {
"@id": "way/253331662",
"bdouble": "yes",
"highway": "motorway",
"lanes": "2",
"layer": "-1",
"maxheight": "4.3",
"maxspeed": "80",
"maxspeed:variable": "peak_traffic",
"note:name": "Der reg_name, sowie ggf. der loc_name sind dem zugehörigen Wikipediaartikel entnommen.",
"oneway": "yes",
"ref": "A 99",
"reg_name": "Autobahnring München",
"source:name": "http://www.autobahn-bilder.de",
"surface": "asphalt",
"tmc": "DE:36238/42385",
"tunnel": "yes",
"tunnel:name": "Tunnel Aubing"
},
"geometry": {
"type": "LineString",
"coordinates": [
[
11.4051342,
48.1605418
],
[
11.4017857,
48.1578379
]
]
},
"id": "way/253331662"
},
{
"type": "Feature",
"properties": {
"@id": "way/253331663",
"bdouble": "yes",
"highway": "motorway",
"lanes": "2",
"layer": "-1",
"maxheight": "4.3",
"maxspeed": "80",
"maxspeed:variable": "peak_traffic",
"note:name": "Der reg_name, sowie ggf. der loc_name sind dem zugehörigen Wikipediaartikel entnommen.",
"oneway": "yes",
"ref": "A 99",
"reg_name": "Autobahnring München",
"source:name": "http://www.autobahn-bilder.de",
"surface": "asphalt",
"tmc": "DE:42385/31954",
"tunnel": "yes",
"tunnel:name": "Tunnel Aubing"
},
"geometry": {
"type": "LineString",
"coordinates": [
[
11.4053613,
48.1605025
],
[
11.4056586,
48.1607312
],
[
11.4114428,
48.1651219
],
[
11.415863,
48.1678983
],
[
11.4180945,
48.1694061
]
]
},
"id": "way/253331663"
},
{
"type": "Feature",
"properties": {
"@id": "way/253346719",
"bdouble": "yes",
"highway": "motorway",
"int_ref": "E 52",
"lanes": "3",
"layer": "-1",
"maxheight": "4.3",
"maxspeed": "80",
"maxspeed:variable": "peak_traffic",
"note:name": "Der reg_name, sowie ggf. der loc_name sind dem zugehörigen Wikipediaartikel entnommen.",
"oneway": "yes",
"ref": "A 99",
"reg_name": "Autobahnring München",
"tmc": "DE:31513/31620",
"tunnel": "yes",
"tunnel:name": "Tunnel Allach"
},
"geometry": {
"type": "LineString",
"coordinates": [
[
11.4601588,
48.2067339
],
[
11.4590387,
48.2061233
],
[
11.4582236,
48.2057322
],
[
11.457032,
48.2052964
],
[
11.4556908,
48.2049959
],
[
11.4539961,
48.2047335
]
]
},
"id": "way/253346719"
},
{
"type": "Feature",
"properties": {
"@id": "way/253346720",
"bdouble": "yes",
"highway": "motorway",
"int_ref": "E 52",
"lanes": "3",
"layer": "-1",
"maxheight": "4.3",
"maxspeed": "signals",
"note:name": "Der reg_name, sowie ggf. der loc_name sind dem zugehörigen Wikipediaartikel entnommen.",
"oneway": "yes",
"ref": "A 99",
"reg_name": "Autobahnring München",
"tmc": "DE:31620/12976",
"tunnel": "yes",
"tunnel:name": "Tunnel Allach"
},
"geometry": {
"type": "LineString",
"coordinates": [
[
11.4603131,
48.2065859
],
[
11.4613736,
48.2072758
],
[
11.4619398,
48.2076512
],
[
11.4625979,
48.2079934
],
[
11.4638574,
48.2085713
],
[
11.4649872,
48.2089953
],
[
11.4657903,
48.20923
]
]
},
"id": "way/253346720"
},
{
"type": "Feature",
"properties": {
"@id": "way/326360876",
"bdouble": "yes",
"destination:lanes": "Kreuz München-West|Kreuz München-West|Stuttgart;Augsburg;München-Zentrum;München-Lochhausen;Gröbenzell",
"destination:ref:lanes": "A 99|A 99|A 8",
"highway": "motorway",
"lanes": "3",
"layer": "-1",
"maxheight": "4.3",
"maxspeed": "80",
"maxspeed:variable": "peak_traffic",
"note:name": "Der reg_name, sowie ggf. der loc_name sind dem zugehörigen Wikipediaartikel entnommen.",
"oneway": "yes",
"placement": "right_of:1",
"ref": "A 99",
"reg_name": "Autobahnring München",
"source:name": "http://www.autobahn-bilder.de",
"surface": "asphalt",
"tmc": "DE:42385/31954",
"tunnel": "yes",
"tunnel:name": "Tunnel Aubing",
"turn:lanes": "none|none|slight_right"
},
"geometry": {
"type": "LineString",
"coordinates": [
[
11.4180945,
48.1694061
],
[
11.4196428,
48.1704522
]
]
},
"id": "way/326360876"
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment