Higuera - Manual Open Layers

Introduccin al API
OpenLayers es una librera Javascript de uso libre para acceder, manipular y mostrar mapas en pginas web. OpenLayers proporciona un API que permite la creacin de clientes web para acceder y manipular informacin geogrfica proveniente de muy variadas fuentes.
OpenLayers permite incorporar mapas dinmicos en las pginas web. Los mapas se pginas pueden dotar de diversos controles con capacidades de zoom, panning, medida de distancias y muchas otras herramientas ias herramientas. OpenLayers proporciona herramientas para acceder a todo tipo de i informacin geogrfica proveniente de muy variadas fuentes, por ejemplo Web Map Services, Web Feature Services, Mapas comerciales, informacin genrica vectorial, etc. informacin OpenLayers es un proyecto del Open Source Geospatial Foundation (OSGeo). Es una librera en puro Javascript, de uso totalmente libre bajo licencia BSD. Para poder utilizar las clases proporcionadas por OpenLayers habr que incorporar una izar refrencia al script de la librera en la cabecera de nuestro documento HTML:
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
En este artculo se va a analizar la utilizacin bsica de OpenLayers. Desarrollaremos utilizacin una pgina HTML que muestre un mapa mundi obtenido desde el servicio de mapas del Instituto Geogrfico Nacional (Espaa). Antes vamos a introducir algunas de las clases que proporciona la API de OpenLayers. Todo gira alrededor de la clase 'Map', en realidad 'OpenLayers.Map'. La clase 'Map' do '. ' encapsula el mapa que se mostrar en pantalla. Para ello habr que crear una instancia ello de la clase. A este objeto creado, que llamaremos ''mapa', se le aadirn capas de ', informacin, que contendrn la referencia a los datos, y controles que permitirn manipular como se muestra la informacin. Al constructor de la clase 'Map' hay que pasarle como primer argumento una referencia al elemento <div> de la pgina web donde queremos que se muestre el mapa. Lo que se le pasa es el valor del atributo 'id' del elemento <div>. En el cdigo javascript aparecer:
var mapa = new OpenLayers.Map("mapa");
Y en el <body> del cdigo HTML aparecer el elemento <div>:
<div id="mapa" style="width: 600px; height: 300px;"></div>
Ahora tenemos que aadir al mapa al menos una capa con informacin. La informacin cartogrfica, los datos, se introducen a travs de la clase OpenLayers.Layer. En realidad a travs de las clases especializadas derivadas de la clase base OpenLayers.Layer. Hay muchos tipos de capas especializadas para distintos tipos de informacin. Por ejemplo hay una capa 'Vector' (OpenLayers.Layer.Vector) que permite aadir features vectoriales. Hay capas especializadas para aadir marcadores: OpenLayers.Layer.Marker; Hay capas especializadas para acceder a los servicios de mapas comerciales ms conocidos y tambin hay una capa OpenLayers.Layer.OSM que permite acceder a los mapas de OpenStreetMap (OSM). La clase Map tiene un atributo 'layers' que guarda las referencias a las capas que se aaden al mapa. Las capas se aaden al mapa a travs de sus mtodos addLayer() y addLayers(). En el ejemplo que estamos construyendo utilizaremos una capa OpenLayer.Layer.WMS que permite acceder a los Web Map Services. Habr que pasarle al constructor de la capa el URL del servicio y los parmetros de la peticin 'GetMap' que queramos especificar, normalmente al menos el parmetro 'layers' y el parmetro 'projection' que se corresponde con el parmetro 'srs' de la peticin 'GetMap' . En nuestro caso accederemos al Mapa Base del servicio de mapas del IDEE (Infraestructura de Datos Espaciales de Espaa). El URL del servicio es: http://www.idee.es/wms/IDEE-Base/IDEE-Base? El mapa base proporciona una capa denominada "Todas" que da acceso a todas las capas en una. Esta es la capa que utilizaremos en nuestra peticin. El primer parmetro pasado al constructor de la capa es un String con un nombre descriptivo para la capa creada. Con todo ello, la sentencia que crea la capa quedar:
var capa = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://www.idee.es/wms/IDEE-Base/IDEE-Base", {layers: 'Todas', projection: 'EPSG:4230'} );
Habr que aadir la capa creada al mapa mediante:

mapa.addLayer(capa);
Finalmente utilizaremos el mtodo 'zoomToMaxExtent()' de la clase Map para mostrar el mapa en pantalla:
mapa.setZoomToMaxExtent();
Veamos ahora el cdigo html completo de la pgina que estamos desarrollando:

