Pudes ver la demo en este link:
usuario: demo / pass: demo
Herramientas:
1.- Librerias de LeafLet , sitio principal aqui.
2.- JavaScript
3.- Apex Oracle
4.- Un poco de Css
5.-Permisos de navegador para usar la geolocalizacion , usar HTTPS
Procedimiento:
Primero crearemos haremos la declaracion de las variables que usa leaflet.
En, funcion and global variable declaration:
var map = L.map('map_id').setView([15.413083, -66.2136067], 3); var marker_actual; L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map);
, en HTML Header tambien agregaremos lo siguiente:
<!-- Load Leaflet from CDN--> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.1.0/dist/leaflet.css" integrity="sha512-wcw6ts8Anuw10Mzh9Ytw4pylW8+NAD4ch3lqm9lzAsTxg0GFeJgoAtxuCLREZSC5lUXdVyo/7yfsqFjQ4S+aKw==" crossorigin=""/> <script src="https://unpkg.com/leaflet@1.1.0/dist/leaflet-src.js" integrity="sha384-TWB9xRHTlLQmqAngHwD7usGcf4akGf0JP6aHwlgilpmOu2UuBq5aWLsDAh39iSn1" crossorigin=""></script> <!-- Load Esri Leaflet from CDN --> <script src="https://unpkg.com/esri-leaflet@2.0.8" integrity="sha384-ze7rgny7/YGFxBlVgTBdOABNWe5V9BYjju/qwqJhCU8XJHtuEnRlbUpN5lXyY706" crossorigin=""></script> <!-- Load Esri Leaflet Geocoder from CDN --> <link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder@2.2.4/dist/esri-leaflet-geocoder.css" integrity="sha384-cuElYVOZCs9f5kOmEIvZWm6M0CYP8T8dbA1Bx3XnXGatEha3FV9igr7r+S+AmEBt" crossorigin=""> <script src="https://unpkg.com/esri-leaflet-geocoder@2.2.4" integrity="sha384-WpOm6fpjH3TUoBE8JthsuXv2+PcXwi3fOwhg6zzbaiu5eshSRP+mEESWp8IPSkvK" crossorigin=""></script> <style> body { margin:0; padding:0; } #map { position: absolute; top:0; bottom:0; right:0; left:0; } </style>
En InLine agregaremos un ancho y alto para dibujar el mapa.
Creamos una region y le damos un static id, asi como header y footer:
Creamos un boton con una accion dinamica que llame un JavaScript
var browserLat; var browserLong; navigator.geolocation.getCurrentPosition(function(position) { browserLat = position.coords.latitude; browserLong = position.coords.longitude; marker_actual = L.marker([browserLat,browserLong]).addTo(map); marker_actual.bindPopup('<b>Hola </b><br>Tu estas aqui').openPopup(); map.setView([browserLat,browserLong], 18); console.log(browserLat); console.log(browserLong); }, function(err) { console.error(err); });
tendremos un resultado como este:
Mil gracias Ing. Angel O. Flores,
ReplyDeleteEntiendo que cuando te refieres a una ubicación, significa que puedes recoger cualquiera que esté en aquel mapa moviendo el marcador. I este insertarà en la tabla las coordenadas o un wkt?
Gracias
Hola, me podría responder, gracias?
ReplyDeletecomo puedo obtener el nombre del pais a partir de mi ubicacion
ReplyDeleteComo agregar a este mapa unos marker desde una tabla de mi BD
ReplyDelete