Tutorial de OpenLayers (I) – Introducción

Hoy voy a comenzar una serie de posts en los que intentaré ofrecer un pequeño tutorial de introducción a OpenLayers.

OpenLayers es un framework JavaScript que permite incluír mapas georreferenciados en cualquier página web. De alguna manera, como ya comenté en otro post, es similar al API de Google Maps, pero existen algunas diferencias.

OpenLayers

Al grano.

Lo que vamos a necesitar es:

  • Servidor web. Como por ejemplo Apache Web Server.
  • Editor de textos. Vale cualquiera, pero mejor alguno que tenga resaltador de sintaxis y otras facilidades orientadas a programación. Vim, Emacs, TextWrangler, BlueFish Editor, Gedit
  • Navegador web. El que prefiráis, OpenLayers funciona en cualquiera.

Todo el código que utilizaremos puedes descargarlo comprimido, o sólo el index.html:

  • tutorial-OL.zip (ojo, incluye el código de OpenLayers, son casi 8 megas)
  • index.html (botón derecho -> Guardar enlace como…)

Asumo en este punto que tenemos el servidor web configurado, accesible en la dirección http://localhost/, y cuya carpeta pública es /var/www/ (esto lo establezco así para el resto del tutorial, lógicamente da igual dónde esté la carpeta y cuál sea la URL de acceso, aunque con Ubuntu y Apache sí coincide que es así).

Crearemos nuestro primer sitio con OpenLayers. Para ello, creamos una carpeta dentro de la carpeta pública de nuestro servidor que se llame tutorial-OL/, que será donde metamos todo el código del sitio.

Necesitamos descargarnos el código de OpenLayers. Hay varias opciones:

  • Enlazar directamente a la versión alojada en openlayers.org. Esto valdría para hacer algunas pruebas, pero obligas al navegador a cargar el archivo desde su servidor y no el tuyo, con lo que ello supone (¿y si está caído? ¿y si…?).
  • Descargarse la última versión estable. Esta es la que usaremos. En el momento de escribir esto, la última versión estable es la 2.10, y la puedes descargar aquí.
  • Descargarse la versión trunk. OpenLayers utiliza Subversion (un sistema de control de versiones), aunque ya se están pasando a GitHub (OpenLayers 3 ya está en GitHub). En la versión trunk están los últimos cambios hechos a la librería (se hacen varios al día), con lo cual está más actualizada que la estable, pero ésta es -como su nombre indica- más estable. Con lo cual para producción lo lógico es usar la estable, pero para desarrollo se suele usar la última versión.

Bien, pues una vez descargada la versión estable, descomprime su contenido (sólo contiene una carpeta llamada OpenLayers-2.10/) dentro en la carpeta tutorial-OL/.

Crearemos, tembién dentro de la carpeta tutorial-OL/, un fichero index.html que por ahora contendrá lo siguiente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>Tutorial OpenLayers</title>
 <style type="text/css">
  #map {
    width: 800px;
    height: 600px;
  }
 </style>
 </head>
 <body>
 <div id="map">
 </div>
 </body>
</html>

Como ves, se trata de un html estándar, y que sólo contiene un título y un <div> inicial donde irá nuestro mapa, que tendrá un tamaño de 800×600 píxeles. OpenLayers necesita un espacio definido (ancho y alto) para renderizar el mapa. Pero aún no hay nada de OpenLayers por ahí. Lo que tenemos que hacer, antes de nada, es incluír el script de OpenLayers en el fichero html. Para ello añadimos al <head> la siguiente línea:

<script type="text/javascript" src="OpenLayers-2.10/OpenLayers.js"></script>

Con esto estamos cargando un script de OpenLayers en modo singlefile. ¿Qué es esto? El framework proporciona dos modos de funcionamiento: en modo singlefile, cargará toda la librería en un sólo archivo comprimido (el indicado en el atributo src del tag <script> incluido arriba); esto es útil para entornos en producción, pues se reduce el tiempo que tarda en navegador en cargar OpenLayers. En modo singlefile=false, se carga primero un fichero, que contiene código que hará que el navegador cargue uno a uno, sin comprimir, el resto de archivos de OpenLayers. Esto es útil mientras desarrollamos, para poder depurar el código con herramientas como Firebug. ¿Por qué sabes que estamos en modo singlefile? Por el archivo que se referencia. El archivo OpenLayers-2.10/OpenLayers.js es el completo-comprimido, el OpenLayers-2.10/lib/OpenLayers.js. Compruébalo abriendo los dos en un editor de texto!

