KMLVamos a cargar un archivo KML en nuestra web de mapas creada con el API de Google Maps.

Cómo todos sabéis el KML es un fichero con estructura de XML que además almacena datos geográficos. Todos los habréis utilizado con la herramienta Google Earth para visualizar datos en 3D. Sin embargo, hoy os vamos a contar con un sencillo ejercicio práctico cómo cargarlos en nuestro mapa de Google Maps.

Cómo ya os contábamos en este vídeo (Herramientas para la publicación de datos GIS vía Web), para montar una aplicación web de mapas tenemos varias alternativas.

Aplicaciones_web_esquema

En el caso que vamos a ver, sólo necesitamos un Servidor de datos, que en este caso será el mismo fichero KML, y como servidor de aplicaciones usaremos el directorio Public de nuestro Dropbox. Podéis usar también el directorio public de Google Drive, o Amazon o montar vuestro propio servidor con IIS, Tomcat, Apache, etc

Public_Google_drive

 

  • Paso 1: Ubicar (copiar y pegar)  nuestro fichero KML en el servidor de aplicaciones (o bien usar un KML de acceso público como en nuestro caso)

 

KML_TO_Googlemaps

 

Con esto sería suficiente para visualizar el archivo KML pero vamos a añadir un botón de encender o apagar la capa

  • Paso 3: Vamos a colocar el botón de encender o apagar la capa.

Boton_encender_kml_goolge

Expliación opcional

Al principio del fichero del ejercicio, una instrucción crea una variable llamada toggleState y le asigna el valor 1. Utilizarán este valor en la función toggleMyKml() para controlar la visibilidad del fichero KML. Disponemos igualmente un botón de tipo interruptor en la parte inferior de la página que le usuario podrá pulsar para ejecutar esta función.

Miremos el contenido de la función toggleMyKml(). Si la variable toggleState tiene el valor 1, entonces ocultarán el fichero KML. Para ello deben pasar el valor null al método ctLayer.setMap(). También se cambiará el valor de la variable toggleState a 0. En este caso y si el usuario pulsa otra vez el botón, se volverá a cambiar la visibilidad del fichero KML y volverá a aparecer. Para ello se pasará una referencia del mapa al método .setMap() y se volverá a asignar el valor 1 a la variable toggleState

 

LISTO!

Aquí tienes el archivo con el planteamiento

Aquí tienes el archivo con la solución

Si te animas a cargar tu propio KML, envíanoslo y lo compartimos