Bueno este es un tutorial que agrega una pequeña funcionalidad al uso de LeafLet.
Se recomienda seguir estos pasos antes: leaftleat apex oracle
Pudes ver la demo en este link:
usuario: demo / pass: demo
Primero en el CSS Inline de la pagina donde tenemos el mapa agregaremos este codigo:
#map_id{
height: 500px;
width: 700px;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 100%;
/*border: 1px solid #888;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);*/
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
text-align: center;
background-color: #5cb85c;
color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
/*padding: 2px 16px;*/
text-align: center;
background-color: #5cb85c;
color: white;
}
Crear un boton con una accion dinamica de 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();
marker_actual.bindPopup(\'\').openPopup();
map.setView([browserLat,browserLong], 18);
console.log(browserLat);
console.log(browserLong);
}, function(err) {
console.error(err);
});
En el bindPopup agregamos las clases que antes habiamos declarado.
Resultado:
A little knowledge to share (Oracle APEX) 
Hola , funciona en Apex 20 ?
LikeLike
Hola si, aunque tambien tienes los mapas nativos de Oracle en versiones recientes.
LikeLike