NOTA IMPORTANTE: estamos utilizando modo singlefile por una y sólo una razón: la versión estable de OpenLayers (2.10) no funciona en modo singlefile=false en Firefox 4, debido a un bug (corregido ya hace tiempo en el trunk/) que hacía que Firefox no pudiese cargar el resto de archivos. Dado que muchos de vosotros probaréis esto en ese navegador, prefiero empezar con el modo singlefile para que no haya ningún problema. Ya nos meteremos a debuguear más adelante…

Bien, ahora debemos decirle a OpenLayers que, cuando cargue la página, cree un mapa y lo meta en nuestro <div>. Para ello añadimos el onload al <body>:

<body onload="init()">

Y ahora lo que nos queda es crear la función init() que haga ese trabajo. El código es el siguiente (la explicación viene después):

<script type="text/javascript">
  function init() {
    var map = new OpenLayers.Map( 'map' );
    var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
      "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
    map.addLayer(layer);
    map.setCenter(new OpenLayers.LonLat(5, 40), 5);
    map.addControl( new OpenLayers.Control.LayerSwitcher() );
  }
</script>

Lo primero que se hace es crear un objeto OpenLayers.Map.

    var map = new OpenLayers.Map( 'map' );

La librería está compuesta por una serie de clases que, al utilizarla, tendremos que instanciar. La principal, por decirlo de alguna manera, es la clase mapa, de la cual creamos una instancia. El parámetro que recibe el constructor es el id del <div> donde queremos que la librería renderice el mapa. El constructor acepta otro parámetro, un objeto con opciones, pero por ahora es suficiente con pasarle éste.

NOTA: en la documentación online de OpenLayers puedes consultar la firma de todos los métodos de todas las clases

Después se crea una capa WMS.

    var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
      "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );

OpenLayers admite muchos tipos de capas; todos ellos se construyen creando objetos que heredan de la clase OpenLayers.Layer. El más utilizado es éste, WMS (Web Map Service). Hay multitud de servicios gratuitos que ofrecen capas por este estándar (entre ellos Google Maps). El constructor recibe:

  • El nombre de la capa (a elegir, es el que aparecerá en el selector de capas) – “OpenLayers WMS”
  • La URL del servicio – “http://vmap0.tiles.osgeo.org/wms/vmap0″ . Los servicios WMS (no voy a entrar más en detalle, hay mucha documentación en Internet) se referencian y acceden a través de una URL.
  • Un objeto con parámetros del servicio WMS – {layers: basic’} . Se le pueden pasar muchos más, pero basta con decirle los nombres de las capas que queremos recibir. De nuevo, sin entrar mucho en detalle, son parámetros que irán en las peticiones que se le hagan al WMS.
  • Aunque en el ejemplo no se utiliza, el constructor admite un cuarto parámetro, otro objeto con opciones, pero esta vez para OpenLayers, no para el servicio WMS. Este es un punto habitual de confusión cuando se empieza a usar OpenLayers. Quiero X opción, ¿en cuál de los dos la incluyo? En el primero (tercer parámetro del constructor) se incluyen parámetros del servicio WMS, por lo tanto (de nuevo no entro en detalles) contendrá cosas como el nombre de las capas que se piden al servidor (como en el ejemplo), el SRS, el formato (png, jpeg…). En el segundo se incluyen opciones para OpenLayers, como un booleano para inidicar si es o no capa base, etc.

Tras esto, se añade la capa al mapa.

    map.addLayer(layer);

Es importante indicar que OpenLayers tiene dos tipos de capas: capas base y capas overlays. Siempre (salvo excepciones, pero olvida esto ya! :) ) tiene que haber al menos una capa base. Si no indicas nada, la capa WMS se entiende que es capa base (es lo que pasa en el ejemplo). Por encima de la capa base se pueden incluir otras capas, y aplicando niveles de transparencia se consiguen superponer unas con otras (eso lo veremos en otro “capítulo”).

Ahora, falta decirle cuál queremos que sea el viewport del mapa, es decir, el encuadre y nivel de zoom.

 map.setCenter(new OpenLayers.LonLat(5, 40), 5);

