Openlayers

OpenLayers y pestañas con jQuery
En este artículo vamos a ver cómo incluir pestañas de jquery (jqueryui tabs) dentro de un popup de OpenLayers. Si queréis ver el resultado podéis ir directamente alenlace de jsfiddle [1].
jQuery [2] se ha convertido en la librería por antonomasia para extender el javascript estándar en las páginas web modernas. Si desarrollas para la web, tienes queconocerla. Pero… ¿cómo trabajar con jQuery + OpenLayers?
1. Hay algunos intentos de desarrollar un plugin para jQuery que permita trabajar con OpenLayers, como MapQuery [3], que antes se denominabaGeoJQuery. El proyecto lleva poco tiempo, pero habrá que seguir sus pasos; quizá pronto sea una alternativa a GeoExt [4].
2. Mientras tanto es más frecuente que tengamos en marcha un proyecto con OpenLayers yqueramos utilizar puntualmente jQuery, especialmente algún componente visual o widget de jqueryui, como las pestañas (tabs) o un acordeón (accordion) [5].
Vamos a ver cómo hacer en el caso 2, con unejemplo sencillo.
a) Creamos el html básico para soportar el mapa, con las importaciones de librerías javacript y css necesarias. Hemos dejado un script vacío, que es donde iremos introduciendo elcódigo.
01
02
03
04
05

06

07 Pestañas de jQuery en OpenLayers
08
09
10
11
12
13
b) Primero añadimosla función que generará el contenido html del popup. Éste debe seguir los convenios de estructura establecidos por jqueryui. Lo más importante son los ‘li’ y que los enlaces apunten al mismo id quetengan los ‘div’ posteriores.
01 // Html del popup con pestañas de jquery
02 function prepararFicha(ciudad) {
03 var div = $("");
04 var contenido = $("");
05 var titulos = $("" +
06"Atributos" +
07 "Wikipedia" +
08 "");
09 contenido.append(titulos);
10
11 // Pestaña 1
12 var p1 = $("");
13...