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:

Published by Angel O. Flores Torres

System engineer, Applications engineer, working with C# and Oracle Apex 5, 5.1 since 2017. I specialize in Oracle APEX (Oracle Application Express )

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

  1. 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

    Like

Leave a Reply to Sergi Bernal Cancel reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: