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 al enlace 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 que conocerla. 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 denominaba GeoJQuery. 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 y queramos 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 un ejemplo 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 el código.

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

b) Primero añadimos la 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 que tengan los ‘div’ posteriores.

// 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();
}

c) Lo siguiente  es la creación usual de un mapa, una capa vectorial con un solo registro y el control de selección. Nada particular.

// 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();

d) Finalmente, la siguiente porción de código es la que establece las funciones manejadoras de eventos para crear el popup. En la función se produce la llamada clave al constructor ‘tabs’, para dotar del aspecto y funcionalidad deseados al html del popup.

// Mostrar el popup al seleccionar la ciudad
var popup;
ciudades.events.on({
    "featureselected": function(e) {
        var ciudad = e.feature;
        var html = prepararFicha(ciudad);
        popup = new OpenLayers.Popup.FramedCloud(
            "Info ciudad",
            ciudad.geometry.getBounds().getCenterLonLat(),
            null, html, null, true, function() {
                controlSeleccion.unselect(ciudad);
        });
        popup.minSize = new OpenLayers.Size(300, 100);
        ciudad.popup = popup;
        mapa.addPopup(popup);
        $("#popupConTabs").tabs(); /* << Creacion de Tabs */
    },
    "featureunselected": function(e) {
        var ciudad = e.feature;
        mapa.removePopup(ciudad.popup);
        ciudad.popup.destroy();
        ciudad.popup = null;
    }
});

Referencias:

[1] El código de este post en funcionamiento: http://jsfiddle.net/VictorVelarde/DbCgt/

[2] Librería jquery: http://jquery.com/

[3] Ejemplo de uso de MapQuery: http://blog.spaziogis.it/static/jquerymap/

[4] Proyecto GeoExt (OpenLayers + ExtJS): http://www.geoext.org/

[5] El control de pestañas de jqueryui: http://jqueryui.com/demos/tabs/

[6] Uso de jqueryui slider con OpenLayers: http://workshops.opengeo.org/openlayers-intro/integration/jqui-slider.html

Anuncios

Menu contextual sobre mapa – API Javascript ESRI

Lo siguiente es una pequeña guía de algo que me parece muy útil: generar un menu contextual asociado al botón derecho cuando estás sobre el mapa. Al margen de tener la típica barra superior de herramientas, con este tipo de menú podremos tener más a mano cualquier acción invocable desde javascript que nos interese, como p.ej. hacer zoom más en un punto o recoger las coordenadas del clic y usarlas para otra acción como p.ej. un geocoding.

El resultado final sería algo como:
Menu sobre Mapa con botón derecho

Para el menu vamos a usar la librería de Javascript dojo y el mapa estará realizado con el API de ESRI para Javascript [1].

Tomaremos como base un ejemplo de ESRI para mostrar un mapa topográfico [2]. Y ahora a ese codigo vamos a añadirle la funcionalidad del menu emergente.

Para ello:
a) Importamos el control de dojo para el menu.

      dojo.require("dijit.Menu");

b) añadimos al HTML de la pagina el código de marcado del diálogo (también se podría crear al vuelo con javascript). Los atributos son importantes para vincularlo correctamente al mapa y cada entrada del menu tiene asociada la función de javascript que queramos:

<div dojotype="dijit.Menu" id="menu" contextmenuforwindow="false" style="display: none;" targetnodeids="map">
    <div dojotype="dijit.MenuItem" onclick="Foo();">Foo</div>
    <div dojotype="dijit.MenuSeparator"></div>
    <div dojotype="dijit.MenuItem" onclick="Bar();">Bar</div>
</div> 

c) Y finalmente la captura del evento ‘clic botón derecho’ y el guardado del punto del mapa. De manera automática y justo a continuación de la gestion del evento, dojo se encargará de mostrar el menu emergente y ya podremos usar en nuestras funciones el último valor de la variable lastPoint.

dojo.connect(map, 'onMouseDown', this, function(evt){
            if(evt.button !== 2) return; // only right button
            lastPoint = evt.mapPoint;
        });

El código completo sería algo como:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title> Topographic Map</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
    </style>
    <script type="text/javascript">var djConfig = {parseOnLoad: true};</script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>
    <script type="text/javascript">
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("dijit.Menu");

      var map;
      var lastPoint;

      function Foo(){
           alert("x: " + lastPoint.x + " y: " + lastPoint.y);
      }
      function Bar(){
           alert('Bar');       
      }

      function init() {
        var initExtent = new esri.geometry.Extent({"xmin":-13635568,"ymin":4541606,"xmax":-13625430,"ymax":4547310,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map",{extent:initExtent}); 
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
        map.addLayer(basemap);
       
        var resizeTimer;
        dojo.connect(map, 'onLoad', function(theMap) {
          dojo.connect(dijit.byId('map'), 'resize', function() {  //resize the map if the div is resized
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout( function() {
              map.resize();
              map.reposition();
            }, 500);
          });
        });

        dojo.connect(map, 'onMouseDown', this, function(evt){
            if(evt.button !== 2) return; // only right button
            lastPoint = evt.mapPoint;
        });
      }

      dojo.addOnLoad(init);
    </script>
  </head>
  
  <body class="tundra">
    <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width: 100%; height: 100%; margin: 0;">
        <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;"></div>
    </div>
        <!-- Right-button menu -->
        <div dojotype="dijit.Menu" id="menu" contextmenuforwindow="false" style="display: none;" targetnodeids="map">
            <div dojotype="dijit.MenuItem" onclick="Foo();">Foo</div> 
            <div dojotype="dijit.MenuSeparator"></div> 
            <div dojotype="dijit.MenuItem" onclick="Bar();">Bar</div> 
        </div> 
  </body>

</html>

La última versión del API para JS disponible con la que lo hemos probado es la v2.1 pero no debería ser un problema usar el código en otras versiones.

Enlaces:

[1] API ESRI de Javascript

[2] Ejemplo de mapa con api js de Esri