Tutorial de KML para Google Earth

Para aquellos que sepan un poco de HTML o XML esto les va a gustar. Básicamente pueden agregarle cosas a Google Earth. Aprovechar un programa muy bien hecho para poder hacer un montón de cosas. Los usos que se me ocurren en este momento son pocos y muy específicos: marcar dónde se sacó una foto y/o lugares turísticos. Pero seguramente al ustedes se les ocurrirán cosas mucho más interesantes y útiles.

Para los que sepan un poco de PHP u otro lenguaje de scripts para servidores las posibilidades se multiplican excesivamente. Lástima que todavía no tengan escaneada nuestra ciudad o más puntos locales. Al menos nos servirá para divertirnos un rato mientras tanto y para aquellos lugares de habla hispana a los que les toque antes que nosotros.

Disfrútenlo.

Notas de Traducción

  • Este artículo fue publicado sin el permiso expreso de su autor; por ello puede ser removido o modificado sin previo aviso. Esto se debe a que no encontré información de copyright ni forma de contacto con el autor para pedir permiso
  • En varias partes del archivo se hace referencia a un archivo de ejemplos el cual no fue traducido ni linkeado desde la traducción para evitar succión del ancho de banda de quien lo esté hosteando
  • El artículo original: Google Earth KML Tutorial
  • Vía Google.Dirson

La traducción

El documento Google Earth KML contiene un detalle sobre todo lo que necesitas saber para crear y compartir información con el cliente de Google Earth. Sin embargo, si quisieras adentrarte inmediatamente y ver ejemplos reales de lo que se puede hacer con KML este tutorial es para ti.

Todos los ejemplos que se verán aquí (y muchos más) están en el archivo del Tutorial de KML. Descarga ese archivo para poder ver la apariencia de los ejemplos siguientes en Google Earth.

Consejo: Si quieres ver cómo se ve el código de cualquier funcionalidad, puedes simplemente hacer click en dicha funcionaludad, hacer un click derecho, seleccionar “copiar” y pegar el contenido del portapapeles en cualquier editor de texto.

Documentos KML básicos

El tipo más básico de documetnos KML es aquél que puede ser creado directamente dentro del cliente. Esto es, no se neceita editar o crear un archivo KML en un editor de texto. Marcas de ubicaciones, capas de terreno (ground overlays), caminos (paths) y polígonos (polygons) pueden ser todos incluídos directamente desde el cliente Google Earth.

Marcas de ubicaciones (Placemarks)

Abre el archivo del Tutorial de KML para Google Earth y expande la carpeta de marcas de ubicaciones (placemarks). Allí verás tres tipos diferentes de marcas: simples (simple), flotantes (floating) y ligados (tethered). El código KML para una marca de ubicación ligada se ve de esta forma:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.0">
<Placemark>
<description>Ligado al terreno por una cola personalizable</description>
<name>Marca de ubicación personalizable</name>
<LookAt>
<longitude>-122.0856375356631</longitude>
<latitude>37.42240551227282</latitude>
<range>305.8880792294568</range>
<tilt>46.72425699662645</tilt>
<heading>49.06133439171233</heading>
</LookAt>
<visibility>0</visibility>
<Style>
<IconStyle>
<Icon>
<href>root://icons/palette-3.png</href>
<x>96</x>
<y>160</y>
<w>32</w>
<h>32</h>
</Icon>
</IconStyle>
</Style>
<Point>
<extrude>1</extrude>
<altitudeMode>relativeToGround</altitudeMode>
<coordinates>-122.0856204541786,37.42244015321688,50</coordinates>
</Point>
</Placemark>
</kml>

La estructura de este archivo se puede dividir como sigue:

  • Un encabezado XML
  • Una declaración de espacio de nombres KML
  • La descripción de la marca
  • El nombre de la marca
  • La visión de cámara de la marca
  • La visibilidad por defecto de la marca (en este caso tiene que ser activada por el usuario)
  • Un estilo para la marca detallando la ubicación de la imagen y su posición en la paleta
  • Un switch para si queremos o no que la marca sea comprimida (sí)
  • El modo de altitud que debe utilizar la marca
  • La posición de la marca sobre la superficie de la tierra

