Introducción a OpenLayers: un visor de mapas javascript.

Introducción a OpenLayers: un visor de mapas javascript.

0. Índice de contenidos.

• 1. Introducción.
• 2. Entorno.
• 3. Descarga y configuración.
• 4. Nuestro primer mapa.
• 5. Mi posición actual.
• 6. Referencias.
• 7. Conclusiones.

1. Introducción

Openlayers es una librería javascript que se ha posicionado como la mejor alternativa a
google maps a la hora de incluir un componente de tipo mapa en cualquier página web, con georeferencias. Lo más interesante es que incluso si disponemos de la cartografía de
Google, Microsoft (MSN Virtual Earth) o Yahoo, también puedes usar OpenLayers como visor porque es totalmente compatible con tecnologías propietarias, además de cumplir con los estándares WMS y WFS.

Al ser una librería del lado del cliente, es un visor de mapas en javascript, la descarga de estos se realiza directamente desde el navegador a través de Ajax; no genera tráfico en el servidor,
los mapas se descargan directamente del servidor de mapas que suele ser una pieza diferenciada a nivel de sistemas.

OpenLayers permite sobreponer distintas capas sobre una básica, añadir indicadores o puntos en el mapa con leyendas, así como polígonos y proporciona su propio api para dibujarlos de una manera sencilla.

Incorpora un set de controles básicos y una toolbar de controles avanzados y podemos incluir nuestros propios controles haciendo uso del API.

Si teneis dudas en cuanto al rendimiento del lado cliente, echad un vistazo a esta demo que muestra puntos en un mapa.

2. Entorno.

El tutorial está escrito usando el siguiente entorno:

• Hardware: Portátil MacBook Pro 15′ (2.4 GHz Intel Core i7, 8GB DDR3 SDRAM).
• Sistema Operativo: Mac OS X Lion 10.7.4
• OpenLayers 2.12

3. Descarga y configuración.

Para comenzar a hacer uso de OpenLayers tenemos dos opciones: descarganos la librería
o hacer uso de la misma en modo hosting.

<script type="text/javascript"
      src="/wp-content/uploads/tutorial-data/http://www.openlayers.org/api/OpenLayers.js">
</script>

Si optamos por la descarga, despues de desempaquetar no tenemos más que copiar el fichero OpenLayers.js a nuestro directorio de librerías javascript y
comenzar a hacer uso del mismo.

4. Nuestro primer mapa.

Para incluir nuestro primer mapa no tenemos más que disponer una capa en el cógido html identificándola con un id.

<div id="miMapa" style="width: 512px; height:512px;">

E incluir un código como este.

<script type="text/javascript">
  var mapa = new OpenLayers.Map("miMapa");
  var layerBase = new OpenLayers.Layer.WMS(
    "OpenLayers WMS",
    "http://vmap0.tiles.osgeo.org/wms/vmap0",
    {layers: "basic"});
  mapa.addLayer(layerBase);
  mapa.addControl(new OpenLayers.Control.LayerSwitcher(true));
  mapa.addControl(new OpenLayers.Control.MousePosition({ numDigits: 2 }));
  mapa.addControl(new OpenLayers.Control.ScaleLine());
  mapa.setCenter(new OpenLayers.LonLat(0, 40), 5);
</script>

El resultado será similar al siguiente:

La lectura del código javascript es sencilla:

• creamos un mapa sobre la capa «miMapa»
• creamos una capa base apuntando a un servidor de mapas público «http://vmap0.tiles.osgeo.org/wms/vmap0»
• añadimos dos controles: uno que indica la posición del cursor y otro que permite hacer zoom (probad shift + seleccion de zona para hacer zoom)
• centramos el mapa en un punto (0,40), con un nivel de profundidad 5.

5. Mi posición actual.

Vamos a introducir una pequeña variación en el ejemplo anterior obteniendo tu posición geográfica actual; hemos cambiado la capa base por el callejero público de Open Street Maps y añadiremos una marca a ver si acertamos 😉 .

para posicionarte, con un navegador que soporte las capacidades de geoposicionamiento de HTML5, te pedirá confirmación para compartir tu ubicación.

¿Acertamos?, el código es el siguiente:

<script type="text/javascript">
  var mapa2 = new OpenLayers.Map("miMapa2");
  var osm = new OpenLayers.Layer.OSM();
  mapa2.addLayer(osm);
  mapa2.addControl(new OpenLayers.Control.LayerSwitcher(true));
  mapa2.addControl(new OpenLayers.Control.MousePosition({ numDigits: 2 }));
  mapa2.addControl(new OpenLayers.Control.ScaleLine());
  mapa2.setCenter(new OpenLayers.LonLat(0, 40).transform(
      new OpenLayers.Projection("EPSG:4326"),
      mapa2.getProjectionObject()
      ), 5);

  function posicioname(){
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
      var lat = position.coords.latitude;
      var lng = position.coords.longitude;
      var lnglat = new OpenLayers.LonLat(lng,lat).transform(
          new OpenLayers.Projection("EPSG:4326"),
          mapa2.getProjectionObject())
      mapa2.setCenter(lnglat, 14);
    
      var markers = new OpenLayers.Layer.Markers( "Marcas" );
      markers.addMarker(new OpenLayers.Marker(lnglat));
      mapa2.addLayer(markers);
        
      });
    }
  }
</script>

La lectura del código javascript se complica, pero no mucho:

• navigator.geolocation es el objeto nativo de HTML5 que nos permite obtener la ubicación actual del dispositivo,
• para añadir la capa de Open Street Map, OpenLayers tiene una función nativa OpenLayers.Layer.OSM(),
• los mapas de Open Street Maps usan el sistema de referencia espacial EPSG:4326 (Coordenadas Geográficas WGS84) y debemos adaptar la posición obtenida del dispositivo a dicha proyección haciendo uso de la función transform sobre la posición (lnglat),
• para añadir una marca debemos añadir una capa de tipo OpenLayers.Layer.Markers que acepta marcas de tipo OpenLayers.Marker que tienen sus propios iconos, aunque se pueden personalizar.

6. Referencias.

• http://openlayers.org/
• http://openlayers.org/dev/examples/
• http://www.juntadeandalucia.es/servicios/madeja/contenido/recurso/244
• http://victorvelarde.wordpress.com/2011/01/31/material-de-introduccion-a-openlayers/

7. Conclusiones.

Es una librería muy pontente que requiere profundizar en conocimientos de GIS (Geographic Information System) que, a priori, puede que no tengamos.

La gran ventaja, no requiere el uso de licencias como google maps y, aunque dispongamos de ellas, también podemos hacer uso de OpenLayers sobre google maps.

El abanico de posibilidades es enorme, no tenéis más que revisar los ejemplos online: importar marcas en formato KML, marcar polígonos con islas, posicionar marcas con el parseo de rss, integración con jQuery Mobile, añadir animaciones a los polígonos para representar, por ejemplo, una trayectoria,…

A disfrutarlo!

Un saludo.

Jose

jmsanchez@autentia.com