Incrusta mapas de IDECanarias en tu web

A través del imprescindible blog IDEE me entero de que Grafcan ha abierto su propio Blog “El blog de Grafcan“, desde el que se centran en informar sobre la “Actualidad de los productos, servicios y actividades de Cartográfica de Canarias“.

Puede que te preguntes: ¿realmente generan tanta actividad como para mantener un blog?. Personalmente piendo que si, llevo siguiendo el Rss del IDECanarias desde hace tiempo y no paran, tanto en actualización de contenidos como en innovación, gracias a la directiva europea Inspire y al equipo de profesionales que trabaja allí, han conseguido cambiar la imagen que se tenía de Grafcan en unos pocos años.

El caso es que revisando los posts que han publicado con anterioridad, leo uno acerca de cómo incrustar un mapa de IDECanarias en tu propia web usando OpenLayers y, en principio, parece bastante sencillo. Lo que escribo a continuación es lo que he interpretado después de hacer algunas pruebas, aunque lo más probable es que perpetre algún disparate por medio:

Antes de nada, debemos fijar el mapa, saber la latitud y longitud del mismo, para esto podemos usar alguna utilidad que tenga geolocalización inversa o en la que se pueda pulsar directamente en un mapa, por ejemplo:
http://pagesperso-orange.fr/universimmedia/geo/loc.htm.
O directamente a través de Google Maps como explica Manuel Almeida.

Una vez que tenemos la latitud y longitud, creamos un fichero html con el siguiente código:



  
    

    
    
  
  
    

  

He utilizado como ejemplo el mismo código que ofrecen como muestra en el blog de grafcan, este es el resultado ‘escalado’:

Ahora si queremos construir nuestro propio mapa sólo debemos modificar las variables que nos interesen, en el caso de este ejemplo:

- El ancho y largo de la caja del mapa:

width: 600px;
height: 400px;

- La Latitud y Longitud (rescatamos los valores extraídos con anterioridad), y el nivel de zoom (siendo 0 el nivel más alejado y 15 el más cercano):

var lon = -15.423;
var lat = 28.14;
var zoom = 9;

- La llamada al servicio WMS (nombre, url y capa):

layer = new OpenLayers.Layer.WMS( "IDECanarias WMS OrtoExpress",
"http://idecan1.grafcan.es/ServicioWMS/OrtoExpress",
{layers: 'ortoexpress'} );
map.addLayer(layer);

Si se quieren añadir más capas necesitas conocer las url de los servicios y los nombres de las capas, para lo primero puedes acudir al catálogo de servicios WMS (ojo: las enlaces que contienen las url llevan a la dirección NAME de los mismos, así que lo mejor será copiar el texto del enlace en lugar del propio enlace). El nombre de las capas no lo he encontrado por ninguna parte, al final me he decidido a googlear y he encontrado algo de información en Geopole, la he recopilado en un Google Docs, si tienes más información sobre las capas, modifica el documento tu mismo, lo dejo compartido:

Después de hacer algunas pruebas, modifiqué la plantilla inicial, cambiando las coordenadas y nivel de zoom, así como añadiendo algunas capas extra, este es el resultado:

Lo ideal sería que se pudiera incrustar como un objeto independiente, tal como pasa con los vídeos de youtube o los mapas de google, pero el hecho de que se puedan combinar distintos Servicios WMS permite jugar con la gran cantidad de datos que disponen.