Cómo cargar un KML en Google Maps en 3 Pasos

Vamos 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.

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

• 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)

• Paso 2: Descarga  el fichero plantilla ReadKMLFile.htm y crea una nueva instancia de la clase KmlLayer con el siguiente código marcado en amarillo

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.

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!

Configuración de cliente FTP en Sublime Text 3

En Sublime Text podemos configurar un cliente FTP que nos permitirá enviar nuestros ficheros al servidor de forma automática cada vez que grabamos el fichero.

• Para ello abriremos el Package Control con CTRL + Shift + P , teclearemos package y seleccionamos Package Control: Install Package

• Tecleamos SFTP y lo seleccionamos:

• Una vez instalado configuraremos el plugin de la siguiente forma:

• En la vista lateral click con el botón derecho en la carpeta principal en la que queremos configurar nuestro FTP automático y seleccionaremos la opciónSFTP/FTP: Map to Remote...

• Configuraremos las siguientes opciones según nuestros parámetros:

Configuración del instalador de paquetes en Sublime Text 3

Una vez instalado Sublime Text 3 vamos a configurar el sistema que nos permitirá instalar componentes adicionales. Ese sistema es el package control.

Para instalar el package control haremos lo siguiente: 

• Abrimos Sublime Text y veremos el siguiente aspecto:

• Activamos que se muestre la barra lateral en el menú View -> Side Bar -> Show Side Bar.
• Si no se activa el Side Bar pulsar en la opción View -> Side Bar ->Show Open Files .

• Mostraremos la consola con View -> Console.
• Iremos a la siguiente página: https://sublime.wbond.net/
• Pulsaremos en la opción Install Now >
• Seleccionamos el texto indicado para nuestra versión y lo copiamos.
• Vamos a la consola de Sublime Text y lo pegamos.

• Pulsaremos Enter y esperaremos a que el sistema actualice los repositorios.

• Para acceder al package control iremos a Tools -> Command Palette (CTRL + Shift + P) y una vez allí teclearemos package y seleccionamos Package Control: Install Package

• Una vez en el package manager podremos buscar en la lista el plugin que queramos instalar.

Editor Sublime Text 3

Sublime 3 es un editor de código muy rápido y sofisticado que nos permitirá ejecutar un montón de tareas de forma muy rápida y sencilla. Soporte muchos lenguajes de programación y dispone de un sistema de instalación de paquetes adiciones que amplían sus características de forma ilimitada.

• Página Oficial: http://www.sublimetext.com
• Documentación Oficial: http://www.sublimetext.com/docs/3/

Instalación de Sublime Text 3

1. Para Instalar Sublime 3 tendremos que ir a la página http://www.sublimetext.com
2. Descargaremos el paquete de instalación para nuestra versión de sistema operativo (actualmente Sublime Text está en versión Beta)http://www.sublimetext.com/3
3. Disponemos de versiones para OSX, Windows(32 y 64 bits) y Ubuntu (32 y 64 bits).
4. Seguimos los pasos indicados en la instalación.

Combinaciones de teclas y funciones básicas en Sublime Text 3

Selección múltiple

• Pulsando Ctrl + D, seleccionamos la próxima ocurrencia de la palabra/string que tenemos seleccionada.
• Pulsando Ctrl + L, seleccionamos la próxima linea.
• Pulsando Ctrl y utilizando el ratón, podemos seleccionar lo que queramos.

Linea de Comandos

• Pulsando Ctrl + Shift + P podemos abrir la linea de comandos, desde la cual podemos hacer de todo.. desde insertar snippets.. cambiar configuraciones a cambiar de lenguaje.

Movernos por el código

• Pulsando Ctrl + P, podemos navegar por el source del archivo abierto, por otros archivos y etc..
• Pulsando Ctrl + R, puedes encontrar los metodos/funciones de tu documento.
• Si pulsamos Ctrl + G, y escribimos un número, nos llevará a la línea con ese número.
• Si al pulsar Ctrl + P escribimos #, nos mostrará todas las etiquetas de un documento HTML.

Múltiples cursores

• Pulsando Ctrl y haciendo click sobre las lineas, podemos insertar múltiples cursores y cambiar o añadir contenido a la vez.

Modo anti-distracción

• Para entrar en el modo anti-distracción, puedes pulsar Shift + F11. Esto centrara el código y lo pondrá a "Full Screen".

Para más información visitar las siguientes URL con ejemplos de ST3:

• http://www.emezeta.com/articulos/guia-sublime-text
• http://foro.elhacker.net/desarrollo_web/tips_y_trucos_sublime_text_2-t364397.0.html

Instalacion de Socket.io

Socket.io es módulo-librería adicional para node.js que permite la realización de aplicaciones en tiempo real en cualquier navegador o dispositivo móvil, eliminando las diferencias que puedan surgir entre los distintos mecanismos de transporte.

