Una de las capacidades que se echa de menos en OpenLayers es la posibilidad de poder desplazar los bocadillos de información dentro del mapa.

Poder arrastrarlos a un área que no estorbe la visión de los elementos sin tener que cerrarlos por completo.

En este post os explicaremos como conseguir esta capacidad con la versión 2 de OpenLayers.

Move Popup

Para conseguir que el Popup de OpenLayers se pueda arrastrar por el mapa para cambiar su ubicación debemos descargar una nueva clase para controlar el movimiento del popup.

El código para la clase lo podemos descargar desde la siguiente página.

https://gist.github.com/ilijamt/6667845#file-openlayers-dragpopup-js

Este código como puedes ver necesita dos librerías extras que deben ser también añadidas a tu proyecto de OpenLayers, jQuery y Underscore.

Nuestro Popup reacciona ante la selección de una capa de entidades vectoriales de tipo punto, los cuales son utilizados como marcadores, por lo que debemos vincular el popup con la selección de una de estas entidades.

Una vez creada la capa, le damos la capacidad de reaccionar ante la selección de sus elementos.

 Ahora ya tenemos una capa vectorial que tiene la capacidad de reaccionar ante la selección de sus elementos, pero ahora debemos definir que es lo que pasa si alguno de estos marcadores es seleccionado.

Y a la vez, mientras el elemento es seleccionado, añadimos las capacidades para poder mover el popup a partir de la nueva clase que nos hemos descargado y por último definimos que clase del div del popup será desde donde arrastramos el elemento, es decir, cual será el área del elemento que permita arrastrarlo.

Sólo con este código, el elemento ya funciona con la capacidad de moverse por la pantalla, pero el popup está diseñado para mostrarse siempre en la mejor posición posible en función de donde se ubique la geometría de la que parte. Así el elemento elige entre cuatro posiciones dentro de la pantalla.

posiciones_popup

Por esto cuando lo movemos por la pantalla y cambia de posición, el elemento sigue vinculado a una de las zonas y produce comportamientos extraños.

Para solucionar este tipo de comportamiento debemos de utilizar un método de la clase popup para que no actualice la posición.

De esta manera ya podéis mover el popup por todo el área del mapa, añadiéndo de esta manera una capacidad bastante vistosa a vuestras aplicacaciones con OpenLayers.

Esperamos desde Bytacora que estas píldoras de información os ayuden en vuestros futuros proyectos. Seguid atentos a nuestras publicaciones.