Last active
April 29, 2022 19:03
-
-
Save geografa/8458f9f23637374a56bb25f1b6a839c3 to your computer and use it in GitHub Desktop.
tunnels-munich
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment