D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
aaizemberg
Full window
Github gist
¿Dónde estoy?
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>¿Dónde estoy?</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script> <style> body { padding: 0; margin: 0; } html, body, #map { height: 100%; } </style> </head> <body> <div id="map"></div> <script> var map = L.map('map'); L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiYWFpemVtYmVyZyIsImEiOiJIQmdlUkVzIn0.kzKfi1ndNMUcY4sH07RaUQ', { maxZoom: 18, attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, ' + '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 'Imagery © <a href="https://mapbox.com">Mapbox</a>', id: 'aaizemberg.nginh0cc' }).addTo(map); L.tileLayer.wms("https://181.14.235.210:8080/geoserver/web/prt/wms", { layers: 'prt:puertos', format: 'image/png', transparent: true, version: '1.3.0', attribution: "AV Puertos" }).addTo(map); function onLocationFound(e) { var radius = e.accuracy / 2; L.marker(e.latlng).addTo(map); // .bindPopup("Ud está a " + radius + " metros de este punto").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> </body> </html>
https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js