Esto se hace en una sola linea, creando un punto geográfico en (5, 40) en coordenadas de longitud-latitud y un nivel de zoom (5). El punto es un objeto básico de OpenLayers, el LonLat -no se refiere a un punto en el sentido geométrico de puntos, líneas, polígonos… sino a un punto espacial-. El método de la clase mapa setCenter() recibe este punto y un nivel de zoom, y con eso ya tenemos definido el encuadre. (Hay otras opciones equivalentes, como definir el extent del mapa, el bounding box, etc. pero quizás esta es más intuitiva a simple vista).

Por último se añade un control, el selector de capas.

    map.addControl( new OpenLayers.Control.LayerSwitcher() );

En OpenLayers las interacciones con el mapa se realizan a base de controles (heredan de OpenLayers.Control). No es momento para meterse a fondo pero por dar unos ejemplos, el propio selector es un control, existe otro para dibujar geometrías, otro para modificarlas, uno para obtener información al pinchar en un punto, etc.

Bien, resumiendo, el código completo queda como sigue:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>Tutorial OpenLayers</title>
 <style type="text/css">
  #map {
    width: 800px;
    height: 600px;
  }
 </style>
 <script type="text/javascript" src="OpenLayers-2.10/OpenLayers.js"></script>
 <script type="text/javascript">
  function init() {
    var map = new OpenLayers.Map( 'map' );
    var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
      "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
    map.addLayer(layer);
    map.setCenter(new OpenLayers.LonLat(5, 40), 5);
    map.addControl( new OpenLayers.Control.LayerSwitcher() );
  }
 </script>
 </head>
 <body onload="init()">
  <div id="map">
  </div>
 </body>
</html>

Bueno, espero que a quien lea esto y esté empezando con la librería le haga la vida un poquillo más fácil.

Seguiré, poco a poco, publicando más cosas que completen el tutorial, para ir viendo, como decimos en Galicia, dafeito, cómo se pueden hacer cosas muy chulas con OpenLayers. Si ves alguna errata en el código o no te funciona deja un comentario o ponte en contacto conmigo e intentaré corregirlo.

Post to Twitter Post to Facebook

