Visor de terremotos del USGS con OpenLayers

En este post se presenta un pequeño ejemplo de visor, en el que se muestran los terremotos más recientes en el mundo, usando la biblioteca OpenLayers 3.

Los terremotos se leen de un origen remoto, en formato Geojson, y se actualizan automáticamente, gracias a un estupendo servicio feed del USGS


Sobre gist & bl.ocks:
* gist. Se trata de un servicio gratuito de github, para alojar pequeños codigos de ejemplo, que se persisten sobre un repositorio git. Gracias a ello son accesibles para su modificación desde cualquier equipo con un cliente git.
* bl.ocks.org. Un servicio, del creador de D3, que siguiendo unos pocos convenios en el gist, permite el acceso a su código en vivo, junto a su fuente, permitiendo mini-proyectos autodocumentados.

Nota:
Este ejemplo se presenta en el último video de la serie de seminarios sobre JavaScript, elaborada para geospatialtraining.com (ver Videos de introducción a JavaScript)

Video explicativo

Anuncios

Materiales curso OpenLayers e Ikimap – DGSIG 2013

Hola a todos,
En este post incluyo los materiales completos de la asignatura “Desarrollo de aplicaciones geográficas web”, que he estado impartiendo los últimos 3 años en el Curso de Experto en DGSIG de la Universidad de Cantabria. Son los utilizados en la última edición presencial del curso (enero de 2013) y tienen licencia Creative Commons. Creo que puede ser útil a personas que comienzan en este ámbito, como recurso para el aprendizaje autónomo.
DGSIG2013
Se trata de una versión mejorada respecto a la que ya se publicó aquí  hace un tiempo, aportando una revisión general a los materiales de OpenLayers (versión 2.12), algunos nuevos contenidos sobre Ikimap y los ejercicios del curso. Se incluye:
  • 0 – Guía de la asignatura .- descripción de los objetivos y materiales
  • 1 – Materiales de apoyo.- contenidos teóricos básicos (neogeografía, programación web, plataformas de publicación y OpenLayers)
  • 2 – Presentación en el aula.- soporte visual de los contenidos.
  • 3 – Ejercicios.- carpeta con los enunciados y sus soluciones.
Los materiales se pueden descargar aquí: DGSIG_2013.zip [cambiar extensión .odt por .zip]

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

Material de introducción a OpenLayers

Recientemente he tenido el placer de participar como profesor dentro de la primera edición del curso Experto en Desarrollo y Gestión de Sistemas de Información Geográfica de la Universidad de Cantabria.

El módulo que impartí era una introducción rápida a OpenLayers. La mayoría de los alumnos eran geógrafos, pero también había biólogos, historiadores, sociólogos… sin una base previa de programación pero con interés en aprender.

OpenLayers

Cuelgo a continuación el documento de apuntes que se les entregó a los alumnos para apoyar y complementar los ejercicios prácticos hechos en clase.

Apuntes ‘Curso OpenLayers’

El documento pretende recoger los fundamentos básicos útiles (sobre neogeografía, mashups, html, javascript…) para que una persona sin conocimientos previos de programación se sienta cómoda al empezar a trabajar con OpenLayers.

Saludos y que sea útil.

Nota (15-06-2013): Estos materiales han sido revisados y ampliados, ver la entrada

Cómo convertir un shapefile a geojson

Recientemente necesitábamos publicar una capa geográfica dentro de una web con un sencillo visor de mapas hecho con Openlayers [1]. La capa estaba en el formato omnipresente ESRI Shapefile.

Openlayers acepta un elevado número de orígenes de datos (WMS, WFS, KML, GeoJSON…) pero no directamente ficheros .shp. Una opción hubiera sido utilizar Geoserver [2] como servidor de los datos, pero buscábamos algo más rápido, para una capa estática, y no queríamos incrementar la infraestructura en el despliegue.

Solución rápida:  generar un fichero con el contenido del .shp en formato geojson y luego alojarlo directamente en el sitio web.  ¿Cómo convertirlo? Utilizando la herramienta gratuita y abierta para conversión entre formatos llamada ogr2ogr [3].

1. Nos descargamos e instalamos FWTools [4] que incluye la citada ogr2ogr y otras utilidades.

2. Desde línea de comandos, en la ruta donde hayamos instalado el software (o la incluimos en el PATH y tecleamos desde cualquier directorio):

ogr2ogr c:\ficheroSalida.geojson -f “GeoJSON” C:\ficheroOriginal.shp

3.  Y con esto ya tenemos un fichero geojson apto para consumir desde OpenLayers.

Enlaces:

[1] Librería Openlayers: http://openlayers.org/

[2] Servidor Geoserver: http://geoserver.org/

[3] Librería GDAL: http://www.gdal.org/ogr2ogr.html

[4] Pack FWTools: http://fwtools.maptools.org/