Sunday, October 29, 2017

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('<b>Hola </b><br>Tu estas aqui').openPopup();
    marker_actual.bindPopup('<div class="modal-content"><div class="modal-header"><h4>Mi Ubicación</h4></div><div class="modal-body"><p>Hola!</p><p>Tu estas aqui...</p></div><div class="modal-footer"><h3>Apex</h3></div></div>').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:








Share:

Acerca de mi:

img

Angel O. Flores Torres, soy Ingeniero de Sistemas CIP: 193925 e Ingeniero de Aplicaciones Apex, he trabajado con Oracle Apex 5 y 5.1 desde el 2017, En los ultimos años he desarrollado habilidades en CSS, JavaScript, Jquery y PlSql , I specialize in Oracle APEX (Oracle Application Express )

Followers

Popular Posts