Está programada 100% en JavaScript.

Mediante esta librería podemos montar un servidor que emplee websockets para enviar datos en tiempo real a todos sus clientes conectados.

Más información: http://socket.io/

# Necesitaremos previamente tener instalado nodejs y npm.
npm install socket.io

Introduccion a Websockets

WebSocket es una tecnología que proporciona un canal de comunicación bidireccional y full-duplex sobre un único socket TCP.

Antes de la llegada de los websockets en HTML5 las comunicaciones entre clientes web y servidores recaía en el protocolo HTTP.

A partir de ahora, la transmisión de datos puede fluir libremente sobre una conexión websocket que es persistente (siempre conectada), full duplex (bi-direccional de forma simultánea) y extremadamente rápida.

Está diseñada para ser implementada en navegadores y servidores web, pero puede utilizarse en cualquier tipo de aplicación cliente/servidor.

Como las conexiones TCP ordinarias sobre puertos diferentes al 80 son habitualmente bloqueadas por los administradores de redes, el uso de esta tecnología proporcionaría una solución a este tipo de limitaciones proveyendo una funcionalidad similar a la apertura de varias conexiones en distintos puertos, pero multiplexando diferentes servicios WebSocket sobre un único puerto TCP (a costa de una pequeña sobrecarga del protocolo).

En el lado del cliente, WebSocket está ya implementado en Mozilla Firefox 8, Google Chrome 4 y Safari 5, así como la versión móvil de Safari en el iOS 4.2.1.

En el lado del servidor existen diferentes implementaciones, pero nosotros nos vamos a centrar en su implementación con servidor Node.js utilizando un módulo adicional llamado socket.io

Instalacion de Node.js y npm (node packet manager) en Debian

Veamos como realizar la instalación básica de un servidor Debian y cómo instalar Node.js y el gestor de paquetes de Node npm.

Instalacion basica de una maquina Debian

# Instalamos desde el CD-ROM con las opciones por defecto.
# Configuración de interfaz de red:
nano /etc/network/interfaces
 
auto lo eth0
iface etho inet static
address 10.21.1.x
netmask 255.255.0.0
gateway 10.21.0.254
 
# Configuramos el DNS
nano /etc/resolv.conf
 
nameserver 10.0.4.1
domain sanclemente.local
search sanclemente.local
 
# Una vez instalado configuramos el /etc/apt/sources.list
nano /etc/apt/sources.list
 
# Comentamos la linea del cd-rom
# deb cdrom
 
# Actualizamos el sistema:
apt-get update
apt-get dist-upgrade
 
############################################################################
#Diferencias entre php como módulo y como fastcgi
http://blog.layershift.com/which-php-mode-apache-vs-cgi-vs-fastcgi/
############################################################################
 
# Instalamos Apache y PHP (como módulo):
# http://www.howtoforge.com/ubuntu_debian_lamp_server
 
apt-get install apache2 php5 libapache2-mod-php5
 
nano /var/www/html/test.php
<?php phpinfo(); ?>
 
# Instalación de MySQL
apt-get install mysql-server mysql-client php5-mysql
 
# Configuración de MySQL para escuchar en todos los interfaces (accesos externos):
 
nano /etc/mysql/my.cnf
bind-address = 0.0.0.0
 
# Reiniciamos el MySQL
service mysql restart
 
# Instalación de PHPMyAdmin
apt-get install phpmyadmin
 
# Reiniciamos el servicio Apache:
service apache2 restart
 
# Crear usuarios y bases de datos.
 
 
############################################################################
http://www.howtoforge.com/how-to-set-up-apache2-with-mod_fcgid-and-php5-on-debian-squeeze

Instalación de Node.js en Debian



# Una forma de instalarlo puede ser desde los paquetes y otra desde el código fuente.
 
# Si no trabajamos con la versión Testing añadiremos esta source:
echo "deb http://ftp.es.debian.org/debian jessie-backports main" >> /etc/apt/sources.list
 
# A continuación realizaremos la instalación:
apt-get update
# Instalación de node-js
apt-get install nodejs-legacy
 
# Asegurarse de que tenemos curl instalado.
curl --help
 
# Si no lo tenemos instalado lo podemos instalar con:
apt-get install curl
 
# Instalación de npm (node package manager)
curl --insecure https://www.npmjs.org/install.sh | bash
 
# Para instalarlo desde el código fuente y desde una shell de Linux como root.
sudo apt-get install python g++ make checkinstall
src=$(mktemp -d) && cd $src
wget -N http://nodejs.org/dist/node-latest.tar.gz
tar xzvf node-latest.tar.gz && cd node-v*
./configure
fakeroot checkinstall -y --install=no --pkgversion $(echo $(pwd) | sed -n -re's/.+node-v(.+)$/\1/p') make -j$(($(nproc)+1)) install
 
dpkg -i node_*