Last active
February 21, 2023 08:24
-
-
Save TravelTime-Frontend/1e3efa0067a6c3062f6f4da1ca426162 to your computer and use it in GitHub Desktop.
MapBox maps initial setup
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
| <html> | |
| <head> | |
| <script src='https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js'></script> | |
| <link href='https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css' rel='stylesheet' /> | |
| <style> | |
| body { | |
| background-color: gray; | |
| } | |
| html, | |
| body, | |
| #map { | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id='map'></div> | |
| <script> | |
| // The name of the starting location. We will have to geocode this to coordinates. | |
| var startingLocation = "London Waterloo Train Station"; | |
| // TO MAKE THE MAP APPEAR YOU MUST | |
| // ADD YOUR ACCESS TOKEN FROM | |
| // https://account.mapbox.com | |
| mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN'; | |
| var map = new mapboxgl.Map({ | |
| container: 'map', | |
| style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location | |
| center: [-0.1123051, 51.5031653], // starting position [lng, lat] | |
| zoom: 13 // starting zoom | |
| }); | |
| var marker = new mapboxgl.Marker() | |
| .setLngLat([-0.1123051, 51.5031653]) | |
| .setPopup(new mapboxgl.Popup().setHTML(startingLocation)) | |
| .addTo(map) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment