sábado, 8 de marzo de 2014

Agregar texto fijo a un mapa con OpenLayers

Entre las cosas que tiene mi proyecto es que trabajo con mapas en web, como quiero que use componentes 100% libres decidí utilizar la librería OpenLayers para manejar el mapa y demás cosas relacionadas. Una de las últimas cosas que he tenido que hacer es mostrar una etiqueta perenne en el mapa que indique el nivel de zoom en el que el usuario se encuentra. Leyendo y probando cosas encontré un solución, esta consiste en agregar un panel en el mapa que contenga un único "botón", el que luego reemplazaremos por nuestra etiqueta.
Para que esta solución funcione es necesario crear un div con id "panel" en nuestra web, no entiendo bien el motivo de esto, pero así funciona. Además, hay que definir estilos para el botón-etiqueta y para el panel.

Sin más preámbulo, aquí está el código explicado!

//Primero, debemos crear el botón que insertaremos en nuestro panel.
var btnZoom = new OpenLayers.Control.Button({
 displayClass: 'olControlBtnZoom',
    text: 'Soy la etiqueta de Zoom',
    type: OpenLayers.Control.TYPE_BUTTON
});

//Luego definimos el panel que contendrá el botón e indicamos que será el control por defecto.
//Además en la propiedad "createControlMarkup" definimos una función que se encargará de crear nuestra
//etiqueta y nos la retornará, esto con el fin de reemplazar el botón.
var panel = new OpenLayers.Control.Panel({
defaultControl: btnZoom,
createControlMarkup: function(control) {
var textoSpan = document.createElement('span');
textoSpan.id="spnZoomText";
textoSpan.innerHTML = control.text;
return textoSpan;
}
});

//A continuación agregamos el botón al panel y el panel al mapa
panel.addControls([btnZoom]);
map.addControl(panel);

//Esta es la clase para el panel, el nombre es el que asigna por defecto OpenLayers
//y es el que debemos usar
.olControlPanel {
    top: 15px;
    left: 15px;
    width: 65px;
    cursor: default;
    }

//Esta es la clase para el botón que luego será etiqueta, es importante saber que si quieren cambiar el
//nombre del estilo solo puede cambiar el texto correspondiente al nombre del botón, el prefijo "olControl"
//es usado por OpenLayers y debe permanecer.
.olControlBtnZoom{
    position: absolute;
    height: 18px;
    width : 65px;
}

Espero que esto les sea de utilidad!

Saludos,
Giank


No hay comentarios:

Publicar un comentario