(Si te preguntas dónde está esa marca: está justo sobre el “Edificio 41″ (Building 41) de Google; en el que se desarrolló Google Earth.)

1.2 HTML descriptivo en marcas de ubicación

El archivo del tutoria KML tiene un ejemplo de prácticamente todo lo que se puede hacer con el texto de la marca. Se pueden hacer vínculos con las etiquetas <a href”http://..>, se puede dar el tamaño, estilo y color de la tipografía; y también se puede determinar la alineación del texto y tablas. Si quieres ver una lista completa, copiá y pegá el ejemplo “Descriptive Placemark” (Marcas de ubicación descriptivas) en un editor de texto.

Lo más importantes que vas a necesitar saber al crear tu propio HTML en las marcas de ubicación es el uso de la etiqueta <![CDATA["]]>. Se se quiere escribir HTML estándar dentro de una etiqueta <description> vas a necesitar hacerlo dentro de un elemento CDATA. Si no lo haces, los símbolos de mayor y menor van a necesitar ser escritos como entidades de referencia (escapados como &lt; y &gt;) para evitar que Google Earth los interprete incorrectamente (esto es una funcionalidad estándar de las aplicaciones XML, no sólo de Google Earth).

Se pueden ver las diferencias entre código HTML con la etiqueta CDATA:

<description>
<![CDATA[
<h1>La etiqueta CDATA es importante<h1>
<p><font color="red">El texto es <em>más legible</em> y <strong>más sencillo de escribir</strong> cuando se evitan las entidades de referencia.</font></p>
]]>
</description>

Con el mismo texto sin la etiqueta:

<description>
<h1>La etiqueta CDATA es importante</h1>
<p><font color="red">El texto es <em>más legible</em> y <strong>más sencillo de escribir</strong> cuando se evitan las entidades de referencia.</font></p>
</description>

Nótese que las imágenes GIF no están soportadas en las etiquetas <img src=""> por el momento. Esto será solcionado en una versión futura.

1.3 Capas de terreno (Ground Overlays)

Para las variadas funcionalidades de KML se comparten unos cuantos detalles. Si se observa el código del ejemplo de las capas de terreno (ground overlay) en el archivo del tutorial (que muestra la erupción del Monte Etna de 2001) se podrá ver:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.0">
<GroundOverlay>
<description>Capa que muestra al Monte Etna en erupción el 13 de Julio de 2001.</description>
<name>Capa a gran escala sobre el terreno</name>
<LookAt>
<longitude>15.02468937557116</longitude>
<latitude>37.67395167941667</latitude>
<range>30350.36838438907</range>
<tilt>58.31228652890705</tilt>
<heading>-16.5581842842829</heading>
</LookAt>
<visibility>0</visibility>
<Icon>
<href>http://bbs.keyhole.com/ubb/z0302a1700/etna.jpg</href>
</Icon>
<LatLonBox id="khLatLonBox751">
<north>37.91904192681665</north>
<south>37.46543388598137</south>
<east>15.35832653742206</east>
<west>14.60128369746704</west>
<rotation>0</rotation>
</LatLonBox>
</GroundOverlay>
</kml>

Se puede ver cómo el ejemplo comparte la cabecera XML y la declaración del espacio de nombres de KML (todos los archivos KML tienen estas dos líneas al comienzo) y cómo comparte también algunas etiquetas.

El posicionamiento de una capa de terreno es controlada por la etiqueta<LatLonBox>. Los valores dados son para las latitudes norte y sur y las longitudes este y oeste. Además, se proveen de valores de rotación para aquellas imágenes cuyo eje y no coincide con el norte de la grilla.

1.4 Caminos (Paths)

Se pueden crear varios tipos diferentes de caminos desde y para Google Earth, y es útil ser creativo con los datos. Observa el exemplo "Absolute Extruded" (forzado absoluto) en la carpeta Paths y podrás ver cómo la figura fue generada por el siguiente código:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.0">
<Placemark>
<description>Pared verde transparente con delineado amarillo</description>
<name>Forzado absoluto</name>
<LookAt>
<longitude>-112.2643334742529</longitude>
<latitude>36.08563154742419</latitude>
<range>4451.842204068102</range>
<tilt>44.61038665812578</tilt>
<heading>-125.7518698668815</heading>
</LookAt>
<visibility>1</visibility>
<open>0</open>
<Style>
<LineStyle>
<color>ff00ffff</color>
</LineStyle>
<PolyStyle>
<color>7f00ff00</color>
</PolyStyle>
</Style>
<LineString>
<extrude>1</extrude>
<tessellate>1</tessellate>
<altitudeMode>absolute</altitudeMode>
<coordinates>
-112.2550785337791,36.07954952145647,2357
-112.2549277039738,36.08117083492122,2357
-112.2552505069063,36.08260761307279,2357
-112.2564540158376,36.08395660588506,2357
-112.2580238976449,36.08511401044813,2357
-112.2595218489022,36.08584355239394,2357
-112.2608216347552,36.08612634548589,2357
-112.262073428656,36.08626019085147,2357
-112.2633204928495,36.08621519860091,2357
-112.2644963846444,36.08627897945274,2357
-112.2656969554589,36.08649599090644,2357
</coordinates>
</LineString>
</Placemark>
</kml>

Nótese cómo esto es sólo una línea dibujada en altura sobre el terreno. La etiqueta tessellate divide la línea en porciones más pequeñas y la etiqueta extrude la extiende hasta la superficie.

1.5 Polígonos (Polygons)

Los polígonos son una de las funcionalidades más poderosas de Google Earth. La carpeta del tutorial contiene unos ejemplos para comenzar.

Miremos el ejemplo del pentágono (Pentagon) en esa carpeta. La figura es generada por el siguiente código:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.0">
<Placemark>
<name>El pentagono</name>
<LookAt>
<longitude>-77.05580139178142</longitude>
<latitude>38.870832443487</latitude>
<range>742.0552506670548</range>
<tilt>48.09646074797388</tilt>
<heading>59.88865561738225</heading>
</LookAt>
<Polygon>
<extrude>1</extrude>
<altitudeMode>relativeToGround</altitudeMode>
<outerBoundaryIs>
<LinearRing>
<coordinates>
-77.05788457660967,38.87253259892824,100
-77.05465973756702,38.87291016281703,100
-77.05315536854791,38.87053267794386,100
-77.05552622493516,38.868757801256,100
-77.05844056290393,38.86996206506943,100
-77.05788457660967,38.87253259892824,100
</coordinates>
</LinearRing>
</outerBoundaryIs>
<innerBoundaryIs>
<LinearRing>
<coordinates>
-77.05668055019126,38.87154239798456,100
-77.05542625960818,38.87167890344077,100
-77.05485125901024,38.87076535397792,100
-77.05577677433152,38.87008686581446,100
-77.05691162017543,38.87054446963351,100
-77.05668055019126,38.87154239798456,100
</coordinates>
</LinearRing>
</innerBoundaryIs>
</Polygon>
</Placemark>
</kml>

Debería de estar claro ahora que la figura fue generada al dibujar las superficies simples interna y externa y proyectarlas (extrude) hasta la superficie.

2 Documentos KML avanzados

El cliente de Google Earth es suficientemente poderoso como para generar la mayoría de las funcionalidades que se deseen utilizar; e inclusive puede entender más. Dichas funcionalidades, sin embargo, deben ser desarolladas en un editor de texto.

2.1 Estilos personalizados

Una vez generadas las funcionalidades dentro del cliente y revisado el código generado por Google Earth, notarás cómo los estilos son una parte importante en la presentación de los datos. Los usuarios avanzados querrán aprender a definir sus propios estilos.

El ejemplo "Simple Icon Rollover" (Simple cambio de ícono) en las carpetas Styles y Markup muestran cómo crear el efecto de cambio de ícono al pasar el cursor en KML:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.0">
<Document>
<description>Por favor, mueve el cursor sobre el icono para ver el nuevo icono</description>
<name>Simple cambio de icono</name>
<visibility>0</visibility>
<Style id="normalPlacemark">
<IconStyle>
<Icon>
<href>http://bbs.keyhole.com/ubb/z0302a1700/keyhole_icon.jpg</href>
</Icon>
</IconStyle>
</Style>
<Style id="highlightPlacemark">
<IconStyle>
<Icon>
<href>http://bbs.keyhole.com/ubb/z0302a1700/google_icon.jpg</href>
</Icon>
</IconStyle>
</Style>
<StyleMap id="exampleStyleMap">
<Pair>
<key>normal</key>
<styleUrl>#normalPlacemark</styleUrl>
</Pair>
<Pair>
<key>highlight</key>
<styleUrl>#highlightPlacemark</styleUrl>
</Pair>
</StyleMap>
<Placemark>
<name>Example Placemark</name>
<visibility>0</visibility>
<styleUrl>#exampleStyleMap</styleUrl>
<Point>
<coordinates>-122.0856545755255,37.42243077405461,0</coordinates>
</Point>
</Placemark>
</Document>
</kml>

Dos estilos separados son definidos y luego vinculados a una etiqueta key. Cuando el usuario ubica el cursor sobre el ícono, se cambia de "normal" a "highlight" (resaltado).

2.2 Capas de pantalla

Las capas de pantalla no pueden ser desarrolladas directamente dentro del cliente de Google Earth y, por lo tanto, son más complicadas de crear que las capas de terreno. Una colexión completa de ejemplos está incluída en la carpeta "Screen Overlays" en el archivo del tutorial.

Tomemos uno de esos ejemplos. El archivo "Absolute Positioning: Top left" (posicionamineto absoluto: arriba izquierda) mostrará una capa de pantalla en la parte superior izquiera de la ventana. Esto fue generado por el siguiente código KML:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.0">
<ScreenOverlay>
<name>Absolute Positioning: Top left</name>
<Icon>
<href>http://bbs.keyhole.com/ubb/z0302a1700/top_left.jpg</href>
</Icon>
<overlayXY x="0" y="1" xunits="fraction" yunits="fraction"/>
<screenXY x="0" y="1" xunits="fraction" yunits="fraction"/>
<size x="0" y="0" xunits="fraction" yunits="fraction"/>
</ScreenOverlay>
</kml>

El posicionamiento es controlado al mapear un punto de la imagen, especificado por la etiqueta <overlayXY>, a un punto de la pantalla, especificado por la etiqueta <screenXY>. En este caso, la esquina superior izquierda de la imagen (0, 1) se hizo coincidir con el mismo punto de la pantalla.

revisa los demás ejemplos de la carpeta para ver cómo es posible obtener otras posiciones fijas y cómo crear imágenes que se redimensionarán dinámicamente según el tamaño de la pantalla (nótese que xunits e yunits pueden también ser especificadas en pixeles para un control de precisión).

2.3 Vínculos de red (Network Links)

Hasta ahora, todos los ejemplos necesitaron que se alimentara al cliente de Google Earth con KMl localmente - desde la misma PC -. Los vínculos de red permiten servir contenido desde una ubicación remota. Los vínculos de red son normalmente utilizados para distribuir contenido a una gran cantidad de usuarios. De esta forma, si los datos necesitan ser modificados sólo se los debe cambiar en la fuente y todos los usuarios obtendrán la información actualizada automáticamente.

3 Scripts CGI para KML

El uso más poderoso de un vínculo de red es su uso como una forma de proveer contenido dinámico. Con un poco de conocimiento de algún lenguaje para scripts como PHP, Python o Perl es fácil proveer KML altamente personalizado a cada vínculo de red.

Se necesitan dos cosas para proveer KML a través de un CGI de red:

Cuando el servidor recibe una llamada desde el cliente, el servidor necesita devolver un código de respuesta HTTP 200 y determinar el tipo de contenido de dicha respuesta como text/plain ó application/keyhole

La respuesta debe ser KML válido. Para aplicaciones complejas, es necesario que el manejo de errores sea perfecto.

Consejo: una forma simple de manejar errores es interpretar los errores de servidor como el texto de una carpeta. por ejemplo, se puede hacer que el servidor devuelva Base de datios no accesible como una cadena de texto. Esto es más informativo (y más amigable para el usuario) que dejar caer la conexión.

El ejemplo a continuación utiliza PHP, pero es igualmente válido como cualquier otro lenguaje de scripts.

3.1 Generando una marca de ubicación aleatoria

<?php
$lat_int = rand(-90, 90);
$lat_dec = rand(0, 1000000000);
$lon_int = rand(-180, 180);
$lon_dec = rand(0, 1000000000);
$lat = $lat_int.'.'.$lat_dec;
$lon = $lon_int.'.'.$lon_dec;
$response = '<Placemark>';
$response .= '<description>Genera una marca de ubicacion aleatoria en cada llamada al servidor</description>';
$response .= '<name>Random KML server</name>';
$response .= '<visibility>1</visibility>';
$response .= '<Point>';
$response .= "<coordinates>$lon,$lat,0</coordinates>";
$response .= '</Point>';
$response .= '</Placemark>';
echo $response;
?>

Este código genera números aleatorios para las componentes entera y decimal de la marca de uvicación y las encadena en $lat and $lon. El código KML es escrito en la variable $response, la que es mostrada al vínculo de red una vez finalizado. Puedes activar el vínculo de red "Random Placemark" en el tutorial KML para verlo en acción. Para generar una nueva marca, haz click derecho en el vínculo y selecciona refresh (refrescar). Para ir hacia la marca, expande el vínculo de red y haz doble click en la marca.

4 Pedidos de refresco dependientes de la vista (View-Based Refresh Queries)

Un vínculo de red estándar es un vínculo unidireccional: los datos fluyen del servidor al cliente. El refresco dependiente de la vista activa una comunicación bidireccional. Cuando el refresco dependiente de la vista está activado, el cliente devuelve las coordenadas de visión al servidor en un tiempo específico. Esto puede ser cada N segundos, minutos u horas o una vez que pasó un determinado tiempo desde que se dejó de mover la vista.

Las coordenadas son devueltas al servidor mediante un pedido HTTP GEY que agrega las coordenadas como sigue:

GET /ruta/al/script.php?BBOX=[longitud_oeste, latitud_sur, longitud_este, latitud_norte] HTTP/1.1

Lo que puede verse como sigue, si el pedido fue realizado mientras el usuario estaba sobre San Franciso [California]

GET /ruta/al/script.php?BBOX=-122.497790,37.730385,-122.380087,37.812331 HTTP/1.1

Esta funcionalidad puede ser utilizada para aplicaciones muy creativas. Pero para comenzar presentamos un ejemplo simple:

4.1 El punto exactamente bajo la visión (Tracking a Point Directly Under Your View)

El siguiente código PHP interpretará el mensaje devuelto por el cliente y responderá con una marca de ubicación en el centro de la pantalla que tendrá la hora actual como nombre. Para verlo en acción, abre la carpeta "Network Links" del tutorial KML; es el ejemplo "View Centrered Placemark".

<?php
// la hora actual
$timesnap = date("H:i:s");

// partir la respuesta del cliente según las comas y los espacions para obtener un arreglo de coordenadas
$coords = preg_split('/,|\s/', $BOX);

// para que sea más claro, ubicamos cada coordenada en una variable según los bordes inferior-izquierdo ("Bottom Left": bl) y superior-derecho ("Top Right": tr)

$bl_lon = $coords[0];
$bl_lat = $coords[1];
$tr_lon = $coords[2];
$tr_lat = $coords[3];

// calcular el centro aproximado de la vista -- notar que esto no es exacto si el usuario no está viendo exactamente hacia abajo

$userlon = (($coords[2] - $coords[0])/2) + $coords[0];
$userlat = (($coords[3] - $coords[1])/2) + $coords[1];

$response = '<?xml version="1.0" encoding="UTF-8"?>';
$response .= '<kml xmlns="http://earth.google.com/kml/2.0">';
$response .= '<Placemark>';
$response .= '<name>'.$timesnap.'</name>';
$response .= '<Point>
$response .= "<coordinates>$userlon,$userlat,0</coordinates>";
$response .= '</Point>';
$response .= '</Placemark>';
$response .= '</kml>';
echo $response;
?>

El principio ilustrado en el código anterior puede ser utilizado para aplicaciones muy complejas. Por ejemplo, se puede tener una base de datos con información geográfica de la que extraer coordenadas para el usuario y obtener los datos dependiendo de la vista del cliente y devolverlo como KML

5 Requisistos del servidor KML

Cuando se responde un pedido del cliente de Google Earth, el servidor KML debe seguir una serie de reglas para que el cliente interprete correctamente las respuestas:

  1. En caso de éxito, el serivdor debe devolver el código de respuesta HTTP 200 e indicar el tipo de contenido (content-type) a un tipo MIME adecuado
  2. Google Earth lee archivs KML y KMZ. Los tipos MIME para éstos son:
    1. application/vnd.google-earth.kml+xml kml
    2. application/vnd.google-earth.kmz kmz
  3. El cuerpo de la respuesta debe contener datos KML válidos, incluída la cabecera de declaración XML (<?xml version="1.0" encoding="UTF-8"?>). Si el servidor devuelve código KML no válido, el vínculo de red se dentendrá, desactivará y mostrará un mensaje de error

9 thoughts on “Tutorial de KML para Google Earth

  1. Gracias joseiblazquez; pero, como bien dice al principio, este artículo no es original mío sino sólo una traducción. El 90% de las cosas que escribo acá las aprendo (o termino de aprender) del original que luego traduzco.

  2. Hola:
    Yo soy nuevo en esto, pero me gustaria aprender mas. Me gustaria saber sobre el server que pide al princio para conectar el programa. Ademas algo mas basico sobre KML.
    Gracias

  3. Pingback: Texto Casi Diario » Blog Archive » Google SketchUp permite dibujar el planeta casa por casa

  4. una pregunta, uso el ejemplo de Marcas de ubicaciones (Placemarks), con visibility 1 y mi proppio icono pero me no me muestra el icono.
    tienen idea q puede ser? por q no me doy cuenta y lo necesito en el trabajo
    saludos

  5. Hola me parece muy clara la traducción, pero aun no se como hacer que el camino (path) se visualice sobre el terreno como una recta sin necesidad de hacer el extrude. Si quiero hacer una red vial, ¿cómo hago?. Otra alternativa es crear un ground overlay pero en realidad sería bueno poder crearlo a partir de coordenandas UTM. Crees que es buena idea?

  6. Sabes que es la primera vez que ingreso a este sitio y me parece muy bueno el tutorial, estoy trabajando en una interfaz para levantar solo el GE pero tengo que crear los track y waypoint y esto si me sirve

  7. Gracias por dar esta ubicacion en una pagina yahoo respuesta. leere este manual, lo copie: No todos tenemos internet en Venezuela y: seria bueno que publiquen en español sus guias.
    Yo he obtenido el mapa de mi MUNICIPIO, sus cayes etc y quiero llevarlo a mi computadora.. tengo algunos conocimientos de escalas, y creo que: de lo que aqui exponen y que ahora todavia no leo (lo hare en casa).. Pero es posible que SIN INTERNET, Visualice las utilidades de USTEDES?..

Comments are closed.