Mapas con LeafLet agregando stylo css a mensaje

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:

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 )

Leave a 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: