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: '&copy; <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: