layout, title, css
| layout |
title |
css |
| tutorial_frame |
Mobile Example |
body { padding: 0; margin: 0; } #map { height: 100%; width: 100vw; } |
<script type="module">
import L, {Map, TileLayer, Marker, Circle} from 'leaflet';
const map = new Map('map').fitWorld();
const tiles = new TileLayer('
https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '©
OpenStreetMap'
}).addTo(map);
function onLocationFound(e) {
const radius = e.accuracy / 2;
const locationMarker = new Marker(e.latlng).addTo(map)
.bindPopup(`You are within ${radius} meters from this point`).openPopup();
const locationCircle = new 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});
globalThis.L = L; // only for debugging in the developer console
globalThis.map = map; // only for debugging in the developer console
</script>