30 Comentarios

  • 1
    Jenny Muñoz
    07/04/2011 - 09:35 | Permalink

    Excelente Xurxo, esperamos más…..

  • 2
    sonxurxo
    07/04/2011 - 09:57 | Permalink

    Muchas gracias, me alegro de que te guste -yo lo eché de menos cuando empecé con OpenLayers-. Estoy preparando los siguientes capítulos en el (poco) tiempo que tengo libre, irán apareciendo estos días.
    Cualquier duda, corrección o sugerencia que surja no dudes en comentarlo.
    Saludos!

    • 3
      Senen
      30/05/2011 - 16:46 | Permalink

      Hola tio… Estoy con el proyecto de fin de carrera y necesito ayudisima urgente… El profesor me da pistas pero no me ayuda un carajo.. el tema es que utilizo un mapa base Google y desde Postgis cargo una capa…
      Le quito el transparent a la capa y puedo observar como encaja perfectamente.. el problema esta al aumentar el zoom, a cada salgo de zoom la capa que viene de postgis se traslada más y más al norte.. así que cuando llego a Galicia (lo que tengo que mostrar) la capa ya está de camino a Sudamérica… Si me puedes y te apetece ayudar a un pobre chaval que quiere terminar la carrera ahora en junio mi mail y messemnger es SENENGS@HOTMAIL.com … Tengo que resolver el problema de esa capa y luego ejecutar alguna subconsulta de la base de datos (crear otra capa en postgis..) Venga, a ver si te pillo de buen humos y me ayudas… te lo agradecería muchísimo. Encontre este tutorial porq mi profesor me digo:

      Senén,
      Lo más sencillo es que uses un bounding box conocido, unas coordenadas fijas, y establezcas zoom a ese extent, para todo el mapa

      Si sabes como se hace esto estas navidades te mando un jamón ;) Tengo que ahcer un visor de la biodiversidad de Galicia en la web.. los shp de postgis los he cargado en E:23030 y los reproyecto al vuelo a 900913 …

      • 4
        sonxurxo
        31/05/2011 - 06:54 | Permalink

        Hola Senen,

        Ese “[...] y los reproyecto al vuelo [...]” significa que los reproyectas con OpenLayers o con tu servidor GIS? OpenLayers soporta de forma nativa reproyecciones vectoriales entre EPSG:4326 y EPSG:900913, para el resto de reproyecciones tienes que incluír la librería Proj4js, que tiene muy fácil integración con OpenLayers (mira esto http://trac.osgeo.org/openlayers/wiki/Documentation/Dev/proj4js).
        Con los datos que me das es lo que se me ocurre que pueda estar pasando.
        Además, como te dice tu profesor, siempre puedes restringir el área y niveles de zoom que vas a permitir visualizar, aunque si hay un problema de incoherencia en los SRS el problema va a persistir.
        Te puede ayudar a descubrir el error el establecer la opacidad de la capa a semitransparente (.setOpacity(0.5)), y así cuando vayas haciendo zoom o panning vas a estar viendo las 2 capas a la vez.
        Saludos!

  • 5
    antonio
    09/04/2011 - 16:21 | Permalink

    buen dia
    esta muy bien tu tutorial, al respecto me podrias ayudar para crear el codigo para la herramienta de medir distancia (measure), que debe ir incorporada a la barra de herramientas

    te lo agradesco

  • 6
    antonio
    09/04/2011 - 16:23 | Permalink

    ah tengo parte del codigo pero este no me responde y ademas se ma desaparece la barra de herramientas creada.
    si lo deseas te puedo enviar el codigo a tu email o subirlo aqui

    gracias

    • 7
      sonxurxo
      11/04/2011 - 06:59 | Permalink

      Hola Antonio, gracias por tu interés!
      Estoy preparando la segunda parte del tutorial, y vendrán más, probablemente en la tercera hable de controles. Si quieres envía un comentario con un trozo (pequeño, sino esto se vuelve ilegible) de código que incluya la parte que creas que casca y lo comentamos. Sino, si es muy grande el código, envíamelo al mail y lo miro y te intento ayudar, y después lo publico aquí como comentario para que otra gente lo pueda ver.
      De todas formas, siempre puedes recurrir a la lista de correo de usuarios de OpenLayers (http://lists.osgeo.org/mailman/listinfo/openlayers-users) en la que seguro que la comunidad te puede ayudar (lo hará además de buena gana, es así como funciona!).
      Muchas gracias, un saludo!

  • 8
    sonxurxo
    31/05/2011 - 07:00 | Permalink

    Senen, me preguntas por correo cómo hacer para ver Popups con fotografías sobre una capa PostGIS,
    Hay un ejemplo que hace lo mismo sobre un GeoRSS de Flickr, http://openlayers.org/dev/examples/georss-flickr.html, que te puede ayudar bastante en la segunda parte. Para la primera (incluír capas extraídas de PostGIS) ya te contesté en otro comentario. Y para integrarlo todo, pues todo depende de cómo esté estructurada la información, supongo que lo más normal es que la fuente de datos (la base de datos) te proporcione la forma de acceder a una imagen relacionada con una entidad o geometría (por ejemplo, un campo de texto que sea la URL de la imagen). En ese caso, puedes hacer un GetFeatureInfo a través de WMS o un GetFeature a través de WFS para obtener esos datos alfanuméricos. De nuevo, te remito al material del curso que dimos (http://blog.sonxurxo.com/2011/05/21/impresiones-tras-el-curso-de-openlayers-xeoinquedos) ya que hay ejemplos de cómo hacer ambas cosas.
    Saludos!

  • 9
    Ladymerche
    01/06/2011 - 13:05 | Permalink

    Hola,

    Hace muy poquito que he aterrizado en el mundo OpenLayers y tengo una duda.
    He visto que el visor cartográfico que contiene mi aplicación no puede mostrar las imágenes y eso solo pasa con el nuevo Firefox 4.0.1. Mi pregunta es,
    ¿sabes exactamente qué debo hacer para solucionar este fallo?
    ¿Se debe utilizar otra versión del Firefox (esperar a q salga una más estable), instalar en la aplicación una librería OpenLayers de versión más moderna q solucione ésto, o
    tocar a capón el código para solucionarlo?

    Gracias de antemano.
    Un saludo
    Merche

  • 10
    sonxurxo
    01/06/2011 - 13:58 | Permalink

    Hola Merche,

    Hay un bug en la versión 2.10 estable de OpenLayers para Firefox 4, solucionado ya desde hace tiempo en la versión trunk (la del repositorio Subversion), que hace que carguen mal los archivos cuando se usa el modo singlefile = false. Esto ocurre cuando importas el fichero “lib/OpenLayers.js” en lugar del fichero “OpenLayers.js” (es decir, el que está en la carpeta lib/ en lugar del que está en la carpeta raíz que obtienes cuando te descargas la librería). De todos modos para tener en producción un sistema deberías importar siempre la versión de la carpeta raíz, porque es el equivalente al otro pero en un único archivo (minificado), menos costoso para el navegador (la versión con múltiples archivos se suele utilizar para desarrollar, porque permite debuguear mejor).
    Soluciones:
    - La mejor, importar el fichero que te digo (lo tendrás por ahí, es el que viene en la raíz). Sería cambiar la linea

    < script src="../lib/OpenLayers.js" type="text/javascript">

    por

    < script src="../OpenLayers.js" type="text/javascript">

    (por si quieres hacer copy-paste, nota los espacios en blanco en el tag script, son para que el filtro de comentarios me los deje pasar) en el supuesto de que lo tengas ahí (si lo quitaste por cualquier cosa, vuelve a descargárte el .zip o .tar.gz de la librería y coge sólo ese archivo
    - También puedes descargarte la versión del trunk con Subversion
    - O puedes esperar un poco y en unos días saldrá la versión 2.11 estable con ese problema solucionado de serie.

    Sin duda lo mejor, la primera opción.
    Espero haberte ayudado. Ya nos cuentas a ver qué tal te fue. Un saludo!

  • 11
    Ladymerche
    02/06/2011 - 10:11 | Permalink

    Hola de nuevo,

    Efectivamente, gracias por tu ayuda. Al final pude resolver el anterior error del que hablábamos, pero sale uno nuevo (menos grave, pero eliminable). Aparece el siguiente error antes de representar la capa:

    “Your browser does not support vector rendering. Currently supported renderers are:SVG VML”

    Mi versión de FF es 4.0.1, pero mi versión de OpenLayers es antiquisima y posiblemente podría ser la causa. Es la versión 1.2 (q ya ha llovido…=) )

    ¿Q opináis?

    Un saludo y gracias de antemano

    Merche

  • 12
    sonxurxo
    02/06/2011 - 10:28 | Permalink

    Probablemente eso sí que sea debido a la versión antigua de OpenLayers. Y ojo! Si te bajaste el script OpenLayers.js del trunk de OpenLayers para solucionar el otro problema y lo enchufaste en esa versión te va a dar problemas, porque va a intentar cargar clases (ficheros) que no existen. Lo mejor es que actualices (van por la 2.10, y en breve sale la 2.11, ya están en el proceso de RCs!).
    Saludos!

  • 13
    Ladymerche
    02/06/2011 - 11:59 | Permalink

    Ok, gracias por tu comentario Xurxo, ;)

  • 14
    Emilio
    06/06/2011 - 20:52 | Permalink

    Necesito saber como poner capas superpuestas usando olwideget, pueden ayudar con eso???

  • 15
    sonxurxo
    07/06/2011 - 08:32 | Permalink

    Hola Emilio,
    Pues la verdad es que nunca he trabajado con OLWidget, pero en http://olwidget.org/olwidget/v0.4/doc/examples.html puedes ver bastantes ejemplos de uso. La forma de utilizarlo dependerá del API de la librería más que de OpenLayers.
    Saludos

  • 16
    Gery
    07/09/2011 - 21:00 | Permalink

    Excelente aporte, muchas gracias.

    • 17
      Leiber
      12/09/2011 - 14:26 | Permalink

      Disculpen soy nuevo y lo que han escrito me resulta muy interesante por lo que estoy sugiriendo su ayuda. Realizo un proyecto en el que a medida que voy dando click en el mapa me va colocando un pequeño ícono pero necesito que esto lo haga solo en un area determinada del mismo, bien dicho solo que lo haga en la capa base solamente.

      • 18
        sonxurxo
        19/09/2011 - 07:32 | Permalink

        Hola Leiber,

        deberías establecer unas dimensiones máximas en la capa en la que vas a dibujar el icono (Markers o Vector), iguales a las de tu capa base. El handler de los clicks comprobará que cuando se haga un click sea dentro de la extensión de esa capa, y si es así añadirá un marker.

  • 19
    Leiber
    12/09/2011 - 14:31 | Permalink

    gracias de antemano por la ayuda que pueda recibir.

  • 20
    Teofilo
    14/11/2011 - 12:49 | Permalink

    Hola Xurxo,

    Te escribo para ver si me puedes echar una mano con lo que estoy haciendo:

    Tengo un mapa con Openlayers y me he creado unas capas WMS a las cuales les quiero hacer una peticion GetFeatureinfo para añadir informacion en un popup sacada de la ddbb PostGis de esa capa. he seguido tus tutoriales (muy buenos) y tengo el problema de que al hacer la peticion Getfeatureinfo el resultado es nulo, tal como este: GetFeatureInfo results: Search returned no results.
    no me devuelve nada.

    El codigo es el siguiente:

    info = new OpenLayers.Control.WMSGetFeatureInfo({
    url: ‘http://localhost:8085/cgi-bin/mapserv.exe?map=/ms4w/apps/tfc/linea.map&',
    title: ‘Servidor de Mapas’,
    //layers: “linea”,
    queryVisible: true,
    eventListeners: {
    getfeatureinfo: function(event) {
    if(popup!==undefined){
    map.removePopup(popup);
    }
    popup = new OpenLayers.Popup.FramedCloud(
    “chicken”,
    map.getLonLatFromPixel(event.xy),
    new OpenLayers.Size(50,50),
    event.text,
    null, true
    );
    map.addPopup(popup);
    }
    }
    });

    map.addControl(info);
    info.activate();

    He visto en algunos sitios que utilizan un proxy para poder hacer esto. ¿realmente necesito un proxy? o porque no me da respuesta el .map al hacer esta peticion??
    Me funcionan todas las peticiones menos la GetFeatureinfo.

    Este es mi mapfile:

    MAP
    NAME “linea”
    SIZE 512 512
    IMAGETYPE png

    PROJECTION
    “proj=longlat”
    “ellps=WGS84″
    “datum=WGS84″
    “no_defs”
    END
    SHAPEPATH “C:/ms4w/apps/tfc/”
    WEB

    TEMPLATE “metadatos.html”
    IMAGEPATH “tmp”
    IMAGEURL “tmp”

    METADATA
    “wms_abstract” “EEsto es una prueba”
    “wms_title” “Servidor de Mapas”
    “wms_onlineresource” “http://localhost:8085/cgi-bin/mapserv.exe?map=C:/ms4w/apps/tfc/linea.map&”
    “wms_srs” “EPSG:4326 EPSG:900913″
    “gml_include_items” “all”
    “wms_feature_info_mime_type” “text/html”
    “gml_feature_info_mime_type” “text/html”
    END
    END

    OUTPUTFORMAT
    NAME “png”
    MIMETYPE “image/png”
    DRIVER “GD/PNG”
    EXTENSION “png”
    IMAGEMODE PC256
    TRANSPARENT TRUE
    END
    ####Layer linea

    LAYER
    NAME “linea”
    STATUS on
    DUMP TRUE
    TYPE LINE
    CONNECTIONTYPE postgis
    CONNECTION “host=localhost dbname=template_postgis user=postgres password=postgres port=5432″
    DATA “geom FROM linea”

    PROJECTION
    “init=EPSG:4326″
    END

    TEMPLATE “metadatos.html”

    TOLERANCE 0
    TOLERANCEUNITS PIXELS

    METADATA
    “wms_title” “Servidor de Mapas”
    “wms_srs” “EPSG:4326 EPSG:900913″
    “wms_name” “Servidor de Mapas”
    “wms_server_version” “1.1.1″
    “wms_format” “image/png”
    “wms_include_items” “all”
    “gml_include_items” “all”
    “wms_feature_info_mime_type” “text/html”
    “gml_feature_info_mime_type” “text/html”
    “wms_extent” “-180 -90 180 90″
    END

    CLASS
    NAME “linea”
    STYLE
    COLOR 000 255 000
    WIDTH 5.0
    SIZE 10
    END
    END
    END # End Layer

    END #End Map

    En el me he creado un template para poder acceder a la base de datos y extraer la informacion de las tablas:

    Nombre:

    [nombre]

    Descripcion:

    [metadatos]

    Bueno si eres tan amable de darme un consejo te lo agradeceria un monton.

    Saludos, Teo.

    • 21
      sonxurxo
      14/11/2011 - 13:14 | Permalink

      Hola Teófilo,

      El proxy es necesario para hacer cualquier petición XHR desde el navegador a otro dominio:puerto que el original de la página. En cristiano, que si tu página con el mapa está en, por ejemplo, http://localhost/mimapa, el navegador no va a poder hacer ninguna petición (que no sean imágenes y alguna otra excepción) a una url como http://localhost:8085/…. . El firebug te suele dar una información algo extraña, pero lo que es el código de OL debería dar algún error, más que devolver un array de features vacío, por ejemplo (a no ser que hayan cambiado eso en la última versión, que no lo sé pero lo dudo).

      Échale un vistazo al log de tu servidor web o del mapserver para ver si tu mapserver recibe la petición. Si es así, no es del proxy, y si la capa está bien, pues si no encuentra ninguna feature será porque hay un problema con las coordenadas, o la consulta no va bien… (échale un ojo también al log de la base de datos).

      Espero que te sirva de ayuda.

  • 22
    Teofilo
    17/11/2011 - 16:55 | Permalink

    Hola Xurxo,

    Ya he configurado los mapfile para poder hacer la peticion tipo GetFeatureInfo, y obtengo una respuesta tal que asi:

    GetFeatureInfo results:

    Layer ‘linea’
    Feature 17896:
    id = ’4′
    nombre = ‘linea’
    metadatos = ‘Hola esto es una prueba’

    He configurado el proxy.cgi y lo he colocado en el directorio C:\ms4w\Apache\cgi-bin, como dice la documentacion de Openlayers. Hasta aqui todo me funciona bien…

    Ahora, estoy trabajando en Myeclipse donde tengo el codigo alojado en un servidor Jboss con e host=8080 y cuando hago la peticion GetFeatureInfo al Mapserver con host:8085, se me habre un popup!!!, pero con un error 404 diciendo que el recurso requerido /cgi-bin/proxy.cgi no esta disponible. Este error viene del Jboss, como si fuese una ventana html mostrando ese mensaje.

    Hay que configurar el servidor Jboss, o hacer algun otro tipo de configuracion que se me haya pasado por alto???

    De antemano muchas gracias por tu tiempo..

    Salu2, Teo.

    • 23
      sonxurxo
      28/11/2011 - 18:30 | Permalink

      Hola Teofilo, ante todo perdona la tardanza en contestar, ando un poco atareado estas semanas con las apps de Android…
      Aplicación y servidor de mapas funcionan en distinto puerto, tienes que tener en el proxy.cgi añadido el dominio:puerto de tu servidor de mapas, y decirle a OpenLayers dónde está tu proxy (OpenLayers.ProxyHost = “/cgi-bin/proxy.cgi?url=”, o similar). Si tu proxy.cgi tiene permisos de ejecución (755), todo debería ir bien.
      Un saludo

  • 24
    Luis
    05/03/2012 - 19:45 | Permalink

    Hola Xurxo,
    no se si puedas ayudarme, mi problema es al tratar de proyectar una capa vectorial con un feature (un punto que represento con un png)mi mapa está proyectado en EPSG:900913, y el punto lo obtengo con la propiedad xy que me proporciona el control getfeatureinfo al ahcer click en un lugar del mapa,el problema es que la imagen aparece varios centimetros a la derecha del lugar en el que hago click.
    Agradecería mucho cualquier ayuda.
    Un saludo!

  • 25
    jose
    07/03/2012 - 17:02 | Permalink

    quisiera saber si hay como cambiar el color de un OpenLayers.Popup.FramedCloud

  • 26
    Alberto
    26/03/2012 - 16:51 | Permalink

    Hola! Te saludo de Argentina. Mi duda se presenta cuando quiero agregar en mi html una capa que hace referencia a un shape como baselayer y ya tengo las de google. Te paso parte de mi html y desde ya muchas gracias!

    #map {
    width: 1200px;
    height: 500px;
    border: 1px solid BLACK;
    }

    var map, layer, options;

    function init(){
    //maxExtent: new OpenLayers.Bounds(6407962.900196, 5766955.437469, 6454564.535223, 5827531.612531),
    //-58.0481366831066, -38.2457621896479, -57.5149004729889, -37.6995519076503
    //-6436439, -4596094 ,-6397507 ,-4562378
    options= { projection: new OpenLayers.Projection(“EPSG:900913″),
    displayProjection: new OpenLayers.Projection(“EPSG:4326″),
    units: “km”,
    //maxExtent: new OpenLayers.Bounds(-58.257, -38.401, -57.281, -37.581),
    maxExtent: new OpenLayers.Bounds(-6523102, -4647733, -6385141, -4487417),
    scales: [5000, 2000, 1000, 500, 100, 50],
    minScale:[50],
    maxScale:[50000],
    maxResolution: ‘auto’,
    numZoomLevels: 22,
    controls:[]};

    map = new OpenLayers.Map( ‘map’, options);

    map.addControl(new OpenLayers.Control.LayerSwitcher());

    //var gphy = new OpenLayers.Layer.Google(“Google Physical”,{type: google.maps.MapTypeId.TERRAIN});
    var gsat = new OpenLayers.Layer.Google(“Google Satellite”,{type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22});
    //var gmap = new OpenLayers.Layer.Google(“Google Streets”);
    var ghyb = new OpenLayers.Layer.Google(“Google Hybrid”,{type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20});
    // var gearth = new OpenLayers.Layer.Google(“Google Earth”, {type: google.maps.MapTypeId.G_SATELLITE_3D_MAP});

    //map.addLayers([physical, streets, hybrid, satellite, wmsOverlay]);

    //map.addLayers([gsat,ghyb,wmsOverlay]);
    map.addLayers([gsat, ghyb]);
    //map.addLayers([gsat, gphy, gmap, ghyb, gearth]);

    // Create the map object

    map.addLayer(new OpenLayers.Layer.WMS(‘Base’, “http://192.168.50.14/cgi-bin/mapserv.exe?map=c:/ms4w/Apache/htdocs/osse/osse.map”,
    {map_imagetype: ‘PNG’, layers:['base'], transparent:true},
    {isBaseLayer:true, visibility:false}));

  • 27
    Pedro Guerrero
    17/04/2012 - 17:24 | Permalink

    Excelente tu aportación para introducirme a OpenLayers.
    GRACIAS Xurxo!!!
    Desde Sevilla-España,
    Un cordial saludo.

  • 28
    Alvaro
    20/04/2012 - 13:27 | Permalink

    Hola sonxurxo, felicidades por tu blog, es muy interesante y estoy aprendiendo mucho.
    Estoy haciendo mi proyecto final de carrera y quiero conseguir hacer un gisWeb.
    Te escribo para ver si me puedes aclarar una idea, voy a intentar ser lo más claro posible.

    1-Cómo podría cargar mis propios mapas (tengo varias capas en formato .shp) en el visor creado con openlayers?

    2-Sería posible conseguir seleccionar un elemento de ese mapa con un click de ratón ? como por ejemplo, cuando utilizamos arcgis, tu puedes seleccionar entidades de la capa activa, cómo un polígono o una línea y quedan marcados. He estado investigando , pero sólo encuentro funciones para dibujar “sobre” el mapa polígonos, lineas puntos. Sé que OpenLayers incluye en la API controles que permiten interrogar las entidades ubicadas en la zona apuntada por el cursor. Lo que realmente hacen es una petición getFeatureInfo contra el servicio o servicios WMS que publican las capas cartográficas, pero como puedo seleccionar varias zonas a la vez? por ejemplo solo unos polígonos en concreto, para después hacer una intersección con otra capa por ejemplo?
    No sé si me he explicado bien, ni si lo que pretendo hacer es imposible por algún tipo de error de concepto.
    Me gustaría que me explicarás si sería bueno seguir por ese camino, o por el contrario debería pensar en algo diferente.

    Gracias de antemano. Un saludo.
    Alvaro.

    • 29
      sonxurxo
      22/04/2012 - 10:50 | Permalink

      Hola,
      Es buen camino, Openlayers te permite hacer todo lo que dices, pero tendrás que programar algo de Javascript.
      Échale un ojo a los ejemplos de la web de Openlayers, creo que los hay prácticamente para todo lo que quieres hacer.
      Saludos