jQuery + OpenLayers
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css">
<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<div id="mapa"></div>
CSS
#mapa {
width:100%;
height:512px;
}
JavaScript
(function($) {
// 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
...