jQuery + OpenLayers

by VictorVelarde

HTML

<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css">
<html>
    <head>
        <title>Pestañas de jQuery en OpenLayers</title>
    </head>
    <body>
        <div id="mapa" style="width:512px; height:512px"></div>               
    </body>
</html>

JavaScript

// Html del popup con pestañas de jquery
function prepararFicha(ciudad) {
    var div = $("<div>");
    var contenido = $("<div id='popupConTabs' style='font-size:9px;'>");
    var titulos = $("<ul>" + 
                        "<li><a href='#tab-1'>Atributos</a></li>" + 
                        "<li><a href='#tab-2'>Wikipedia</a></li>" + 
                    "</ul>");
    contenido.append(titulos);

    // Pestaña 1
    var p1 = $("<div id='tab-1'>");
    p1.append($("<p>" + 
                    "<b>Nombre</b>: " + ciudad.attributes.Nombre + "<br/>" + 
                    "<b>Habs.</b>: " + ciudad.attributes.Habitantes + 
                "</p>"));
    contenido.append(p1);

    // Pestaña 2
    var p2 = $("<div id='tab-2'>");
    p2.append($("<p><a href='" + ciudad.attributes.Wikipedia + "'>Wikipedia</b></p>"));
    contenido.append(p2);

    div.append(contenido);
    return div.html();
}


// Creación del mapa y encuadre inicial
var WGS84 = new OpenLayers.Projection('EPSG:4326');
var MERCATOR = new OpenLayers.Projection('EPSG:900913');
var peninsula = new OpenLayers.Bounds(-18.0, 26.0, 6.0, 44.0).transform(WGS84, MERCATOR);
var mapa = new OpenLayers.Map("mapa");
mapa.addLayer(new OpenLayers.Layer.OSM());
mapa.zoomToExtent(peninsula);


// Creación de una capa vectorial con 1 registro puntual
var ciudades = new OpenLayers.Layer.Vector("Ciudades");
mapa.addLayer(ciudades);
var geometria = new OpenLayers.Geometry.Point(-3.8, 43.46).transform(WGS84, MERCATOR);
var atributos = {
    Nombre: 'Santander',
    Habitantes: 181589,
    Wikipedia: 'http://es.wikipedia.org/wiki/Santander_(Espa%C3%B1a)'
};
var santander = new OpenLayers.Feature.Vector(geometria, atributos);
ciudades.addFeatures([santander]);


// Creación del control de selección
var controlSeleccion = new OpenLayers.Control.SelectFeature(ciudades);
mapa.addControl(controlSeleccion);
controlSeleccion.activate();


// Mostrar el popup al seleccionar la ciudad
var popup;
ciudades.events.on({
   ...