Sep 182010
 
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.Mapañade un control ‘Attribution‘ por defecto si no se especifica lista de controles en el constructor. Si al crear el mapa añadimos nuestra propia lista de controles debemos cuidar el detalle de añadir el control OpenLayers.Control.Attribution
El control ‘Attribution’ dispone entre otras de las siguientes propiedades y métodos 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 podríamos utilizarlo para ajustar propiedades de estilo, posición, 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 añadir un enlace a dicha hoja de estilo en nuestro código:


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:

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 artículo hemos publicado como mostrar los mapas de OpenStreetMap a través del API de Google.
En el API V3 de Google Maps no hemos encontrado referencia a ningún elemento especialmente designado para mostrar el attribution de las capas que no sean de Google. Además cuando se muestra un mapa que no es de Google, el attribution de Google sigue apareciendo en la parte inferior de la página esquinas izquierda y derecha.
Si vamos a utilizar un mapa con una única capa de OpenStreetMap podemos añadir un elemento ‘div’ en el lugar elegido y asignarle como contenido html la cadena con el ‘attribution’.
Un ejemplo podría ser de la siguiente forma. En la página html definimos un elemento ‘div’ para alojar el attribution:

En la hoja de estilo del programa damos valores a la posición y aspecto del elemento:

Y finalmente en la rutina javascript que dibuje el mapa podemos añadir algo parecido a esto:

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 añadir o no el attribution correcto. En este ejemplo se utiliza el evento ‘maptypeid_changed‘. Asignamos un controlador al evento mediante:

El primer parámetro es una referencia al objeto google.maps.Map; el segundo parámetro es el nombre del evento que queremos interceptar; el tercer parámetro es el nombre de la rutina que va a controlar el evento, en el caso del ejemplo ‘setAttribution_handler’. El código del controlador puede ser algo parecido a esto:

El código completo del ejemplo lo puedes ver en el siguiente enlace:
fuente OSMAccessGoogle


Santiago Higuera (19 Septiembre 2010)

Sep 112010
 

Mapa de Mallorca

Como ya anticipábamos en nuestro artículo de Julio, la nueva versión de OpenLayers, la versión 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 artículo vamos a explicar la utilización de las nuevas capas Google V3.

Hace unos meses Google lanzó la nueva versión de su API para Google Maps, la versión 3: Google Maps API V3. Incorpora numerosas novedades en relación con la versión anterior. Una de las novedades es que no es necesario disponer de un código 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:

El sistema de referencia de las nuevas capas es el Spherical Mercator, por lo que habrá que transformar las coordenadas desde WGS84.

Hemos creado un pequeño ejemplo en el que se superpone una capa de OSM sobre las capas de Google. El ejemplo completo lo puedes ver en:

OLV10GoogleAccess.html


Santiago Higuera (11 Septiembre 2010)

Jun 102010
 

aram-bartholl-google-map-marker-art

Google popularizó los marcadores para mapas, esos pequeños iconos que sirven para señalar una posición sobre un mapa electrónico y que suelen proporcionar acceso a alguna característica adicional al pulsar sobre ellos.

marker-red

Desde entonces han aparecido cientos de marcadores, cada vez mas sofisticados, pero que básicamente conservan el ‘look’ orignal que permite identificarlos como marcadores.

highway

Actualmente hay muchas colecciones de marcadores disponibles para utilizar en nuestros mapas. Una buena colección es la que se puede ver en Google-Maps-Icons, colección de 900 marcadores de uso libre y organizados por categorías : Cultura, Educación, Transporte, …

marina

Hay otros sitios de marcadores :

También se pueden utilizar imágenes vectoriales para crear marcadores. Una forma de hacerlo es a través de juegos de caracteres personalizados. La calidad de estos marcadores es buena, pero sólo proporcionan dos colores.

Independientemente la simbología para cartografía está reglamentada en muchos campos:

A continuación presentamos el listado de un ejemplo de mapa sencillo con un marcador, desarrollado para la API de Google:

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

El resultado de ambas páginas se puede ver en los siguientes enlaces. También puedes examinar el código fuente completo de los ejemplos.

TestGoogleMarker

TestOpenLayersMarker


Santiago Higuera (10 Junio 2010)