Carlos Gustavo Ruiz

Introducción a OpenLayers

Posted on June 9, 2010 by Carlos Gustavo Ruiz in Lab

Una de las cosas con las que he trabajado últimamente es con OpenLayers. Este es una librería de JavaScript muy interesante para colocar mapas en una página web. Así que pues qué más simpático que compartir poco a poco lo que he aprendido en el camino.

Primero que todo hay que comprender que pues lo mejor para iniciarse con OpenLayers es ver un poco los ejemplos, tratar de ver donde calza dentro de la aplicación que estamos desarrollando, leer un poco de formatos SIG (GIS en inglés) y manos a la obra. Para ver los ejemplos haga click [aquí].

Lo primero que hay que entender para trabajar con OpenLayers es el concepto de capas dentro de un mapa. Esto se refiere a que tenemos capas superpuestas una sobre otra como un cuaderno de papel cebolla y ello nos permitirá visualizar o esconder información dentro del mapa. Estas capas pueden venir en múltiples formatos (servicios OGC, datos de GoogleMaps, Yahoo! Maps, Bing Maps, formatos vectoriales como KML, GML entre otros). Cuando incrustamos dentro de nuestra web un mapa lo que estamos haciendo es llamar a estas capas de información y visualizarlas en el widget de mapas que nos provee OpenLayers.

Hagamos un ejemplo sencillo.

Lo primero es crear un archivo HTML vacío para ir completando

Luego agreguemos OpenLayers a nuestra página, para ello incluimos dentro de la etiqueta head las siguientes líneas para declarar el estilo que define el tamaño del widget y el llamado a la api de OpenLayers desde su web (en caso de querer colocar el archivo OpenLayers.js en su servidor simplemente descargue el paquete comprimido).

A continuación pongamos una etiqueta div dentro del cuerpo del HTML para agregar el widget de mapas.

Ya tenemos listo nuestro HTML, solo basta decirle a OpenLayers que cargue una capa dentro de el widget de mapas y decirlo que arranque al iniciar la página. Para ello agregamos el siguiente código:

y

para que el código se vea así..

y al abrirlo en tu navegador se verá así..

Ejercicio Completado
Ejercicio Completado