UNPKG

leaflet

Version:

JavaScript library for mobile-friendly interactive maps

43 lines (34 loc) 1.13 kB
--- layout: tutorial_frame title: Mobile tutorial css: "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.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', { maxZoom: 18, attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 'Imagery © <a href="http://mapbox.com">Mapbox</a>', 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>