<html> <head> <script src="http://www.openlayers.org/api/OpenLayers.js"></script> <script type="text/javascript"> var mapa, capa; function init(){
mapa = new OpenLayers.Map('mapa'); capa = new OpenLayers.Layer.WMS( "Mapa Base", "http://www.idee.es/wms/IDEE-Base/IDEE-Base", {layers: 'Todas', projection: 'EPSG:4230'} ); mapa.addLayer(capa); mapa.zoomToMaxExtent(); } </script> </head> <body onload="init()"> <h2>Hola Mundo (OpenLayers)</h2> <div id="mapa" style="width: 600px; height: 300px"></div> </body> </html>
Vemos que la llamada a la funcin init(), que es la que crea el mapa, se hace a partir del evento 'onload' del elemento <body>. El resultado de este cdigo lo puedes ver siguiendo el siguiente enlace: http://www.ingemoral.es/pages/HolaMundo.html Podemos observar que el mapa por defecto aade controles para zooming y panning en la esquina superior izquierda. Al elemento <div>le podemos dar estilo CSS para posicionarlo, aadir recuadro, etc. Para aprender ms acerca de OpenLayers lo mejor es descargarse la libreria y sus cdigos fuente desde el lugar de descargas de OpenLayers. La documentacin en linea de OpenLayers no es completa. Dentro del paquete podemos ver los cdigos de cada una de las clases con sus atributos y mtodos perfectamente documentados. Adems se incluye una coleccin muy completa de ejemplos que sirven como tutorial de cmo utilizar distintas tcnicas con las clases de OpenLayers. Para aprender los conceptos bsicos acerca del acceso a los Web Map Services se puede utilizar el tutorial incluido en Descartes. Prximos artculos de este blog profundizarn en otros aspectos de utilizacin de la librera.
El primer mapa
Los mapas de OpenLayers se muestran a travs de pginas Web, por tanto lo primero que hay que hacer para crear un mapa es crear una pgina html donde albergaremos el resto de elementos. Un esquema de pgina Web sencilla podra ser el siguiente:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hola Mundo</title> </head> <body> </body> </html>
Lo siguiente es aadir un elemento 'div' dentro del cual se mostrar el mapa. El elemento 'div' elegido deber tener definido su atributo 'id' y adems deber tener definidas al menos las propiedades de estilo 'width' y 'height'. Hay que sealar que 'width' y 'height' se deben definir dentro de una clasula de estilo CSS. Si asignamos la anchura y la altura del elemento div a travs de las propiedades respectivas del elemento DOM el mapa no se mostrar. Reproducimos el listado de la pgina Web donde hemos aadido un elemento 'div' llamado 'divMapa'. En la cabecera de la pgina hemos aadido una clausula de estilo donde hemos definido la anchura y altura del elemento 'div'.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hola Mundo</title> <style type="text/css"> #divMapa { width: 100%; height: 515px; border: solid 2px #808080; } </style> </head> <body> <div id="divMapa"></div> </body> </html>
Ahora hay que aadir una pequea rutina javascript que utilice las clases de OpenLayers para mostrar el mapa. Para poder utilizar las clases de OpenLayers debemos cargar la librera en memoria. Esto se hace aadiendo un <link> al fichero 'openlayers.js' en la cabecera de la pgina. El fichero 'openlayers.js' lo podemos tener nosotros en nuestro dominio, lo que nos garantizar que siempre utilizamos la misma versin, o podemos enlazar directamente con la versin ltima disponible en el sitio de OpenLayers. Para hacer esto ltimo el enlace que hay que aadir es el siguiente:
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
Una vez cargada la librera en memoria podemos acceder a las clases de OpenLayers. Para mostrar un mapa OpenLayers utiliza la clase OpenLayers.Map, a la que se le aaden una o ms capas, que es lo que realmente se ve. El objeto OpenLayers.Map es el que mantiene la proyeccin en la que estamos trabajando, el centro del mapa y el nivel de zoom en cada momento. Adems el objeto Map tiene una serie de controles. Hay controles que permiten hacer zoom; otros permiten hacer panning o leer las coordenadas del cursor; hay controles que permiten dibujar una linea u otra feature. Hay 38 controles diferentes que se estudiarn en detalle en el captulo dedicado a ello. La parte visible del mapa son las capas que vamos aadiendo al mismo. OpenLayers dispone de una clase genrica OpenLayers.Layer de la cual derivan los tipos especficos de capas adaptados a los distintos tipos de fuentes de datos que maneja el programa. As tenemos capas para acceder a los Web Map Services, OpenLayers.Layer.WMS, o para guardar elementos vectoriales, OpenLayers.Layer.Vector. Hay muchos ms tipos de capas que se vern en detalle en los prximos captulos. Lo primero que hay que hacer es crear un objeto OpenLayers.Map:
var mapa = new OpenLayers.Map("divMapa");
El parmetro 'divMapa' que le pasamos al constructor es el 'id' asignado al elemento 'div' creado en la pgina html para mostrar el mapa. Lo siguiente es crear una capa para mostrar. En el ejemplo que nos ocupa accederemos al mapa mundi proporcionado por Metacarta. Crearemos una capa OpenLayers.Layer.WMS mediante el siguiente constructor:
var capa = new OpenLayers.Layer.WMS( "Metacarta", "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'} );
El primer parmetro pasado al constructor es un nombre identificativo para la capa. El segundo parmetro es la direccin 'URL' del servicio de mapas. El tercer parmetro que admite el constructor es una array con las opciones de la peticin GETMAP, de acuerdo con las prescripciones del estandar OGC para servicios de mapas. En este caso hemos definido el parametro 'LAYERS' de la peticin, solicitando la capa 'basic' Slo queda aadir la capa al mapa y fijar la posicin del centro del mapa y el nivel de zoom inicial, lo que hacemos mediante el mtodo OpenLayers.Map.zoomToMaxExtent(). Hay que sealar que la variable del objeto OpenLayers.Map, en nuestro caso 'mapa', hay que definirla como variable global. El listado completo de la rutina javascript queda como sigue:
<script type="text/javascript"> // Definimos las variables globales 'mapa' y 'capa' var mapa, capa; // Definimos una funcin que arranque al cargar la pgina window.onload= function() { // Creamos el mapa var mapa = new OpenLayers.Map("divMapa");
// Creamos una capa var capa = new OpenLayers.Layer.WMS( "Metacarta", "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'} ); // Aadimos la capa al mapa mapa.addLayer(capa); // Fijamos centro y zoom mapa.zoomToMaxExtent(); } </script>
Ahora ya podemos poner todo junto, con lo que la pgina html quedar:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hola Mundo</title> <script src="http://www.openlayers.org/api/OpenLayers.js"> </script> <style type="text/css"> #divMapa { width: 100%; height: 515px; border: solid 2px #808080; } </style> <script type="text/javascript"> // Definimos las variables globales 'mapa' y 'capa' var mapa, capa; // Definimos una funcin que arranque al cargar la pgina window.onload= function() { // Creamos el mapa var mapa = new OpenLayers.Map("divMapa"); // Creamos una capa var capa = new OpenLayers.Layer.WMS( "Metacarta", "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'} ); // Aadimos la capa al mapa mapa.addLayer(capa); // Fijamos centro y zoom mapa.zoomToMaxExtent(); } </script> </head> <body> <div id="divMapa"></div> </body> </html>
Puedes ver el ejemplo completo y funcionando en el siguiente enlace:

holaMundo.html
Tipos bsicos de datos

OpenLayers est construida sobre Javascript y por tanto dispone de los mismos tipos de datos. En Javascript hay cinco tipos de datos primitivos: Undefined, Null, Boolean, Number y String. Adems se dispone de una coleccin de objetos nativos: Object, Boolean, Error, SintaxError, Function, Number, EvalError, TypeError, Array, Date, RangeError,URIError, String, RegExp, y ReferenceError. OpenLayers ofrece unas clases con mtodos tiles para operar con los tipos de datos bsicos:
OpenLayers.String
Esta clase proporciona los siguientes mtodos:

startsWidth (string, substr) : Comprueba si la cadena 'string' comienza con la cadena 'substr'. Devuelve un Boolean contains( str, substr): Comprueba si la cadena 'substr' est contenida dentro de la cadena 'str'. Devuelve 'TRUE' en caso afirmativo y 'FALSE' en caso negativo. trim(str): Devuelve una cadena en la que se han eliminado todos los espacios que pudiera haber al principio o al final de la cadena 'str' camelize(str): Camel-Case. Convierte una cadena a base de guines en el convenio Camelize. Por ejemplo la cadena 'lat-punto' la convierte en latPunto y la cadena -latpunto en 'LatPunto'. Devuelve una cadena con las modificaciones, sin alterar el original. isNumeric(str): Devuelve un Boolean si la caadena corresponde a un nmero. Reconoce el formato exponencial para nuemros reales. ( p. ej isNumeric("2.5e3") devuelve 'TRUE'). numericIf(str): Si la cadena 'str' es un valor numrico devuelve un Number con ese valor. En otro caso devuelve un String con la misma cadena recibida.
OpenLayers.Number
La clase OpenLayers.Number tiene dos propiedades que se utilizan para dar formato a los nmeros: 'decimalSeparator' y 'thousandsSeparator'. Adems contiene las siguientes funciones para manipular datos tipo Number:

limSigDigs(float, sig): Redondea el valor del Float 'float' al nmero de decimales indicado por el Integer 'sig'. Devuelve un Float con el nmero redondeado. format( num, dec, tsep, decsep): Devuelve un String con el Float 'num' redondeado al nmero de decimales indicados por el Integer 'dec'. Como separadores de millares y decimales se utilizarn los String 'tsep' y 'decsep' respectivamente.
OpenLayers.Function
OpenLayers.Array
OpenLayers.Date
Adems hay unas clases utilitarias:

OpenLayers.Class : Se usa como clase base para todas las dems. OpenLayers.Element : Representa a un elemento DOM.
Hay otras clases de elementos simples:
OpenLayers.Pixel
Representa una posicin de pantalla. Tiene dos propiedades : 'x' e 'y'. El constructor admite como parmetros los valores de las coordenadas x e y:
OpenLayers.Pixel( x: Number, y: Number);
La clase OpenLayers.Pixel tiene los siguientes mtodos de utilidad:

toString() : Devuelve una cadena de la forma 'x=200.4,y=242.2', supuestas estas las coordenadas del objeto clone() : Devuelve un 'clon', una instancia de OpenLayers.Pixel con idnticas x e y que el original. equals (px: OpenLayers.Pixel) : Devuelve un Boolean indicando si el Pixel pasado como argumento es equivalente al objeto propietario del mtodo. add( dx: Number, dy: Number) : Devuelve un OpenLayers.Pixel cuyas componentes son la suma de las originales ms los incrementos 'dx' y 'dy'. offset( px: OpenLayers.Pixel) : Devuelve un OpenLayers.Pixel cuyas coordenadas son la suma del original mas las coordenadas del punto offset
OpenLayers.LonLat
Representa una posicin geogrfica identificada por sus propiedades longitud, 'lon', y latitud 'lat'. Las dos nicas propiedades especificas de la clase LonLat son 'lon' y 'lat' que son del tipo Number y que se correspondern con las coordenadas de un punto expresadas en las unidades de la proyeccin del mapa. As si el mapa est trabajando en una proyeccin con coordenadas geogrficas, el par representara una longitud y una latitud expresadas en grados sexagesimales. En el caso de que el mapa est en otro tipo de proyeccin, la pareja 'lon', 'lat' representar un punto en las coordenadas y unidades de la proyeccin del mapa. Si nuestro mapa utiliza la proyeccin Spherical Mercator, la pareja 'lon', 'lat' sern las coordenadas de un punto en dicha proyeccin y expresadas en metros. Para crear un objeto LonLat se le pasan al constructor la pareja de datos 'lon' 'lat':
var pto = new OpenLayers.LonLat( -3.54, 42.37);
Una vez creado un objeto de la clase OpenLayers.LonLat podremos acceder a sus propiedades individuales de forma sencilla:
var longitud = pto.lon; var latitud = pto.lat;
La clase LonLat expone los siguientes mtodos:

toString(): Devuelve un String formateado con las coordenadas del punto. toShortString(): Devuelve un String formateado con las coordenadas del punto en formato compacto. clone(): Devuelve un objeto LonLat con los mismos valores de 'lon' y 'lat'. add( inclon, inclat): Devuelve un objeto LonLat cuyas coordenadas son el resultado de sumar ordenadamente a las coordenadas del objeto original los valores pasados en los parmetros 'inclon' y 'inclat'.
equal(otherLonLat): Este mtodo devuelve un Boolean que indica si el objeto 'otherLonLat' pasado como parmetro tiene los mismos valores de las propiedades 'lon' y 'lat' que el objeto original. transform(sourceProy, destProy): En este mtodo los dos parmetros que se pasan como argumentos son dos objetos OpenLayers.Proyection. El mtodo modifica las coordenadas del LonLat original mediante la aplicacin del cambio de coordenadas entre la proyeccin 'sourceProy' y la proyeccin 'destProy'. El mtodo devuelve una referencia al objeto original, con las coordenadas transformadas. (Este mtodo modifica las coordenadas del objeto LonLat original). wrapDateLine(maxExtent): fromString (str): Esta funcin crea un objeto LonLat a partir de un String que tenga las coordenadas separadas por una coma. Por ejemplo : 'var ll = OpenLayers.LonLat.fromString("-3,43")'
OpenLayers.Size
Representa un tamao en dos dimensiones. Tiene dos propiedades 'w', anchura y 'h', altura. El constructor admite dos parmetros Number que se corresponden con los valores de la anchura 'w' y la altura 'h' del objeto 'Size' que se desea construir:
OpenLayers.Size( w: Number, h: Number)
La clase OpenLayers.Size expone los siguientes mtodos pblicos:

toString() : Devuelve una Cadena (String) del tipo : 'w=55,h=66' clone() : Devuelve un objeto OpenLayers.Size idntico al propietario del mtodo equals( px: OpenLayers.Pixel) : Devuelve un Boolean que nos indica si los objetos son equivalentes (misma anchura, misma altura).
OpenLayers.Bounds
Representa una regin rectangular, identificada por sus propiedades 'left', 'bottom', 'right' y 'top'.
OpenLayers.Icon
Encapsula un icono. Tiene propiedades 'url', 'size', 'px' y 'offset'. Tambin ofrece una propiedad 'calculateOffset' que permite calcular el offset en funcin del tamao.
OpenLayers.Projection
Representa un cambio de coordenadas.
La clase OpenLayers.Util
La clase OpenLayers.Util es una coleccin de mtodos y propiedades utilitarios que permiten realizar determinadas tareas frecuentes de un modo sencillo. La documentacin de la clase la puedes encontrar en: http://dev.openlayers.org/docs/files/OpenLayers/Util-js.html. Desarrollamos a continuacin la explicacin de algunos de los mtodos de la clase Util:
GetElement()
OpenLayers.Util.getElement( idElemento : String [, idElemento2 : String, ... ] ) : [ domElement o Array[ domElements] ]
Admite como parmetro uno o ms id's correspondientes a elementos del DOM que queremos seleccionar. Nos devuelve un elemento o un Array con los elementos solicitados. El caso habitual con un solo parmetro de entrada es equivalente a 'document.getElementById( idElemento )' o al clsico '$('idElemento')'. Un ejemplo de utilizacin sera:
var element = OpenLayers.Util.getElement("panelIzquierdo");
En este caso la variable 'element' recibira una referencia al elemento del documento html cuyo id es 'panelIzquierdo'.
isElement()
OpenLayers.Util.isElement( elemento : Object ) : Boolean
Recibe como parmetro el elemento a analizar y devuelve 'TRUE' si se trata de una instancia de la clase Element y 'FALSE' en caso contrario.
extend()
OpenLayers.Util.extend( dest: Object, source: Object ) : Object
Este mtodo copia las propiedades del objeto 'source' en el objeto destino 'dest', sin modificar propiedades que no se especifiquen en el objeto 'source'. Es muy til en situaciones en las que creamos un objeto con las propiedades por defecto, y luego con el mtodo 'extend()' afinamos el valor de las propiedades que consideremos adecuado. Un ejemplo de utilizacin lo tenemos en la creacin de un estilo de visualizacin para una Feature punto. Podemos crear un estilo con los valores por defecto de la siguiente manera:
// Crear un objeto estilo con valores por defecto var point_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
Ahora solo necesitamos modificar los valores de las propiedades que queramos personalizar:
point_style.strokeColor = "#000011"; point_style.fillColor = "#ffa500";
removeItem()
OpenLayers.Util.removeItem( miArray: Array, item: Object ) : Array
Esta funcin recorre los elementos del Array 'miArray' y elimina el elemento 'item' si existe. La funcin devuelve una referencia al Array modificado. Para vaciar un Array hay que utilizar 'miArray.length = 0 '.
La clase OpenLayers.Map
OpenLayers.Map es la clase fundamental de la librera OpenLayers. Todo programa de OpenLayers tiene como objeto crear un mapa que se viasualizar en pantalla. Los objetos de la clase OpenLayers.Map son una coleccin de capas, OpenLayers.Layer, que contienen la informacin que se quiere mostrar, y controles, OpenLayers.Control, que permiten interactuar con el usuario. El objeto Map tambin es el responsable de gestionar la visualizacin del mapa en cuanto a Zoom y Panning se refiere. El constructor de la clase Map tiene la siguiente forma:
OpenLayers.Map( div : [DOMElement/ String], options: Object)
El primer parmetro es una referencia al elemento 'div' del documento html destinado a contener el mapa. En lugar de una referencia se puede pasar una cadena de texto con el 'id' del elemento. El segundo parmetro es un Array de opciones en la forma 'key:value'. Las opciones son valores de las propiedades del objeto 'Map' que queramos fijar con un valor determinado en el constructor. Un ejemplo de mapa sin opciones adicionales podra ser:
var map = new OpenLayers.Map("divMapa");
Podemos aadir las opciones adicionales directamente en el constructor:

var map = new OpenLayers.Map("divMapa", projection: 'EPSG:4326', units: 'm' } ); {
Pero tambin podemos preparar primero el objeto de opciones y aadirlo luego al constructor por referencia:
var opciones = {projection: 'EPSG:4326', units: 'm'}; var map = new OpenLayers.Map("divMapa", opciones);
La clase OpenLayers.Map expone una buena coleccin de propiedades y mtodos.

Propiedades del objeto Map
Bsicamente un objeto Map es una coleccin de capas (Layer) y controles (Control). Veamos en primer lugar una serie de propiedades que son colecciones de objetos pertenecientes al mapa:
layers: La propiedad 'layers' es un Array de objetos OpenLayers.Layer, que contiene la coleccin de capas del mapa. Para gestionar la coleccin de capas se dispone de los mtodos: addLayer(), addLayers(), removeLayer(), getNumLayers(), getLayerIndex(), setLayerIndex(), raiseLayer(), setBaseLayer(), getLayer(), getLayersBy(), getLayersByClass(), getLayersByName(), setLayerZIndex(), resetLayersZIndex().
controls: Coleccin de controles asociados al mapa. Para manejar la coleccin se utilizan los mtodos: addControl(), addControls(), addControlToMap(), getControl(), getControlsBy(), getControlsByClass() y removeControl(). Mtodos del objeto Map
Controles: Introduccin
Los controles se utilizan para interactuar con el mapa. Permiten hacer zoom, mover el mapa, conocer las coordenadas del cursor, dibujar features, etc En OpenLayers V2.10 hay 40 clases de controles para utilizar con los mapas. De ellos, dos est desaconsejado su uso pues se van a suprimir en la prxima versin de OpenLayers, la versin 3.0. Los controles descatalogados son 'MouseDefaults' y 'MouseToolBar'. De los 38 controles restantes, dos son nuevos de esta versin, 'SLDSelect' y 'WMTSGetFeatureInfo'. El resto vienen de versiones anteriores, si bien el control 'OpenLayers.Control.Panel' ha sufrido modificaciones en su funcionamiento respecto de anteriores versiones. Todos los controles derivan de la clase 'OpenLayers.Control', y todos los controles se aaden al objeto 'OpenLayers.Map', directa o indirectamente. La clase 'OpenLayers.Map' tiene una propiedad 'controls' que guarda la lista de controles del mapa. Para aadir un control al mapa se puede hacer mediante el mtodo 'OpenLayers.Map.addControl()' o bien directamente en el constructor de 'OpenLayers.Map'. El constructor de la clase OpenLayers.Map permite aadir controles en el momento de la creacin del mapa. Si no se indica nada, el mapa aade los siguientes controles por defecto:

OpenLayers.Control.Navigation OpenLayers.Control.PanZoom OpenLayers.Control.ArgParser OpenLayers.Control.Attribution
Esto es, si creamos el mapa con el siguiente constructor:

var map = new OpenLayers.Map("divMapa");
Automticamente quedan aadidos al mapa los controles por defecto indicados. Podemos crear un mapa sin ningn control de la siguiente manera:
var map = new OpenLayers.Map("divMapa", {controls: [] } );
Si lo que queremos es aadir una serie de controles elegidos por nosotros habra que invocar el constructor del mapa de la siguiente manera:
var map = new OpenLayers.Map("divMapa", { controls: [ new OpenLayers.Control.PanZoom(), new OpenLayers.Control.Attribution() ]} );
Tambin podemos crear un mapa sin controles y aadirselos despus:
var map = new OpenLayers.Map("divMapa", { controls: []}); var ctrlPanZoom = new OpenLayers.Control.PanZoom(); map.addControl(ctrlPanZoom); var ctrlAttribution = new OpenLayers.Control.Attribution(); map.addControl(ctrlAttribution);
En ambos casos hemos creado un mapa con los controles 'PanZoom' y 'Attribution'. Debemos cuidar siempre de aadir el control 'Attribution' para mostrar correctamente los Attribution de los mapas que utilicemos. En OpenLayers las definiciones de estilo por defecto de controles y otros elementos se declaran y definen en la hoja de estilo http://www.openlayers.org/api/theme/default/style.css. Podemos aadir un enlace a dicha hoja de estilo en nuestro cdigo:
<link type="text/css" rel="stylesheet"> href="http://www.openlayers.org/api/theme/default/style.css" </link>
Si echamos un vistazo al fichero vemos que se definen propiedades de estilo para todo tipo de elementos que son faciles de identificar por su nombre de clase. Tambin podemos personalizar la posicin o el aspecto de los controles como se ver en captulos posteriores La lista de controles que podemos utilizar es la siguiente:
Controles generales o ArgParser o Attribution o Button o Graticule o KeyboardDefaults o LayerSwitcher o OverviewMap o Panel o PanPanel o PermaLink o SLDSelect (nuevo versin 2.10) o Snapping o Split Zoom, Panning, Position o DragPan o MousePosition o Navigation o NavigationHistory o NavToolBar o Pan o PanZoom o PanZoomBar o ZoomBox o ZoomIn
ZoomPanel ZoomOut ZoomToMaxExtent Features o EditingToolbar o DragFeature o DrawFeature o GetFeature o ModifyFeature o SelectFeature o TransformFeature Medir o Measure o Scale o ScaleLine Servicios de Mapas o WMSGetFeatureInfo o WMTSGetFeatureInfo (nuevo versin 2.10)
o o o
En prximos captulos iremos explicando la utilizacin detallada de cada uno de estos controles.
La clase OpenLayers.Control
Propiedades:

id : (String) map : (OpenLayers.Map) El mapa al que pertenece el control div : (DOMElement) Elemento 'div' que alberga el control type : (Number) Especifica el comportamiento del control, dentro del panel. Puede tomar los valores: o OpenLayers.Control.TYPE_BUTTON :
Utilizacin de los controles
OpenLayers.Control.KeyboardDefaults
Este control permite hacer zoom mediante las teclas '+' y '-' y mover el mapa con las teclas de flecha. Para activar el control solo hay que crear una instancia de la clase OpenLayers.Control.KeyboardsDefaults y aadirsela a la coleccin de controles del mapa.
var ctrl = new OpenLayers.Control.KeyboardsDefaults(); map.addControl(ctrl);
En el siguiente enlace puedes ver un ejemplo de utilizacin del control: Ejemplo OpenLayers.Control.KeyboardDefaults
OpenLayers.Control.Attribution
En OpenLayers la clase OpenLayers.Layer tiene una propiedad llamada 'attribution' que es un String que se muestra en pantalla cuando el mapa dispone del control OpenLayers.Control.Attribution. El constructor de 'OpenLayers.Map' aade un control 'Attribution' por defecto si no se especifica lista de controles en el constructor. Si al crear el mapa aadimos nuestra propia lista de controles debemos cuidar el detalle de aadir el control OpenLayers.Control.Attribution El control 'Attribution' dispone entre otras de las siguientes propiedades y mtodos que pueden ser de utilidad:
draw() : Inicializa y dibuja el 'attribution'. Devuelve una referencia al elemento 'div' que contiene el control. El valor de retorno podramos utilizarlo para ajustar propiedades de estilo, posicin, etc. updateAttribution() : Actualiza el 'attribution' en pantalla. (El valor de la cadena attribution esta en OpenLayers.Layer.attribution).
En OpenLayers las definiciones de estilo por defecto de controles y otros elementos se declaran y definen en la hoja de estilo http://www.openlayers.org/api/theme/default/style.css. Podemos aadir un enlace a dicha hoja de estilo en nuestro cdigo:
Si echamos un vistazo al fichero vemos que se definen propiedades de estilo para todo tipo de elementos que son faciles de identificar por su nombre de clase. El nombre de la clase que controla el aspecto del control 'Attribution' es 'olControlAttribution'. Por defecto se define de la siguiente manera:
.olControlAttribution { font-size: smaller; right: 3px; bottom: 4.5em; position: absolute; display: block; }
Podemos redefinir los valores a conveniencia, siempre respetando la regla de oro: Colocar el attribution en un lugar visible del mapa.
OpenLayers.Control.Scale
El control Scale muestra la escala actual del mapa, en forma de ratio (1: 10000). El constructor tiene la siguiente signatura:
OpenLayers.Control.Scale ( element: DOMElement, options: Object)
El aspecto y posicin del control Scale viene definido por su atributo 'class' que es 'olControlScale'. Los valores de estilo por defecto para este control los podemos encontrar en el fichero style.css y son los siguientes:
.olControlScale { right: 3px; bottom: 3em; display: block; position: absolute; font-size: smaller; }
Vemos que el control se situa en la esquina inferior derecha por defecto. Estas posiciones las podemos modificar a nuestra conveniencia personalizando las clusulas de estilo de la clase 'olControlScale'. El control Scale tiene una propiedad 'geodesic', que es un Boolean que indica si las distancias se deben calcular mediante geodsicas o cartesianas. Por defecto este valor es 'FALSE', valor que se recomienda para la utilizacin con mapas en 'EPSG:4326' (WGS84). En el caso de trabajar con mapas en Spherical Mercator, 'EPSG:900913', se recomienda establecer el valor de 'geodesic' en 'TRUE'. En este caso, la escala se calcula en base al tamao horizontal del pixel en el centro de la ventana de visualizacin del mapa. El control Scale proporciona dos mtodos:
draw(): Dibuja el control. Devuelve el DOMElement donde se aloja el control.
updateScale(): Recalcula y muestra la escala del mapa.
Para aadir el control Scale a un mapa debemos crear una instancia del control y aadirsela a la coleccin de controles del mapa.
// Crear una instancia del control var ctrl = new OpenLayers.Control.Scale(); // Aadirsela al mapa map.addControl(ctrl);
OpenLayers.Control.Button
Este control representa un boton de pulsar. Est pensado para formar parte de un control contenedor como 'Panel'. La clase Button deriva de Control, a la que aade un valor prefijado para la propiedad 'type' y un mtodo llamado 'trigger'. El tipo de control est fijado en el valor predefinido OpenLayers.Control.Type_BUTTON. El nico mtodo que aporta la clase Button es el mtodo trigger(). El mtodo 'trigger' ser llamado por el panel contenedor cada vez que se pulse el botn. Para crear un botn hay que utilizar el constructor heredado de la clase Control, que admite como parmetro un objeto 'options' que ser un Array asociativo con los valores de las propiedades que queramos especificar. En el caso de los botones le deberemos pasar como parmetros el nombre de clase CSS del 'div' donde se alojar el botn, as como una referencia a la funcin 'trigger()' que hay que llamar cuando se pulse el botn. Un ejemplo podra ser el siguiente :
var button = new OpenLayers.Control.Button({ displayClass: "MyButton", trigger: myFunction }); panel.addControls([button]);
El programa utilizar como nombre de la clase CSS del botn la cadena pasada como argumento aadiendole el sufijo 'ItemInactive'. Esto es, en nuestro ejemplo la clase CSS del botn ser 'MyButtonItemInactive'. En este mismo ejemplo, el programa llamar a la funcin disparadora 'myFunction' cada vez que se pulse el botn.
Botones personalizados
La clase OpenLayer.Control.Panel sirve para agrupar varios controles tipo botn o pulsador. Si no creamos un elemento 'div' en la pgina html para alojar el Panel, el programa le asignar uno y lo situar en la esquina superior izquierda del mapa. Para poder controlar la posicin y el aspecto de nuestro Panel hay que crear un elemento 'div' en la pgina html. En el elemento 'div' hay que definir un 'id' y una clase 'class':
<div class="miPanel" id="panel0"></div> <div id="mapa"></div>
Podemos situar el Panel dentro o fuera del mapa. La posicin y aspecto del Panel la controlamos mediante clausulas de estilo CSS. En nuestro ejemplo hemos decidido situar el Panel en la parte superior y fuera del mapa. La definicin de estilo para el Panel:
.miPanel { position: relative; left: 103px; height: 38px; width: 78px; margin: 6px; border: solid 2px blue; background-color: #00d0ff; }
Para completar el proceso de creacin del Panel habr que llamar al constructor de la clase en el cdigo Javascript. El constructor de la clase Panel admite un nico parmetro que es un Object con las propiedades que queramos especificar al control. En nuestro caso debemos indicarle cual es el elemento 'div' asignado al Panel. Lo hacemos en dos pasos. Primero recuperamos el elemento 'div' con el mtodo 'OpenLayers.Util.getElement' y luego se lo pasamos al constructor del Panel:
// Cogemos una referencia al 'div' del panel var el = OpenLayers.Util.getElement('panel0'); // Creamos el panel0 pasandole la referencia del 'div' var panel = new OpenLayers.Control.Panel({ 'div' : el });
Con esto queda completado el proceso de crear nuestro Panel para alojar otros controles. A los paneles se les pueden aadir cualquiera de los controles predefinidos para hacer zoom, pan, dibujar features, etc. En este caso vamos a aadir dos botones de la clase genrica OpenLayers.Control.Button. La clase OpenLayers.Control.Button ofrece funcionalidad para un botn alojado en un Panel. Para crear un botn no es necesario crear ningn elemento 'div' dentro del cdigo html de la pgina. El programa se encargar de hacerlo por nosotros. Nosotros lo que tenemos que hacer es indicarle el nombre de la clase 'class' que define nuestros botones.
A la cadena que le pasemos al constructor, por ejemplo 'btn1', el programa le aade el sufijo 'ItemActive', de modo que el nombre de la clase del botn queda 'btn1ItemActive'. Este ser el nombre de clase que habr que utilizar en la hoja de estilo para definir el aspecto de nuestro botn. En nuestro ejemplo hemos definido dos botones: 'btn1' y 'btn2'. Los nombres de clase sern 'btn1ItemActive' y 'btn2ItemActive'. La clase Button tiene una propiedad llamada 'trigger' (disparador) que apunta a una funcin que ser llamada cada vez que se pulse el botn. Este es el segundo parmetro que es necesario pasarle al constructor y deber ser el nombre de la funcin que queramos que se ejecute cuando pulsemos el botn. Con estas consideraciones los constructores de nuestros dos botones quedarn:
btn1 = new OpenLayers.Control.Button({ displayClass:"btn1", trigger: btn1Click }); btn2 = new OpenLayers.Control.Button({ displayClass:"btn2", trigger: btn2Click });
El primer parmetro es 'displayClass', que como hemos indicado es el prefijo del nombre de clase del botn. El segundo parmetro es el mtodo que se llamar al pulsar el botn.
// Funcin 'trigger' del boton 1 function btn1Click() { var el = document.getElementById('mapa'); el.innerHTML = "Botn 1"; } // Funcin 'trigger' del boton 2 function btn2Click() { var el = document.getElementById('mapa'); el.innerHTML = "Botn 2"; }
En cuanto a la definicin del estilo de los botones hemos elegido la siguiente:

.btn1ItemInactive { float: left; width: 32px; height:32px; margin: 2px; border: solid 1px #333333; border-bottom: solid 2px #333333; border-right: solid 2px #333333; background-color: #0069b4; background-image: url('image1.gif'); background-repeat: no-repeat; background-position: center cursor: pointer; } .btn2ItemInactive { float: left; width: 32px; height:32px; margin: 2px; border: solid 1px #333333; border-bottom: solid 2px #333333; border-right: solid 2px #333333; background-color: #0069b4; background-image: url('movie.gif'); background-repeat: no-repeat;
background-position: center cursor: pointer; }
Observese que se han utilizado los nombres de clase mencionados anteriormente para cada botn, usando la pseudo clase 'hover' para variar el color del fondo cuando el ratn sobrevuela el botn. Se ha definido para cada botn 'float: left' para que se vayan adosando de izquierda a derecha en lugar de apilarse de arriba a abajo. Adems se ha especificado el tamao y un borde ms grueso abajo y a la derecha para dar sensacin de volumen. Se ha situado una imagen de fondo del botn, centrada y sin repeticin. Creados los botones solo falta aadirlos al Panel y aadir el Panel al Map:
// Aadimos los botones al panel panel.addControls([btn1, btn2]); // Aadimos el panel al mapa map.addControl(panel);
Poniendo juntas todas las piezas, el resultado lo puedes ver en: ejemploControlButton.html
La clase OpenLayers.Layer
La clase OpenLayers.Layer es la clase base para todos los tipos de capas especializadas, que son las que realmente se aaden a los mapas. El constructor de la clase OpenLayers.Layer tiene la siguiente signatura:
OpenLayers.Layer( name: String, options: Object)
El primer parmetro es una cadena que permitir identificar a la capa, por ejemplo en el control LayerSwitcher. El segundo parmetro es un Hashtag de opciones adicionales que se aadirn a la capa. La forma de este parmetro es un Array asociativo de parejas 'key:value' separadas por comas. El constructor no se utiliza directamente, pues se utilizan las clases derivadas, pero un ejemplo ilustrativo de la forma de pasar el segundo parmetro podra ser el siguiente:
var capa = new OpenLayers.Layer( "L1", {opacity: 0.5, isBaseLayer: false } );
La clase OpenLayers.Layer expone las siguientes propiedades:

id : String .- El valor del atributo 'id' asignado al elemento 'div' de la capa name : String .- El nombre de la capa es una cadena que permite identificar a la capa en algunas situaciones, por ejemplo en el Control LayerSwitcher div : DOMElement .- Es una referencia al elemento 'div' que alberga la capa. opacity : Float .- Es un nmero entre 0 (= transparente) y 1 (= opaco) que indica el grado de transparencia de la capa. alwaysInRange : Boolean .- Se debe establecer en 'true' cuando la visualizacin de la capa no se debe basar en zoom. events : OpenLayers.Events .- La propiedad 'events' es la coleccin de eventos de la capa. Es una referencia a un objeto de la clase OpenLayers.Events. map : Es una referencia al mapa que contiene a la capa. Se establece en la funcin addLayer() del mapa o en la funcin setMap() de la capa. El objeto apuntado es un OpenLayers.Map. isBaseLayer : Es un Boolean que indica si se trata de una capa base. Por defecto es falso. Las clases derivadas especializadas establecen un valor por defecto para cada tipo de capa. alpha : Es un Boolean que indica si las imgenes de la capa tienen canal alfa. Por defecto es false. displayInLayerSwitcher : Boolean que indica si el nombre de la capa debe de aparecer o no en el control LayerSwitcher. El valor por defecto es 'true'. visibility : Es un Boolean que indica si la capa es visible o no. El valor por defecto es 'true'. attribution : Se trata de la cadena, String, que se mostrar en el control Attribution. inRange : Es un Boolean que indica si el valor de la resolucin actual est entre el mnimo y el mximo de la capa (minResolution, maxResolution). Se establece cada vez que cambia el zoom. imageOffset : Desplazamientos x,y debidos al borde, 'gutter', en las imgenes que tienen 'gutter'. Es un objeto OpenLayers.Pixel.
options : Se trata de un objeto mediante el cual se pueden pasar al constructor de la capa valores iniciales para cualquiera de las propiedades de la capa. Vease un ejemplo mas arriba en la explicacin del constructor de Layer. eventListeners : (Object) gutter : (Integer) El valor del ancho del borde, si lo tiene. Por defecto es cero projection : (Object) Objeto OpenLayers.Projection con la projeccin de la capa. Si se pasa en el objeto 'options' del constructor, se puede pasar como una cadena del tipo 'EPSG:4326', pero durante la creacin de la capa se construir un objeto Projection. Cuando se utiliza esta opcin suele ser necesario fijar tambin 'maxExtent', 'maxResolution' y 'units'.
units : (String). Las unidades de medida de la capa. Por defecto son grados, y la variable 'units' tiene el valor 'degrees'. Los valores posibles son: 'degrees' (o 'dd'), 'm', 'ft', 'km', 'mi', 'inches' scales : (Array). Un array con las escalas del mapa para cada zoom en orden descendente. Este parmetro slo tiene sentido si est bien calibrado con la resolucin concreta del monitor en el que estemos trabajando. Adems debe de estar bien definida la propiedad 'units' de la capa. En general es preferible utilizar la propiedad 'resolutions'. resolutions : (Array). Un array con las resoluciones del mapa para cada zoom en orden descendente. La resolucin es el numero de unidades de mapa por pixel. Si no se especifica al construir la capa, se calcula en base a otras propiedades de la capa (maxExtent, maxResolution, maxScale, etc). maxExtent : (OpenLayers.Bounds). The center of these bounds will not stray outside of the viewport extent during panning. In addition, if displayOutsideMaxExtent is set to false, data will not be requested that falls completely outside of these bounds.
Tipos de Capas
OpenLayers.Layer.Markers
OpenLayers nos ofrece una capa especial para alojar nuestros marcadores: OpenLayers.Layer.Markers. Un marcador es una instancia de la clase OpenLayers.Marker, que es una combinacin de un icono y una posicin. El constructor de la clase OpenLayers.Markers tiene la siguiente forma:
OpenLayers.Markers ( name : String, options: Object)
El primer parmetro es una cadena que permitir identificar a la capa, por ejemplo en el control LayerSwitcher. El segundo parmetro es una Hashtable de opciones extra que queramos asignar a la capa. Las propiedades pblicas de la capa Markers son:

isBaseLayer : (Boolean = false) Las capas de marcadores no son capas base. Se sobreescribe la propiedad de la clase base OpenLayers.Layer con el valor false. markers : (Array(OpenLayers.Marker)) Lista de marcadores de la capa. Esta propiedad es un Array que guarda las referencias a los marcadores que se han ido aadiendo a la capa. drawn (Boolean) : Nos indica si se ha dibujado la capa. En algunas situaciones al inicializar la capa o hacer zoom es necesario comprobar esta variable y si es necesario llamar al mtodo 'draw()'
La capa Markers proporciona los siguientes mtodos:

addMarker( marker : OpenLayers.Marker) : Aade a la capa el marcador referenciado por la variable 'marker' removeMarker( marker : OpenLayers.Marker ) : Elimina de la capa el marcador 'marker'. drawMarker( marker : OpenLayers.Marker) : Calcula la posicin pixel del marcador, lo crea y lo aade al 'div' de la capa. clearMarkers(): Esta funcin deja vaca la lista de marcadores de la capa. Los marcadores en s mismos no se eliminan, pero si se retiran de la lista de marcadores de la capa. setOpacity( opacity: float): Establece la opacidad de todos los marcadores de la capa. (0 = transparente; 1= opaco) getDataExtent() : Devuelve un OpenLayers.Bounds con la extensin que abarca todos los marcadores de la capa moveTo (bounds, zoomChanged, dragging) :
Puedes consultar la documentacin completa de la clase OpenLayers.Layer.Markers en el siguiente enlace: http://dev.openlayers.org/docs/files/OpenLayers/Layer/Markers-js.html
OpenLayers.Layer.Boxes
La capa WMS
Las capas OpenLayers.Layer.WMS estn pensadas para albergar los datos provenientes de consultas a los Web Map Services de acuerdo con las especificaciones del OGC (Open Geospatial Consortium). En las siguientes referencias puedes obtener una introduccin a los Web Map Services y otros temas relacionados:

TutorialWMS.pdf : Introduccin a los WMS. GetCapabilities.pdf : Capacidades del servicio. GetMap.pdf : La peticin GetMap. GetFeatureInfo.pdf : Peticin de fenmenos. Inspire.pdf : Directiva INSPIRE.
Esta capa hereda de OpenLayers.Layer.Grid. Para acceder a un WMS lo primero que debemos conocer es la url del servicio de mapas. Por ejemplo en Espaa disponemos de un WMS del Instituto Geogrfico en la siguiente direccin url: http://www.idee.es/wms/IDEE-Base/IDEE-Base Existen numerosos servicios de mapas para consultar en la red. En este enlace se pueden ver algunos de ellos. Hay que especificar una serie de parmetros que definirn los datos que queremos recibir del servicio:
Eventos del objeto Map

El objeto OpenLayers.Map es capaz de gestionar los siguientes eventos:
preaddlayer Se dispara antes de aadir una capa. El objeto 'event' tiene una propiedad 'layer' que referencia la capa que se va a aadir. addlayer triggered Despues de crearse la capa. El objeto 'event' tiene una propiedad 'layer' que referencia la capa que se va a aadir. removelayer Se dispara despues de la creacin de una capa. El objeto 'event' tiene una propiedad 'layer' que referencia la capa que se va a aadir. changelayer Despues de cambiar el nombre, el orden, la opacidad, los parmetros o la visibilidad de una capa. Los manejadores del evento recibirn un objeto 'event' con unas propiedades 'layer' y 'property' con referencias a la capa cambiada y la clave de la propiedad cambiada (name, order, opacity, params, visibility). movestart Este evento se dispara al comienzo de un drag, pan o zoom. move Despues de cada drag, pan o zoom. moveend Se dispara al completar un drag, pan o zoom. zoomend Se dispara cuando se completa un zoom. addmarker Despues de aadir un marcador. removemarker Se dispara despues de eliminar un marcador. clearmarkers Despues de borrar los marcadores. mouseover Despues de sobrevolar el ratn el mapa. mouseout Disparado al salir el cursor del mapa. mousemove Cuando el cursor se mueve sobre el mapa. dragstart No funciona. Utilizar movestart. drag No funciona. Utilizar move. dragend No funciona. Utilizar moveend. changebaselayer Se dispara cuando se cambia la capa base.
Para utilizar alguno de los eventos debemos definir una funcin que admita un parmetro de tipo OpenLayers.Event, y que ser la encargada de gestionar el evento.
function miManejador(evt) { ...... }
El objeto 'evt' que recibe la funcin al dispararse el evento tendr distintas propiedades segn el evento de que se trate. Todos tienen al menos las propiedades 'object', una referencia al objeto que dispara el evento ('map.events.object') y 'element', una referencia al elemento DOM que dispara el evento ('map.events.element'). Los eventos del navegador tienen adems la propiedad 'xy' con un objeto OpenLayers.Pixel con las coordenadas del punto donde se ha disparado el evento, relativas a la ventana del mapa. Para registrar nuestro manejador en la lista de manejadores del objeto Map debemos utilizar el mtodo register' de la clase OpenLayers.Events.
map.events.register(type, obj, listener);
Los parmetros que le pasamos son :

type Un String con el nombre del evento que queremos manejar. obj El objeto que recibe el evento. Normalmente el objeto Map
listener Una referencia a la funcin manejadora del evento
Hemos desarrollado un ejemplo en el que aadimos un manejador para el evento 'mousemove' y mostramos las coordenadas de cursor en pixels y en grados en unos elementos 'text' fuera del mapa. testMapEvents.html Si desplazas el mapa o haces zoom podrs comprobar que las coordenadas pixel siempre se refieren a la esquina de la ventana del mapa, mientras que las coordenadas longitud-latitud se refieren a la posicin absoluta en el mapa.
Coordenadas del cursor
En OpenLayers disponemos de una gestin de eventos a travs del objeto OpenLayers.Map que nos permite interactuar con el usuario de diversas maneras. Uno de los eventos proporcionado por el 'Map' es 'mousemove' que nos proporciona las coordenadas en pixels del cursor cuando este se mueve por el mapa. Para utilizar el evento debemos definir una funcin 'callback' que ser llamada cada vez que se dispare el evento, esto es, cada vez que se mueva el cursor sobre el mapa. Adems debemos 'registrar' el evento de forma que indiquemos: el evento que queremos gestionar, el objeto 'Map' y la funcin que hay que llamar cada vez que se dispare el evento.
map.events.register("mousemove", map, mouseMoveHandler);
La funcin que reciba el evento debe de admitir un parmetro 'event'. Por ejemplo podra ser algo parecido a lo siguiente:
function mouseMoveHandler(e) { var position = this.events.getMousePosition(e); var lonlat = map.getLonLatFromPixel(position); }
Vemos que el evento nos proporciona las coordenadas pixel, (a travs del mtodo 'getMousePosition' del objeto 'event'). Mediante el mtodo 'getLonLatFromPixel' del objeto 'map' podemos obtener las coordenadas del punto en la proyeccin que est utilizando el mapa. Esto en algunas ocasiones no nos resuelve el problema. Pongamos por caso que estamos utilizando el mapa OpenStreetMap que trabaja en la proyeccin Spherical Mercator. En este caso el mtodo 'getLonLatFromPixel' nos dar las coordenadas en la proyeccin Spherical Mercator. Si lo que queremos son las coordenadas Longitud y Latitud en el sistema WGS84, por ejemplo, habr que transformar las coordenadas desde Spherical Mercator a WGS84. Para ello podemos utilizar el mtodo 'transform' de la clase LonLat, aunque este mtodo transforma las coordenadas del punto original. Nosotros hemos preferido definir una funcin de transformacin, que mediante un 'clon', devuelve un punto con las coordenadas transformadas sin alterar el punto original:
function transformToWGS84( sphMercatorCoords) { // Transforma desde SphericalMercator a WGS84 // Devuelve un OpenLayers.LonLat con el pto transformado var clon = sphMercatorCoords.clone(); var pointWGS84= clon.transform( new OpenLayers.Projection("EPSG:900913") new OpenLayers.Projection("EPSG:4326")); return pointWGS84; }
La coordenadas del punto devuelto son 'float' con los decimales que le correspondan. Podemos necesitar gestionar el formato de los nmeros. Nosotros hemos decidido poner las coordenadas con cuatro decimales, para lo que utilizamos el siguiente mtodo:
function transformMouseCoords(lonlat) { var newlonlat=transformToWGS84(lonlat); var x = Math.round(newlonlat.lon*10000)/10000; var y = Math.round(newlonlat.lat*10000)/10000; newlonlat = new OpenLayers.LonLat(x,y);
return newlonlat; }
Los valores los vamos a mostrar en un elemento 'div' llamado 'coords'. Incorporando estos afinamientos a nuestra rutina de gestin del evento, podra quedar algo as:
function mouseMoveHandler(e) { var position = this.events.getMousePosition(e); var lonlat = map.getLonLatFromPixel(position); OpenLayers.Util.getElement("coords").innerHTML = transformMouseCoords(lonlat); }
Hemos puesto todo junto en una pgina que puedes consultar en el siguiente enlace:
TestEvents1
Otra forma de mostrar las coordenadas del cursor es a travs del control 'MousePosition'. Este control nos muestra las coordenadas en la proyeccin del mapa. Este control tiene un atributo 'formatOutput' que se puede definir apuntando a un mtodo que transforme las coordenadas que queremos mostrar, como se muestra a continuacin:
var ctrl = new OpenLayers.Control.MousePosition() ctrl.formatOutput = transformMouseCoords; map.addControl(ctrl);
Donde como rutina de 'callback' hemos utilizado el mtodo transformMouseCoords definido anteriormente. En la siguiente pgina utilizamos las dos tcnicas simultneamente y mostramos las coordenadas del cursor en el control y en un elemento HTML:
TestEvents2
VideoMap: Mostrar videos

El objeto OpenLayers.Popup es el utilizado para mostrar un cuadro con informacin en el mapa, por ejemplo al pulsar sobre un marcador. El constructor tiene la siguiente forma:
var pop = new OpenLayers.Popup ( id, lonlat, contentSize, contentHTML, closeBox, closeBoxCallback );
Los parmetros que se pasan al constructor son:

id: (String) Identificador nico para el Popup lonlat: (OpenLayers.LonLat) Coordenadas en el mapa de la esquina superior izquierda del recuadro a mostrar contentSize: (OpenLayers.Size) Tamao del recuadro a mostrar contentHTML : (String) Cdigo de marcado HTML que se mostrar en el recuadro closeBox: (Boolean) Indica si aparecer o no un control en X para cerrar el recuadro. closeBoxCallback: (Function) La funcin que se llamar al cerrar el recuadro. (Opcional)
El parmetro 'contentHTML' puede albergar cualquier cosa que podamos describir con HTML. Son ejemplos habituales mostrar un texto informativo o mostrar un mapa de detalle de la zona pulsada. Nosotros hemos preferido mostrar un video de Youtube. El cdigo de marcado se obtiene en los vdeos de Youtube en la opcin 'insert'. Copiando y pegando en el cdigo javascript, con unos pequeos retoques, pues funciona. Hemos cambiado las comillas dobles por comillas simples para ajustar el parmetro. Adems hemos ajustado el tamao al de nuestro recuadro y hemos aadido dos parmetros del API de Youtube: autoplay=1 y rel=0. El parmetro 'autoplay' por defecto vale '0' e indica si se debe reproducir el vdeo automticamente o no. El parmetro 'rel=0' (por defecto vale '1') indica que no se muestren en la imagen enlaces a otros vdeos parecidos. El ejemplo completo lo podis encontrar en el siguiente enlace: VideoMap.html
Map Markers
Google populariz los marcadores para mapas, esos pequeos iconos que sirven para sealar una posicin sobre un mapa electrnico y que suelen proporcionar acceso a alguna caracterstica adicional al pulsar sobre ellos. Desde entonces han aparecido cientos de marcadores, cada vez mas sofisticados, pero que bsicamente conservan el 'look' orignal que permite identificarlos como marcadores. Actualmente hay muchas colecciones de marcadores disponibles para utilizar en nuestros mapas. Una buena coleccin es la que se puede ver en Google-Maps-Icons, coleccin de 900 marcadores de uso libre y organizados por categoras : Cultura, Educacin, Transporte, ... Hay otros sitios de marcadores :
Mapki : Google Mapki Mapito : Free Map Marker Icons MapChannels
Tambin se pueden utilizar imgenes vectoriales para crear marcadores. Una forma de hacerlo es a travs de juegos de caracteres personalizados. La calidad de estos marcadores es buena, pero slo proporcionan dos colores. Independientemente la simbologa para cartografa est reglamentada en muchos campos:

Map Symbols Topographic Symbol Chart USA Chart Symbols Aeronautical Chart Symbols Nautical Chart Symbols
A continuacin presentamos el listado de un ejemplo de mapa sencillo con un marcador, desarrollado para la API de Google:
function init() { if(GBrowserIsCompatible()) { var centerLatitude=40.678; var centerLongitude=-3.97; var startZoom=13; var map = new GMap2(document.getElementById("map")); var location=new GLatLng(centerLatitude, centerLongitude); map.setCenter(location, startZoom); var marker=new GMarker(location); map.addOverlay(marker); } }
El ejemplo siguiente es similar al anterior pero desarrollado para la API de OpenLayers:

function init() { var map, layer, center; center = new OpenLayers.LonLat(-3.97,40.678); map = new OpenLayers.Map("map"); layer = new OpenLayers.Layer.WMS( "Cartociudad", "http://www.cartociudad.es/wms/CARTOCIUDAD/CARTOCIUDAD", {layers: ['Vial', 'DivisionTerritorial', 'FondoUrbano']});; map.addLayer(layer); var markers = new OpenLayers.Layer.Markers( "Markers" ); map.addLayer(markers); var size = new OpenLayers.Size(21,31); var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon( "http://www.ingemoral.es/img/markers/icons-2/scenic.png", size,offset); markers.addMarker(new OpenLayers.Marker(center, icon)); map.setCenter(center, 13); }
El resultado de ambas pginas se puede ver en los siguientes enlaces. Tambin puedes examinar el cdigo fuente completo de los ejemplos. TestGoogleMarker TestOpenLayersMarker
Dynamic map markers

Como continuacin del artculo sobre Estilos personalizados de puntos mostramos un mapa en el que se utilizan instancias de la clase OpenLayers.Feature.Vector con una geometra 'Point' en la que en lugar de utilizar los grficos predefinidos utilizamos el atributo 'externalGraphic' apuntando a cualquier tipo de grafico. En nuestro ejemplo hemos utilizado algunos grficos GIF dinmicos a modo de marcadores.
El codigo fuente de la pgina lo puedes ver en:
TestImageStyle.html TestImageStyle.js
Elementos vectoriales
Vamos a desarrollar un ejemplo muy simple de mapa al que aadiremos tres elementos (features) vectoriales: un punto, una linea y un polgono. OpenLayers define la clase OpenLayers.Feature y sus derivadas como una combinacin de geometra y atributos. En particular la clase OpenLayers.Feature es una combinacin de un LonLat y un Marker. La clase que utilizaremos en el ejemplo es OpenLayers.Feature.Vector. Esta clase proporciona un atributo 'Geometry' que describe su geometra, un atributo 'attributes' para describir el objeto y un atributo 'style' con el que se puede dotar de propiedades de estilo de representacin a las features siguiendo las reglas de los Styled Layer Descriptor (SLD) del OGC. En este artculo utilizaremos el estilo por defecto que OpenLayers asigna, y en un artculo posterior desarrollaremos el tema de los estilos. El atributo 'geometry' es una referencia a un objeto de la clase OpenLayers.Geometry. Esta clase tiene varias clases derivadas que nos permiten definir distintos tipos de geometras. En nuestro caso utilizaremos las clases OpenLayers.Geometry.Point para definir la geometria de un punto, OpenLayers.Geometry.LineString para definir lneas abiertas y OpenLayers.Geometry.LinearRing para definir polgonos (lineas cerradas). En los tres casos el procedimiento seguido para aadir features vectoriales es el mismo. Se crea un objeto con la geometra adecuada que luego es el parametro que se pasa al constructor de la clase OpenLayers.Feature.Vector. En este caso, al utilizar los estilos por defecto, la geometra es el nico parmetro que pasamos al constructor de la feature. Para visualizar las features creadas debemos aadirlas a una capa vectorial del tipo OpenLayers.Layer.Vector. A esta capa se le aaden las features a travs del mtodo addFeatures(). El programa que desarrolla el ejemplo es el siguiente:
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Capa Vectorial</title> <script src="../javascript/openlayers/OpenLayers.js" type="text/javascript"></script> <script type="text/javascript"> function init() { var map; // Crear la capa base map = new OpenLayers.Map('map');
var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} ); map.addLayer(layer); // Crear una feature punto var point = new OpenLayers.Geometry.Point(-4.0, 40.0); var pointFeature = new OpenLayers.Feature.Vector(point); // Crear una feature line var pointList = []; var newPoint = point; for(var p=0; p<10; ++p) { newPoint = new OpenLayers.Geometry.Point( newPoint.x + Math.random(1), newPoint.y + Math.random(1)); pointList.push(newPoint); } var lineFeature = new OpenLayers.Feature.Vector( new OpenLayers.Geometry.LineString(pointList)); // crear una feature polygon var pointList = []; for(var p=0; p<6; ++p) { var a = p * (2 * Math.PI) / 7; var r = Math.random(1) + 1; var newPoint = new OpenLayers.Geometry.Point( point.x + (r * Math.cos(a)), point.y + (r * Math.sin(a))); pointList.push(newPoint); } pointList.push(pointList[0]); var linearRing = new OpenLayers.Geometry.LinearRing(pointList); var polygonFeature = new OpenLayers.Feature.Vector( new OpenLayers.Geometry.Polygon([linearRing])); // Crear una capa vectorial var vectorLayer = new OpenLayers.Layer.Vector("Capa Vectorial"); // Aadir las features a la capa vectorial vectorLayer.addFeatures( [pointFeature, lineFeature, polygonFeature]); // Aadir la capa vectorial al mapa map.addLayer(vectorLayer); // Visualizar var center=new OpenLayers.LonLat(point.x, point.y); map.setCenter(center,4); } </script> </head>
<body onload="init()"> <div id="map" style="width:600px; height:300px;"></div> </body> </html>
El resultado del ejemplo lo puedes ver en el siguiente enlace: TestVectorFeatures.html
Estilos personalizados: Puntos

OpenLayers proporciona una clase Vector, derivada de Feature, que encapsula la funcionalidad de una geometra ms unas reglas de aspecto visual. La geometra deber ser una instancia de alguna clase derivada de OpenLayers.Geometry. Las reglas de estilo de representacin se asignan en el atributo 'style' de la clase OpenLayers.Feature.Vector. Las reglas de estilo siguen las directrices del W3C para grficos vectoriales SVG. Tambin son normativas de referencia en este sentido los documentos correspondientes del Open Geospatial Consortium : 'Symbology Encoding Implementation Specification' y 'Styled Layer Descriptor profile of the Web Map Service Implementation Specification'. Adems la clase Vector hereda de Feature un atributo llamado 'attributes' que permite aadir caractersticas adicionales al objeto de que se trate. En este artculo trataremos sobre la forma de dar estilo a las Features cuya geometra es un punto :OpenLayers.Geometry.Point. El constructor de la clase Vector tiene la siguiente forma:
Openlayers.Feature.Vector( geometry, attributes, style)
El primer atributo que hay que pasar al constructor es una geometra. Definir una geometra de la clase Point es sencillo:
var point = new OpenLayers.Geometry.Point(-4.04, 40.68);
En nuestro ejemplo no vamos a utilizar el parmetro 'attributes'. El parmetro 'style' deber ser un objeto de la clase OpenLayers.Style. Esta clase representa un Styled Layer Descriptor, SLD, en la linea de los definidos por el Open Geospatial Consortium. Los valores de atributos de estilo aceptados por las features vectoriales de OpenLayers son un subconjunto de los definidos por normas mencionadas anteriormente. Si no se especifica un estilo, OpenLayers asigna unos valores por defecto a estos atributos de estilo. La documentacin de OpenLayers construye el objeto 'Style' a partir de un objeto con los valores por defecto, utilizando para ello el mtodo 'extend' de la clase OpenLayers.Util. Este mtodo lo que hace es copiar en el objeto destino todas las propiedades del objeto utilizado como origen (fuente). Nos devuelve el objeto destino modificado:
var point_style = OpenLayers.Util.extend( {}, OpenLayers.Feature.Vector.style['default'] );
Una vez construido un objeto 'style' con los valores por defecto, podemos personalizar las propiedades que queramos modificar. En el ejemplo que estamos desarrollando hemos elegido los siguientes valores:
point_style.graphicName = "star"; point_style.graphicOpacity = 1; point_style.pointRadius = 20; point_style.rotation = -15; point_style.fillColor = "#ffa500"; point_style.fillOpacity = 0.4; point_style.strokeColor = "#000011"; point_style.strokeWidth = 2; point_style.strokeLinecap = "butt";
Una vez creado el objeto 'Style' nos queda lo siguiente:
// Crear la Feature var point = new OpenLayers.Geometry.Point(2.81161,41.98523); var pointFeature = new OpenLayers.Feature.Vector(point,null,point_style); // Crear una capa vectorial var vectorLayer = new OpenLayers.Layer.Vector( "Point Geometry", {style: point_style} ); // Aadir las features a la capa vectorial vectorLayer.addFeatures([pointFeature]); // Aadir la capa vectorial al mapa map.addLayer(vectorLayer);
El cdigo completo del ejemplo, desarrollado con el mapa de OpenStreetMap y la localizacin del State of the Map 2010, Sotm10, lo puedes ver en el siguiente enlace.
TestPointStyle
En un prximo artculo trataremos la forma de sustituir los grficos predefinidos (estrella, trigulo, crculo,...) por un grfico cualquiera, as como la forma de dar estilo a otras geometras.
Etiquetas en OpenLayers
Para mostrar etiquetas en mapas creados con OpenLayers podemos utilizar la clase OpenLayers.Feature.Vector. El constructor de Feature.Vector nos pide dos parmetros: una geometra y un estilo:
var feat = new OpenLayers.Feature.Vector( geometry, null, style);
(El segundo parmetro es un objeto con atributos opcionales para incorporar a la feature. En nuestro caso no lo vamos a utilizar) Para la geometra utilizaremos una instancia de la clase OpenLayers.Geometry.Point. Al constructor deberemos pasarle las coordenadas x,y del punto donde queramos situar la etiqueta:
var point = new OpenLayers.Geometry.Point(x,y);
Si las coordenadas provienen de objetos LonLat habr que crearla de la siguiente manera:
var lonlat = new OpenLayers.LonLat( -3.74, 42.37); var point = new OpenLayers.Geometry.Point(lonlat.lon,lonlat.lat);
Las features vectoriales tienen una propiedad denominada 'style' que es un objeto con las propiedades de visualizacin. Segn la geometra que tenga la feature las propiedades se referirn a las caractersticas del grueso de linea, del radio del punto o, en nuestro caso, el estilo del texto. Las propiedades de estilo que puede tener una feature vectorial se detallan en la documentacion de los symbolizer. La forma prctica de obtener un objeto estilo es utilizar el mtodo 'extend' con un estilo por defecto y modificar el valor de las propiedades que queramos personalizar.
var pstyle = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default'] ); pstyle.graphic = false; pstyle.label = "Hola Mundo"; pstyle.fontColor = "#000000"; pstyle.fontOpacity = 1; pstyle.fontFamily="Arial"; pstyle.fontSize = "23"; pstyle.fontWeight = "bold";
La propiedad 'graphic' es un Boolean que indica si queremos representar el 'simbolizer' del punto. Poniendo el valor en 'false' slo se visualizar la etiqueta. Si lo activamos con 'true' se vern la etiqueta y el punto(por defecto un circulo). En este caso disponemos de las propiedades 'labelXOffset' y 'labelYOffset' para situar el texto de la etiqueta respecto del smbolo del punto. Una vez creada la feature vectorial a partir de la geometra y el estilo habr que aadirsela a una capa vectorial que habremos creado previamente:
var layerVector = new OpenLayers.Layer.Vector("Vectorial"); var feat = new OpenLayers.Feature.Vector( point, null, labelst); layerVector.addFeatures([feat]);
Hemos preparado un pequeo ejemplo en el que se utiliza un mapa cuya nica capa es la capa vectorial que contiene la etiqueta. Esto se consigue pasando al mapa la propiedad 'allOverlays' con el valor 'true' y fijando una extensin para el mapa. Ejemplo de Etiqueta en OpenLayers
Problemas en accesos locales

OpenLayers es una librera escrita en Javascript y tiene todas sus ventajas y sus limitaciones. Por seguridad no se permite que los scripts accedan a los ficheros del ordenador cliente, el que est ejecutando el navegador. Si que se permite acceder a ficheros en otros servidores. Cuando realizamos una pgina html que accede a OpenLayers y muestra un mapa, siempre que los ficheros solicitados sean externos al ordenador cliente podremos ejecutarla directamente en el navegador y se vern los mapas solicitados. El problema viene cuando queremos utilizar ficheros de datos como pueden ser capas GML, capas de marcadores, etc. Si ejecutamos el html directamente en el navegador no podr acceder a los ficheros de datos. Para acceder a ficheros de datos debemos ejecutar nuestra pgina html a travs de un servidor o bien que los ficheros de datos estn en un servidor. El esquema sera el siguiente:
En este esquema podemos utilizar el 'localhost' como servidor, pero en el navegador debemos ejecutar la pgina a travs de l, esto es, con "http://localhost...".
Aadir puntos dinmicamente

Vamos a comentar en este artculo un ejemplo sobre como aadir puntos a una capa vectorial a medida que se pulsa sobre el mapa. Para ello utilizaremos el control OpenLayers.Control.DrawFeature . El constructor de la clase tiene la siguiente expresin:
OpenLayers.Control.DrawFeature ( layer, handler, options );
El primer parmetro es una instancia de una capa vectorial donde se irn guardando los puntos que vamos aadiendo. El segundo parmetro es un manejador del control, en este caso utilizaremos OpenLayers.Handler.Point. El tercer parmetro es opcional y permite incorporar opciones adicionales al control en el momento de su creacin. En el ejemplo que acompaa el artculo, primero creamos una capa vectorial para alojar los puntos:
vectorLayer = new OpenLayers.Layer.Vector("Points");
Luego llamamos al constructor de OpenLayers.Control.DrawFeature para crear el control, al que le pasamos referencia de la capa vectorial, vectorLayer, y del manejador OpenLayers.Handler.Point. (Nosotros no utilizamos el tercer parmetro 'options'):
drawPoint=new OpenLayers.Control.DrawFeature ( vectorLayer, OpenLayers.Handler.Point); drawPoint.featureAdded = featAdded; map.addControl(drawPoint);
El control OpenLayers.Control.DrawFeature tiene un atributo 'featureAdded' que se puede definir apuntando a un mtodo que ser llamado cada vez que se aada una feature, (un punto). En nuestro caso hemos definido una funcin que muestra en pantalla las coordenadas del ltimo punto aadido. Para activar el control, debemos llamar al mtodo 'activate de la clase OpenLayers.Control. Esto provoca que cada vez que pulsemos en pantalla, se aada un punto a la capa vectorial 'vectorLayer". En el ejemplo hemos habilitado unos botones para activar-desactivar la funcionalidad del control. El ejemplo completo lo puedes ver en : DynamicPoints El cdigo fuente lo puedes examinar en : Cdigo fuente de DynamicPoints
Girar y mover features

Una feature consta de una geometria y un estilo. La geometra ser una clase derivada de OpenLayers.Geometry. Estas clases tienen dos metodos 'move' y 'rotate' que permiten ajustar dinmicamente la posicin de las features sobre el mapa. Las features tienen que haber sido creadas y aadidas a la capa vectorial previamente. Una vez llamadas las funciones 'move' y/o 'rotate' hay que llamar al mtodo 'drawFeature()' de la capa para que se redibuje. Al mtodo 'rotate' hay que pasarle dos argumentos : un ngulo de rotacin en grados (antihorario positivo) y un objeto OpenLayers.Geometry.Point que har de centro de la rotacin.
rotate: function( angle: Float, center: OpenLayers.Geometry.Point)
El mtodo 'move' acepta como parametros el valor de los desplazamientos deseados en la direccin x e y:
move: function( x: Float, y: Float)
El ejemplo de la documentacin de OpenLayers ha servido para documentar el artculo y aplica los mtodos aqu expuestos a geometras Point, LineString y LinearRing.
El mtodo rotate no gira la feature sobre si misma, sino que realiza un giro de la feature respecto del centro de giro indicado. Si el centro de giro coincide con el centro de la feature, la feature no rota sobre si misma. Esto sucede cuando se utiliza una imagen en el estilo de una feature con geometra Point y se quiere girar sobre si misma, esto es, con centro de rotacin en el centro de la feature, para orientar el icono en una determinada direccin. En este caso para girar la imagen habr que actuar sobre la propiedad 'style.rotation' de la feature, asignndole el ngulo deseado.
Jerarquias de clases con OpenLayers

Programando en Javascript es posible adoptar un enfoque orientado a objetos. De esta forma, mediante el mecanismo de ir extendiendo las clases segn una jerarqua determinada, vamos obteniendo objetos adaptados a nuestras necesidades partculares que reducirn el tiempo de los desarrollos futuros. OpenLayers es una librera Javascript que utiliza esta aproximacin, mediante una jerarqua d de clases que dan servicio a las diferentes funcionalidades para las que se ha pensado el programa. Podemos utilizar la arquitectura de clases de OpenLayers para crearnos una librera de clases propia que tenga objetos tales como ' 'miMapa', que incluye ya los controles y capas que suelo s utilizar, o 'miFeature' que incorpora determinadas features utilizadas por mi programa con sus ' propias caractersticas de visualizacin, por ejemplo. Vamos a explicar en este artculo como crear una jerarqua propia de clases basada en la arquitectura proporcionada por OpenLayers. Para ello utilizaremos primero una jerarquia simple de objetos comunes como la indicada en el siguiente esquema:
En ella definimos las clases 'Punto y 'P3d'. La clase Punto tiene como atributos las coordenadas Punto' la x e y correspondientes a la representacin de un punto en dos dimensiones. De ella deriva la clase 'P3d' que aade una tercera coordenada z. La clase 'P3d' hereda las propiedades y ' ' mtodos de la clase 'Punto', algunos de los cuales los sobreescribe. Para implementar este ', sobreescribe. esquema en nuestro programa Javascript+OpenLayers utilizaremos dos archivos:

Libreria js : La hemos llamado ' 'clases1.js' y contiene las definiciones correspondientes ' a nuestra coleccin de clases. Fichero html : Lo hemos llama 'clases1.html' y deber incluir el link a la librera de llamado ' OpenLayers y a nuestra librera de clases ' 'clases1.js'. Adems, el fichero 'clases1.html', '. ' incorpora un pequeo script donde probamos la librera.
Vamos a analizar en primer lugar la librera ' 'clases1.js'. Es conveniente en primer lugar definir '. nuestro propio espacio de nombres, de forma que todas nuestras clases queden 'aisladas' del resto de libreras que utilize el programa. Hemos elegido llamar ' 'MisGeos' a nuestro espacio de ' nombres. Para definirlo se utiliza la siguiente construccin: irlo
MisGeos = {};
A continuacin definimos la clase ' 'MisGeos.Punto'. Para ello utilizaremos el objeto-funcin '. objeto 'OpenLayers.Class' definido en la librera OpenLayers. Esta es la funcin encargada de crear ' nuevas clases y de gestionar el mecanismo de herencia. Para crear una nueva clase es necesario pasarle dos paramtros: La clase de la cual deriva nuestra nueva clase y, como
segundo parmetro, un array asociativo con la definicin de las nuevas propiedades y mtodos que incorpora el nuevo objeto:
nuevaClase = OpenLayers.Class(ClasePadre, ArrayNuevasDefiniciones);
El array del segundo parmetro tendr la siguiente estructura:

ArrayNuevasDefiniciones= { prop1: valor1, prop2: valor2, metodo1: function() {...}, metodo2: function(..) {....} };
Vemos que cada elemento del Array es una definicin de una propiedad o mtodo y consta del nombre, los 'dos puntos' y la definicin correspondiente. Lo veremos ms claramente con el caso concreto de nuestra clase MisGeos.Punto:
MisGeos.Punto = OpenLayers.Class(MisGeos, { initialize: function(xx, yy) { this.x = xx; this.y = yy; }, x : null, y : null, toString : function() { return "("+this.x+","+this.y+")"; } });
Vemos que el constructor de la clase es una funcin especial que se debe de llamar 'initialize'. Tambin hay que destacar cmo definimos las propiedades 'x' e 'y', a las que inicialmente asignamos un valor nulo, y cmo se procede a la asignacin de sus valores. El constructor 'initialize' recibe dos nmeros 'xx' e 'yy' como parmetros y los asigna a las propiedades del objeto utilizando el 'this'. Este detalle es importante. Si no utilizamos 'this', los valores seran asignados a ciertas variables 'x' e 'y' locales del propio mtodo 'initialize'. El mtodo 'toString()' muestra el contenido de las propiedades 'x' e 'y' de la instancia, encerrados entre parntesis y separados por una coma. Para crear una instancia de objeto de la clase MisGeos.Punto habr que hacerlo de la siguiente manera:
var p1 = new MisGeos.Punto(-3.0,42.3);
Una vez creada la clase MisGeos.Punto, vamos a crear una clase 'MisGeos.P3d' que derive de la anterior y aada una tercera coordenada. La forma de hacerlo es la siguiente:
MisGeos.P3d = OpenLayers.Class(MisGeos.Punto, { initialize : function(xx, yy, zz) { MisGeos.Punto.prototype.initialize.apply(this, [xx, yy]); this.z = zz; }, z : null, toString : function() { return "("+this.x+", "+this.y+", "+this.z+")"; } });
Aqu es importante darse cuenta de la manera de llamar al constructor de la clase base, MisGeos.Punto, desde el constructor de la clase 'MisGeos.P3d':
clasebase.prototype.initialize.apply ( this, [parametros pasados al constructor]);
Adems podemos ver que se sobreescribe el mtodo 'toString()' de la clase base para adaptarlo a la nueva clase. Con esto queda creada la librera con nuestros dos tipos de objetos 'Punto' y 'P3d'. Para probar la librera utilizaremos un sencillo script, que se ha aadido en la pgina html, y que tiene la siguiente forma:
P1 = new MisGeos.Punto(-3.09, 45.78); document.write ( "Punto P1: " + P1.toString()); P2 = new MisGeos.P3d(10,20,30); document.write ("P3d P2: " + P2.toString());
El cdigo completo de los dos ficheros lo puedes ver en:

clases1.html clases1.js
En un prximo artculo aplicaremos esta metodologa a la creacin de clases de mapas y features personalizados.
Libreras personalizadas
Uno de los inconvenientes de OpenLayers es que hay que cargar la librera en memoria antes de utilizar los mapas en las pginas web. En muchas de las aplicaciones no utilizamos sino una pequea parte de las clases y funciones de OpenLayers, por lo que la carga de toda la librera en memoria no sera necesaria. Con este fin nace 'OpenLayerer', un portal que nos permite elegir las funciones que queremos incluir en la librera, de forma que obtengamos una versin reducida adaptada a nuestras necesidades. La librera est desarrollada por Developmentseed. De los mismos autores podemos acceder en Github a la versin openlayers-slim que incorpora las funciones ms frecuentes y tambin tiene un tamao ms reducido que la librera completa.
OpenLayers en Wordpress
La nueva versin 3.0.1 de Wordpress permite incorporar mapas creados con OpenLayers de una forma ordenada y cmoda. Para ello debemos seguir tres pasos:

Incorporar la librera openlayers.js Incorporar nuestra librera miLibreria.js Incorporar la orden de ejecucin del script
Wordpress ofrece la posibilidad de incorporar cdigo en la cabecera, <head>, del documento html resultante. Esto se hace desde el panel de administracin del blog, en la pestaa 'advanced options' del submen de configuracin de nuestro Theme dentro del men 'Appearance' o 'Apariencia'. En esta pgina nos permite incorporar cdigo en el <head> del mismo modo que lo haramos en una pgina normal. Lo que pongamos ah saldr luego en el documento html definitivo en la cabecera del documento. Es el lugar adecuado para hacer el link a archivos con cdigo Javascript o a hojas de estilo CSS. Tambien podemos incorporar directamente sentencias de estilo para nuestras clases entre un par de etiquetas <style>... </style> Por ejemplo incorporamos en esta seccin dos lneas similares a las siguientes:
<script src="http://www.openlayers.org/api/OpenLayers.js"></script> <script src="http://midominio/miLibrera.js"></script>
Con estas sentencias en la cabecera cada vez que se cargue la pgina del blog se cargarn en memoria la librera OpenLayers y una librera de funciones javascript de nuestra eleccin donde tendremos desarrolladas las funciones que dibujan el mapa o realizan otro tipo de operaciones. Para utilizar las funciones en los posts tendremos que hacer la llamada dentro de un script. As, un fragmento de nuestro post en html podra ser:
<div id="map" style="width:480px; height:300px;"></div> ............ <script type="text/javascript"> miFuncionDibujaMapa(); </script>
La ejecucin la pondremos al final del post
En la funcin javascript que dibuja el mapa referenciaremos el div por su 'id', en la forma habitual;
var map; function miFuncionDibujaMapa() { map = new OpenLayers.Map("map"); ....... }
Espero que no haya quedado lioso. Al final funciona. Este blog, a la fecha de la publicacin de este post, utiliza una versin anterior de Wordpress. En los artculos en los que hemos aadido mapas (por ejemplo Dinamic Map Markers) lo hacemos incorporando directamente en el post los links a las hojas de estilo y de funciones que necesitamos. La ventaja de hacerlo de forma centralizada es evidente pudiendo recurrir a libreras de funciones javascript personalizadas, variables globales, etc.
Forms que ejecutan javascript

En ocasiones queremos leer datos del usuario en una pgina web y pasrselos a una rutina javascript como parmetros. Lo podemos hacer mediante un elemento <form> si tomamos algunas precauciones. Realizaremos un ejemplo en el que se le presenta al usuario un campo de texto para que teclee su nombre y un botn para validar. Una vez pulsado el botn se muestra el nombre tecleado en un elemento <div>. Definimos un elemento 'form' que contendr un campo tipo 'text' y un campo tipo 'button'. El 'text' tendr definido un 'id' para poderlo identificar. El valor tecleado en el campo se puede recoger en el atributo 'value'. Para llamar a la rutina javascript necesitamos un campo tipo 'button' cuyo evento 'onclick' se define apuntando a la rutina que queremos ejecutar. Pasamos como parmetro el propio objeto 'form', de manera que la rutina pueda extraer los valores que le interesen. En nuestro caso hemos extraido el atributo 'value' del elemento 'textBox' que pertenece al 'form'. Este es el cdigo completo de la pgina:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavascriptForms</title> <script type="text/javascript"> function validaNombre(sform) { var nom = sform.textBox.value; document.getElementById("nombre").innerHTML= "Nombre: " + nom; } </script> </head> <body> <form> <input type="text" id="textBox" size="40" value="Teclee su nombre"/> <input type="button" value="Validar" onclick="javascript:validaNombre(this.form)"/> </form> <div id="nombre">Nombre:</div> </body> </html>
Los detalles a destacar son:
El elemento tipo 'text' lleva un 'id' definido (en este caso id='textBox') El elemento que llama a javascript es un elemento tipo 'button' a traves del evento 'onclick' El 'form se pasa como parmetro mediante la construccin 'this.form' El atributo 'value' de 'textBox' se extrae mediante 'sform.textBox.value'
Otra forma de resolverlo sera sin pasar el 'form' como argumento, y recuperando el elemento 'textBox directamente por su 'id':
<script type="text/javascript"> function validaNombre() { var nom = document.getElementById("textBox").value; document.getElementById("nombre").innerHTML= "Nombre: " + nom; } </script>
Las dos formas funcionan. La primera sera la forma antigua de hacerlo, mientras que esta segunda forma es la forma ms actual de hacerlo.
Acceso a Google Maps
Como ya anticipbamos en nuestro artculo de Julio, la nueva versin de OpenLayers, la versin 2.10, ya est activada. Estas son algunas de las novedades:

Soporte para Google Maps API V3 Mejoras en el soporte de las WMS y WFS Mejoras en la funcionalidad del control OpenLayers.Control.Panel
En este artculo vamos a explicar la utilizacin de las nuevas capas Google V3. Hace unos meses Google lanz la nueva versin de su API para Google Maps, la versin 3: Google Maps API V3. Incorpora numerosas novedades en relacin con la versin anterior. Una de las novedades es que no es necesario disponer de un cdigo personal proporcionado por Google para acceder a los mapas. En la nueva OpenLayers 2.10 disponemos de un tipo de capa, OpenLayers.Layer.Google, que permite el acceso a las cuatro capas de Google :

google.maps.MapTypeId.ROADMAP google.maps.MapTypeId.SATELLITE google.maps.MapTypeId.HYBRID google.maps.MapTypeId.TERRAIN
La forma de crear las capas es sencilla:

var gphy = new OpenLayers.Layer.Google( "Google Physical", {type: google.maps.MapTypeId.TERRAIN} ); var gmap = new OpenLayers.Layer.Google( "Google Streets", // the default {numZoomLevels: 20} ); var ghyb = new OpenLayers.Layer.Google( "Google Hybrid", {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20} ); var gsat = new OpenLayers.Layer.Google( "Google Satellite", {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22} );
El sistema de referencia de las nuevas capas es el Spherical Mercator, por lo que habr que transformar las coordenadas desde WGS84.
map.setCenter(new OpenLayers.LonLat(3.028, 39.609).transform( new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject(), 9 );
Hemos creado un pequeo ejemplo en el que se superpone una capa de OSM sobre las capas de Google. El ejemplo completo lo puedes ver en: OLV10GoogleAccess.html
OpenStreetMap
El concepto de 'Open Street Map' es como el de la Wikipedia pero aplicado al Mapa Mundi. La gente recopila informacin desde dispositivos GPS o desde imgenes satlite, la sube al portal, le aade etiquetas de nombres, topnimos, etc y la publica. El resultado es un Mapa Mundi que se pue ver en 'http://www.openstreetmap.org puede http://www.openstreetmap.org/'.
OpenStreetMap es un producto Open Data, bajo una licencia Creative Commons, que Commons permite utilizar el software o los datos, modificarlos, etc con la condicin de mencionar el origen y en su caso de distribuir el producto bajo una licencia Open Data. bajo Cartografiar supone la mayor carga de trabajo en Open Street Map y tiene dos etapas. Primero, y la ms divertida, es salir y capturar datos geogrficos. Hay muchas maneras de hacerlo como son andando, en bicicleta o conduciendo. Cuando tengas algunos resultados, necesitars agregarlos a la base de datos comn de OSM utilizando uno de los editores. Esto es, cuando consigas agregar rutas, nombres de vas, buzones de correo . o cualquier otra informacin que te gustara incluir!.
Cuando los hagas, puedes sentarte, relajarte y ver los resultados de tu trabajo. O bien salir fuera y hacer un mapa mayor y ms completo!
Tambin se puede intervenir en el proyecto colaborando en el desarrollo. Hay mucho trabajo todava de desarrollo para hacer OpenStreetMap. Existen diferentes tipos de reas de trabajo, y una variedad de idiomas y las tecnologas involucrados. Tambin existe una seccin espaola : http://www.openstreetmap.es/. A da de escribir este artculo hay inscritos 250.000 'mapeadores'. Cada da se aaden 25.000 nuevos de carreteras y caminos con un total de casi 34.000.000 km de viales, eso sin aadir otros tipos de datos (puntos de inters, edificaciones, etc.). El tamao de la base de datos (llamada planet.osm) se sita por encima de los 160 gigabytes (6,1 GB con compresin bzip2), incrementndose diariamente en unos 10 megabytes de datos comprimidos.
Mini manual
Portal OpenStreetMap : Acceder al portal de OpenStreetMap (OSM), visualizar el mapa, acceder al WIKI, blog, etc. http://www.openstreetmap.org Seccin espaola de OpenStreetMap : Acceder al portal dela seccin espaola de OpenStreetMap (OSM), visualizar el mapa, acceder al WIKI, blog, etc. http://www.openstreetmap.es Ver un mapa : Si conocemos las coordenadas Longitud y Latitud del centro del mapa, y aadimos un nivel de zoom entre 0 y 18 podemos crear un enlace al mapa personalizado. http://www.openstreetmap.org?lon=-3.83&lat=43.47&zoom=13 Distintos Renders : Si aadimos un parametro 'layers' podemos seleccionar entre Mapnik (M), Osmarender (O) y CycleMap (C). http://www.openstreetmap.org?lon=-3.83&lat=43.47&zoom=13&layers=C Marcadores : Aadiendo una pareja de parmetros 'mlon' y 'mlat' podemos aadir un marcador en las coordenadas deseadas. http://www.openstreetmap.org?mlon=-3.83&mlat=43.47&zoom=13&layers=O OpenSeaMap : Tambin se est trabajando en cartas naticas. http://www.openseamap.org OpenTouchMap : Esta versin funciona en las pantallas tctiles de los mviles. http://www.opentouchmap.org?lon=-3.76&lat=40.385&zoom=15
Aadir mapas a una pgina web

En este artculo vamos a explicar como aadir una imagen de un mapa de OpenStreetMap a una pgina HTML. Explicaremos como aadir una imagen esttica y, en prximos artculos, explicaremos como aadirle capacidades de zoom, encuadre, marcadores, etc. Los datos que necesitamos son la Latitud y Longitud del punto central del mapa que queremos visualizar. Para obtenerlas podemos navegar por el mapa OSM y en la esquina inferior derecha podemos leer las coordenadas longitud, latitud del punto deseado. Una vez obtenidas la Latitud y Longitud lo nico que hay que hacer es aadir un elemento <img> al cdigo HTML de la pgina con el atributo 'src' apuntando a la direccin del mapa, como se ve a continuacin:
<img src="http://ojw.dev.openstreetmap.org/StaticMap/? lat=40.416&lon=-3.686&z=11& w=480&h=300&mode=Export&show=1" width="480" height="300" alt="OpenStreetMap" />
Vemos que se trata de un elemento imagen normal con los atributos 'src', 'width', 'height' y 'alt' definidos. Veamos un poco en detalle los parmetros pasados en el atributo 'src' del elemento <img>:
http://ojw.dev.openstreetmap.org/StaticMap/? : Es la URL del sitio Web de donde descargaremos el mapa. (La '?' separa la URL de los parmetros que vienen a continuacin). lat=40.416&lon=-3.686 : Latitud y Longitud del punto central del mapa expresadas en grados sexagesimales. (El smbolo '&' separa cada parmetro del siguiente). z=11 : Es el nivel de zoom. Puede variar de 0 a 18. (OSM: Niveles de zoom) w=480&h=300: Son la anchura y la altura en pixels de la imagen solicitada. mode=Export&show=1: Parmetros necesarios para la peticin. El parmetro show=1 indica que queremos ver la imagen del mapa.
En la imagen que viene a continuacin se puede ver el resultado de la peticin realizada:
Para una explicacin mas detallada de los parmetros de la peticin, as como para fabricarte el mapa a medida y solo tener que copiar y pegar el enlace puedes utilizar la siguiente direccin: Create a Map. En un prximo artculo explicaremos como aadir
capacidades dinmicas al mapa, de forma que podamos hacer zoom en cualquier parte o aadir marcadores.
Acceder desde OpenLayers

En este artculo trataremos la cuestin del acceso a los mapas de OpenStreetMap (OSM) utilizando la plataforma OpenLayers. OpenLayers ofrece una clase Layer especializada para el acceso a OSM: la clase OpenLayers.Layer.OSM. Si nos hemos descargado los cdigos fuente de la librera, podremos encontrar el cdigo de la clase OpenLayers.Layer.OSM en el archivo '/lib/OpenLayers/Layer/XYZ.js'. Reproducimos a continuacin el cdigo:
* Class: OpenLayers.Layer.OSM * A class to access OpenStreetMap tiles. By default, uses the OpenStreetMap * hosted tile.openstreetmap.org 'Mapnik' tileset. If you wish to use * tiles@home / osmarender layer instead, you can pass a layer like: * * new OpenLayers.Layer.OSM("t@h", * "http://tah.openstreetmap.org/Tiles/tile/${z}/${x}/${y}.png"); * * This layer defaults to Spherical Mercator. */ OpenLayers.Layer.OSM = OpenLayers.Class(OpenLayers.Layer.XYZ, { name: "OpenStreetMap", attribution: "Data CC-By-SA by <a href='http://openstreetmap.org/'>OpenStreetMap</a>", sphericalMercator: true, url: 'http://tile.openstreetmap.org/${z}/${x}/${y}.png', CLASS_NAME: "OpenLayers.Layer.OSM" });
El sistema de referencia de la capa OSM es el Spherical Mercator, que corresponde al cdigo "EPSG:900913", por lo que si partimos de puntos conocidos en otro sistema de referencia habr que hacer la transformacin correspondiente. Esto se puede hacer mediante el mtodo transform() de la clase OpenLayers.LonLat. En el ejemplo que acompaa este artculo queremos centrar el mapa en un punto de coordenadas lon=3.69357, lat=40.41062 expresadas en el sistema de referencia WGS84, que le corresponde el cdigo "EPSG:4326". Podemos hacer la transformacin de la siguiente manera:
var projWGS84 = new OpenLayers.Projection("EPSG:4326"); var projSphericalMercator = new OpenLayers.Projection("EPSG:900913"); var centerWGS84=new OpenLayers.LonLat(-3.69357,40.41062); // transform from WGS 1984 to Spherical Mercator Projection; var centerOSM =centerWGS84.transform(projWGS84, projSphericalMercator);
Donde hemos definido dos objetos OpenLayers.Projection, un punto de coordenadas conocidas en el Datum WGS84 y un punto de coordenadas en el sistema Spherical Mercator que se obtiene al aplicar el mtodo transform de la clase LonLat. Con sto resuelto, el resto de la funcin para construir el mapa es sencillo. Reproducimos a continuacin el listado de una sencilla pgina web para mostrar un mapa OSM:
<?xml version="1.0" encoding="ISO-8859-1" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Test OpenStreetMap</title>
<style type="text/css"> h3 { font: 100% 'Lucida Grande', Verdana, Arial, sans-serif; font-size: 110%; color: #003a6b; background-color: transparent; margin: 0; padding-top: 0.5em; margin-bottom: 0.5em; border-bottom: 1px solid #fcb100; } .cabecera { position: absolute; top: 10px; left: 10px; background: #00a000; color:f0f0f0; margin: 10px; padding: 10px; } .map { position: absolute; left: 10px; top: 100px; width: 640px; height: 400px; border: solid 2px #a0a0a0; background-color:#ffffff; color: white; padding: 3px 3px 3px 3px; } </style> <script src="http://www.openlayers.org/api/OpenLayers.js"></script> <script type="text/javascript"> var map, osmLayer, centerWGS84, centerOSM; var projWGS84, projSphericalMercator function init() { projWGS84 = new OpenLayers.Projection("EPSG:4326"); projSphericalMercator = new OpenLayers.Projection("EPSG:900913"); centerWGS84 = new OpenLayers.LonLat(-3.69357,40.41062); // transform from WGS 1984 to Spherical Mercator Projection; centerOSM = centerWGS84.transform(projWGS84, projSphericalMercator); map = new OpenLayers.Map("mapa"); osmLayer = new OpenLayers.Layer.OSM(); map.addLayer(osmLayer); map.setCenter(centerOSM, 5); } </script> </head> <body onload="init()"> <div class="cabecera" > <h3>Prueba de acceso a OpenStreetMap</h3> </div>
<div class="map" id="mapa" ></div> </body> </html>
La capa OpenLayers.Layer.OSM por defecto accede al juego de imgenes 'Mapnik'. Si queremos acceder a las imgenes de OsmaRender debemos hacer la siguiente llamada al constructor de la capa:
osmLayer = new OpenLayers.Layer.OSM("t@h", "http://tah.openstreetmap.org/Tiles/tile/${z}/${x}/${y}.png");
El resultado de ambos tipos de mapa puede verse en los siguientes enlaces: Mapa OSM Osmarender Mapa OSM Mapnik
Colocar el 'attribution'
OpenStreetMap es un producto libre, una gran herramienta para todos. Por ese mismo motivo debemos ser respetuosos y cada vez que utilicemos los mapas de OSM debemos colocar el 'attribution' en un lugar visible del mapa. OpenLayers En OpenLayers la clase OpenLayers.Layer tiene una propiedad llamada 'attribution' que es un String que se muestra en pantalla cuando el mapa dispone del control OpenLayers.Control.Attribution. El constructor de 'OpenLayers.Map' aade un control 'Attribution' por defecto si no se especifica lista de controles en el constructor. Si al crear el mapa aadimos nuestra propia lista de controles debemos cuidar el detalle de aadir el control OpenLayers.Control.Attribution El control 'Attribution' dispone entre otras de las siguientes propiedades y mtodos que pueden ser de utilidad:
draw() : Inicializa y dibuja el 'attribution'. Devuelve una referencia al elemento 'div' que contiene el control. El valor de retorno podramos utilizarlo para ajustar propiedades de estilo, posicin, etc. updateAttribution() : Actualiza el 'attribution' en pantalla. (El valor de la cadena attribution esta en OpenLayers.Layer.attribution).
En OpenLayers las definiciones de estilo por defecto de controles y otros elementos se declaran y definen en la hoja de estilo http://www.openlayers.org/api/theme/default/style.css. Podemos aadir un enlace a dicha hoja de estilo en nuestro cdigo:
Si echamos un vistazo al fichero vemos que se definen propiedades de estilo para todo tipo de elementos que son faciles de identificar por su nombre de clase. El nombre de la clase que controla el aspecto del control 'Attribution' es 'olControlAttribution'. Por defecto se define de la siguiente manera:
.olControlAttribution { font-size: smaller; right: 3px; bottom: 4.5em; position: absolute; display: block; }
Podemos redefinir los valores a conveniencia, siempre respetando la regla de oro: Colocar el attribution en un lugar visible del mapa. Google Maps El API V3 de Google Maps proporciona la posibilidad de mostrar mapas procedentes de otras fuentes que no sean el mismo Google. En otro artculo hemos publicado como mostrar los mapas de OpenStreetMap a travs del API de Google. En el API V3 de Google Maps no hemos encontrado referencia a ningn elemento especialmente designado para mostrar el attribution de las capas que no sean de Google. Adems cuando se muestra un mapa que no es de Google, el attribution de Google sigue apareciendo en la parte inferior de la pgina esquinas izquierda y derecha. Si vamos a utilizar un mapa con una nica capa de OpenStreetMap podemos aadir un elemento 'div' en el lugar elegido y asignarle como contenido html la cadena con el 'attribution'.
Un ejemplo podra ser de la siguiente forma. En la pgina html definimos un elemento 'div' para alojar el attribution:
<div id="osmattribution"></div>
En la hoja de estilo del programa damos valores a la posicin y aspecto del elemento:
#osmattribution { position: absolute; bottom: 8px; left: 224px; color: #2f4f4f; font-size: 0.8em; }
Y finalmente en la rutina javascript que dibuje el mapa podemos aadir algo parecido a esto:
document.getElementById("osmattribution").innerHTML= "Mapdata <a href=\"http://www.openstreetmap.org/\">OpenStreetMap</a>"+ " and contributors ("+ "<a href=\"http://creativecommons.org/licenses/bysa/2.0/\">CC-bySA</a>)";
En el caso de que el mapa sea mas complejo y utilice distintas capas, algunas de las cuales son de OpenStreetMap y otras no, podemos interceptar alguno de los eventos del mapa y aadir o no el attribution correcto. En este ejemplo se utiliza el evento 'maptypeid_changed'. Asignamos un controlador al evento mediante:
google.maps.event.addListener(map, 'maptypeid_changed', setAttribution_handler);
El primer parmetro es una referencia al objeto google.maps.Map; el segundo parmetro es el nombre del evento que queremos interceptar; el tercer parmetro es el nombre de la rutina que va a controlar el evento, en el caso del ejemplo 'setAttribution_handler'. El cdigo del controlador puede ser algo parecido a esto:
function setAttribution_handler() { if(map.getMapTypeId() == 'OSMARENDER' || map.getMapTypeId() == 'MAPNIK' || map.getMapTypeId() == 'CYCLEMAP' ) { // Si el mapa es OSM rellenamos el elemento div attribution document.getElementById("osmattribution").innerHTML=" ... "; } else { // Si el mapa no es OSM vaciamos el elemento div attribution document.getElementById("osmattribution").innerHTML=""; } }
El cdigo completo del ejemplo lo puedes ver en el siguiente enlace: fuente OSMAccessGoogle
Acceder a los distintos mapas

El acceso a OpenStreetMap est documentado en OpenLayers para hacerlo a travs de la clase OpenLayers.Layer.OSM. Podemos acceder a las capas Mapnik y Osmarender cambiando la url de conexin de la siguiente forma:
// La capa Mapnik es la que carga por defecto. // La url es: http://tile.openstreetmap.org/${z}/${x}/${y}.png var layerMapnik = new OpenLayers.Layer.OSM("Mapnik"); // Para cargar Osmarender hay que especificar la url var layerOsmarender = new OpenLayers.Layer.OSM( "Osmarender", "http://tah.openstreetmap.org/Tiles/tile/${z}/${x}/${y}.png" );
Es posible acceder de una forma ms sencilla a las capas Mapnik y Osmarender y adems acceder a CycleMap. Para ello debemos incluir en la cabecera del documento un enlace al siguiente script:
<script src="http://openstreetmap.org/openlayers/OpenStreetMap.js"></sc ript>
Este script nos aade las clases OpenLayers.Layer.OSM.Mapnik, OpenLayers.Layer.OSM.Osmarender y OpenLayers.Layer.OSM.CycleMap. Su utilizacin es sencilla. A continuacin reproducimos el cdigo de una pagina html sencilla que da la posibilidad de elegir entre las distintas capas de OpenStreetMap:
<!DOCTYPE html> <html> <head> <title>OSM Layers</title>  <style type="text/css"> #mapOSMLayers { width: 100%; height: 600px; padding: 0; margin: 0; } </style> <!-Cargar la librera OpenLayers --> <script src="http://openlayers.org/api/OpenLayers.js"></script>  <script src="http://openstreetmap.org/openlayers/OpenStreetMap.js"></sc ript>  <script type="text/javascript"> var map; function init() { map = new OpenLayers.Map("mapOSMLayers"); map.addControl( new OpenLayers.Control.LayerSwitcher); var layMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik"); map.addLayer(layMapnik); var layOsmarender = new OpenLayers.Layer.OSM.Osmarender("Osmarender"); map.addLayer(layOsmarender); var layCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap"); map.addLayer(layCycleMap); var center = new OpenLayers.LonLat(-0.11609, 51.5043); var centerOSM = center.transform( new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913") ); map.setCenter(centerOSM, 10); map.setBaseLayer(layCycleMap); } </script> </head> <body onload="init()"> <div id="mapOSMLayers"></div> </body> </html>
Tambin puedes consultar el ejemplo en el siguiente enlace: testOSMLayers.html
OpenSeaMap
Dentro del universo de OpenStreetMap (OSM) se ha creado un nuevo apartado : OpenSeaMap. Se trata de un mapa mundi con el mismo concepto que OSM, esto es, creado dinmicamente por la comunidad de usuarios, pero dedicado a las cartas naticas costeras.
As como en cartografa general la marea 'Open' ha llegado ya y vamos viendo como todos los organismos implicados van abriendo sus fondos cartogrficos, en el tema de la natica la cosa est en mantillas. En Espaa el organismo encargado de la produccin cartogrfica natica es el Instituto Hidrogrfico de la Marina, organismo dependiente de Ministerio de Defensa, con sede en Cdiz. Hay que destacar que, cuando uno navega, es obligatorio llevar en el barco las cartas naticas de la zona por donde va a navegar. Dichas cartas cuestan caras (30 euros/ud) y cualquier pequea travesa obliga a llevar unas cuantas cartas encima. Al igual que el resto de la cartografa, la cartografa natica ha sido producida en base a fondos pblicos que hemos aportado entre todos, por lo est totalmente justificado el que se puedan 'abrir' sus contenidos, o al menos, algunos de sus contenidos. Como en otros campos, la apertura propicia la 'socializacin' de los datos as como un impulso importante al desarrollo de ideas por parte de la comunidad. Otros paises ya han hecho cosas. En Francia se ha abierto recientemente un portal para facilitar el acceso a sus fondos cartogrficos marinos: Sextant. En EEUU est desde hace tiempo OceanGraphix, de la NOAA, donde se pueden consultar sus fondos de cartas naticas. En Espaa queda todo por hacer.
Santiago Higuera

Higuera - Manual Open Layers

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Higuera - Manual Open Layers

Uploaded by

Copyright:

Available Formats

Introduccin al API

Y en el <body> del cdigo HTML aparecer el elemento <div>:

<div id="mapa" style="width: 600px; height: 300px;"></div>

Habr que aadir la capa creada al mapa mediante:

Veamos ahora el cdigo html completo de la pgina que estamos desarrollando:

Puedes ver el ejemplo completo y funcionando en el siguiente enlace:

Tipos bsicos de datos

Esta clase proporciona los siguientes mtodos:

Adems hay unas clases utilitarias:

Hay otras clases de elementos simples:

La clase OpenLayers.Pixel tiene los siguientes mtodos de utilidad:

La clase LonLat expone los siguientes mtodos:

La clase OpenLayers.Size expone los siguientes mtodos pblicos:

Representa un cambio de coordenadas.

OpenLayers.Util.getElement( idElemento : String [, idElemento2 : String, ... ] ) : [ domElement o Array[ domElements] ]

OpenLayers.Util.isElement( elemento : Object ) : Boolean

OpenLayers.Util.extend( dest: Object, source: Object ) : Object

OpenLayers.Util.removeItem( miArray: Array, item: Object ) : Array

Podemos aadir las opciones adicionales directamente en el constructor:

La clase OpenLayers.Map expone una buena coleccin de propiedades y mtodos.

OpenLayers.Control.Navigation OpenLayers.Control.PanZoom OpenLayers.Control.ArgParser OpenLayers.Control.Attribution

Esto es, si creamos el mapa con el siguiente constructor:

Tambin podemos crear un mapa sin controles y aadirselos despus:

Utilizacin de los controles

draw(): Dibuja el control. Devuelve el DOMElement donde se aloja el control.

updateScale(): Recalcula y muestra la escala del mapa.

En cuanto a la definicin del estilo de los botones hemos elegido la siguiente:

background-position: center cursor: pointer; }

La clase OpenLayers.Layer expone las siguientes propiedades:

La capa Markers proporciona los siguientes mtodos:

Puedes consultar la documentacin completa de la clase OpenLayers.Layer.Markers en el siguiente enlace: http://dev.openlayers.org/docs/files/OpenLayers/Layer/Markers-js.html

Eventos del objeto Map

Los parmetros que le pasamos son :

listener Una referencia a la funcin manejadora del evento

Coordenadas del cursor

VideoMap: Mostrar videos

Los parmetros que se pasan al constructor son:

Mapki : Google Mapki Mapito : Free Map Marker Icons MapChannels

El ejemplo siguiente es similar al anterior pero desarrollado para la API de OpenLayers:

Dynamic map markers

<body onload="init()"> <div id="map" style="width:600px; height:300px;"></div> </body> </html>

El resultado del ejemplo lo puedes ver en el siguiente enlace: TestVectorFeatures.html

Estilos personalizados: Puntos

Una vez creado el objeto 'Style' nos queda lo siguiente:

Problemas en accesos locales

Aadir puntos dinmicamente

Girar y mover features

Jerarquias de clases con OpenLayers

El array del segundo parmetro tendr la siguiente estructura:

El cdigo completo de los dos ficheros lo puedes ver en:

La ejecucin la pondremos al final del post

Forms que ejecutan javascript

Los detalles a destacar son:

Acceso a Google Maps

google.maps.MapTypeId.ROADMAP google.maps.MapTypeId.SATELLITE google.maps.MapTypeId.HYBRID google.maps.MapTypeId.TERRAIN

La forma de crear las capas es sencilla:

Aadir mapas a una pgina web

En la imagen que viene a continuacin se puede ver el resultado de la peticin realizada:

Acceder desde OpenLayers

<div class="map" id="mapa" ></div> </body> </html>

Acceder a los distintos mapas

Tambin puedes consultar el ejemplo en el siguiente enlace: testOSMLayers.html

You might also like