Mapas con LeafLet y obtener la ubicación actual con JavaScript + Apex Oracle

En este post veremos la forma en como usar leaftlet (mapas) usando APEX ORACLE, y adicionalmente agregaremos la funcionalidad de obtener nuestra obicacion actual.

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: \'© OpenStreetMap contributors\'
  }).addTo(map);

, en HTML Header tambien agregaremos lo siguiente:


  <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 src=\"https://unpkg.com/esri-leaflet@2.0.8\"
    integrity=\"sha384-ze7rgny7/YGFxBlVgTBdOABNWe5V9BYjju/qwqJhCU8XJHtuEnRlbUpN5lXyY706\"
    crossorigin=\"\">


  
  <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=\"\">
 
    body { margin:0; padding:0; }
    #map { position: absolute; top:0; bottom:0; right:0; left:0; }

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(\'Hola 
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:

6 thoughts on “Mapas con LeafLet y obtener la ubicación actual con JavaScript + Apex Oracle”

Mil gracias Ing. Angel O. Flores,Entiendo 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

LikeLike

Angel O. Flores Torres says:

September 30, 2022 at 3:47 pm

Hola me refiero a que toma tu ubicación actual basado en el browser. y este se muestra en la página. No guardo valores en esta demo.

LikeLike

Reply