layout, title, css
| layout |
title |
css |
| tutorial_frame |
Mobile tutorial |
body { padding: 0; margin: 0; } html, body, #map { height: 100vh; width: 100vw; } |
<script>
var map = L.map('map').fitWorld();
L.tileLayer('
https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data ©
OpenStreetMap contributors, ' +
'
CC-BY-SA, ' +
'Imagery ©
Mapbox',
id: 'mapbox.streets'
}).addTo(map);
function onLocationFound(e) {
var radius = e.accuracy / 2;
L.marker(e.latlng).addTo(map)
.bindPopup("You are within " + radius + " meters from this point").openPopup();
L.circle(e.latlng, radius).addTo(map);
}
function onLocationError(e) {
alert(e.message);
}
map.on('locationfound', onLocationFound);
map.on('locationerror', onLocationError);
map.locate({setView: true, maxZoom: 16});
</script>
