Last active
January 2, 2016 13:58
-
-
Save esisa/8313391 to your computer and use it in GitHub Desktop.
Example code showing how to use Mapbox.js/Leaflet on Turapp.no
This file contains hidden or 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> | |
| <title>Leaflet example code</title> | |
| <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' /> | |
| <link href='http://api.tiles.mapbox.com/mapbox.js/v1.6.0/mapbox.css' rel='stylesheet' /> | |
| <script src='http://api.tiles.mapbox.com/mapbox.js/v1.6.0/mapbox.js'></script> | |
| <script src="https://rawgithub.com/mpetazzoni/leaflet-gpx/master/gpx.js"></script> | |
| <style> | |
| body { | |
| padding: 0; | |
| margin: 50; | |
| } | |
| html, body, #map { | |
| height: 500px; | |
| width: 800px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| Example code showing how to use Mapbox.js/Leaflet on Turapp.no | |
| <div id="map"></div> | |
| <script> | |
| var map = L.map('map') | |
| .setView([60.96823,9.23356], 10) | |
| .addLayer(L.mapbox.tileLayer('https://dl.dropboxusercontent.com/u/8829/turapp/turapp.tilejson', { | |
| detectRetina: true, | |
| attribution: 'Kart levert av <a href="http://www.turkompisen.no">Turkompisen.no</a>', | |
| // if retina is detected, this layer is used instead | |
| retinaVersion: 'https://dl.dropboxusercontent.com/u/8829/turapp/turapp_highdef.tilejson' | |
| })); | |
| // Remove default attribution | |
| map.attributionControl.setPrefix(""); | |
| // Load GPX file | |
| var gpx = 'https://dl.dropboxusercontent.com/u/8829/turapp/16.gpx'; | |
| new L.GPX(gpx, { | |
| async: true, | |
| clickable: false, | |
| marker_options: { | |
| // We set icons manually | |
| startIconUrl: '', | |
| endIconUrl: '', | |
| shadowUrl: '' | |
| } | |
| }).on('loaded', function(e) { | |
| map.fitBounds(e.target.getBounds()); // Zoom to GPX | |
| map.zoomOut(2); // Zoom out a bit | |
| }).addTo(map); | |
| // Add markers | |
| var startIcon = L.icon({ | |
| iconUrl: 'http://turapp.no/images/start.png', | |
| iconSize: [19, 27], // size of the icon | |
| iconAnchor: [8, 27] // point of the icon which will correspond to marker's location | |
| }); | |
| L.marker([60.828181598, 9.538017567], {icon: startIcon}).addTo(map); | |
| var finishIcon = L.icon({ | |
| iconUrl: 'http://turapp.no/images/finish.png', | |
| iconSize: [55, 32], // size of the icon | |
| iconAnchor: [27, 32] // point of the icon which will correspond to marker's location | |
| }); | |
| L.marker([60.831816075, 9.554714570], {icon: finishIcon}).addTo(map); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment