hypertext markup language (lenguaje de marcado de

Aplicaciones de cartografía temática

Laboratorio de SIG – Departamento de Geografía 1

HERRAMIENTAS DE REPRESENTACIÓN EN GOOGLE

Introducción Google es una empresa dedicada al desarrollo de buscadores en Internet, software de acceso a datos y servicios de almacenamiento que no requieren un conocimiento técnico por parte de los usuarios, de esta forma los espacios creados permiten interactuar en la red a través de herramientas útiles y de fácil manejo. Estas herramientas son diseñadas en una interfaz de programación de aplicaciones o API (Application Programming Interface), que permite la comunicación entre los componentes de un software. Por medio de las API se construyen “bibliotecas” de información, con herramientas de programación JavaScrip, que definen un conjunto de procedimientos y reglas para generar un elemento. La API de visualización de Google permite acceder a múltiples fuentes de datos estructurados, para generar visualizaciones basadas en datos ingresados por los usuarios. Al estar en la red, la visualización de Google API es una plataforma para crear, compartir y reutilizar visualizaciones, genera un código HTML1 o un vínculo http que permite publicar información en páginas web. En este taller se exploraran algunas de las opciones que Google tiene para el diseño de gráficos y mapas, y la publicación de información cartográfica básica en la red. Como requerimiento se necesita de una cuenta en Google mail (gmail). Objetivos del taller Explorar nuevas herramientas de visualización de datos en la red.

Imágenes gráficas - Image Charts API Google proporciona la opción de crear gráficos a partir de plantillas, con datos no muy extensos, en su servicio de Asistente de gráficos o Chart Wizard, el cual contiene: gráficos de líneas, barras horizontales y verticales, tortas, gráficos radiales, gráficos de dispersión, grafico de Venn, mapas temáticos y un gráfico tipo “medidor”. 1. Siga este enlace http://imagecharteditor.appspot.com/ , Elija el primer gráfico tipo

línea y explore las siguientes opciones, las cuales son aplicables a todos los gráficos: • En la primera opción aparece un recuadro para activar o desactivar los ejes del

gráfico • La segunda opción Titulo, puede dar nombre al gráfico y escoger su tamaño de letra y

color. 1 HyperText Markup Language (Lenguaje de Marcado de Hipertexto). es un lenguaje para describir páginas web, más no un lenguaje de programación. Es un lenguaje de marcas que define un conjunto de etiquetas o palabras clave que sirven para que el navegador interprete el contenido de una página. Para mayor información consulte: http://www.w3schools.com/html/default.asp.



• La tercera opción Size, permite graduar el tamaño del gráfico en pixeles, pues este se exporta como una imagen.

• Luego en Data se agregan la información. Google Chart Tool tiene datos predeterminados, pero el usuario puede agregar sus propios datos (separando cada valor con un espacio) y agregar una nueva variable con Add New Data Set

• En la opción Data Style el usuario puede elegir el color de la línea, el ancho (width), la longitud del segmento (Line segment length) y espacios en la longitud del segmento (Blank segment length), estas dos últimas opciones se activan o desactivan con la

opción

• En la opción Axes, se configuran los ejes del gráfico. El gráfico solo presenta un eje Y predeterminado a la izquierda, pero el usuario puede agregar el eje X con Add New Axis.

• Se puede cambiar el rango de datos, dando un valor de inicio de los datos en Start y el valor de finalización en End, aunque este aparece predeterminado de acuerdo con los datos agregados anteriormente.

• También se puede agregar nombre a los ejes, con la opción Label, y la distancia de este con respecto al eje del gráfico con Tick marcks

• La posición del nombre del eje se puede cambiar con las opciones Type

Opciones de gráfico

Visualización de cambios



• Con Axes Style se configuran los colores y tamaño de letra de los ejes. • En Markers, el usuario puede elegir el tipo de marca de los datos.

o Bounded Fill Marker: Gráfico sin área de color. o Fill Marker: Grafico con fondo o resaltado o Range Marker: define una zona de importancia de acuerdo con un rango

dado, de forma horizontal o vertical. o Shape Marker: crea una marca para cada dato, ya sea con números o

formas. o Line Marker: marca los datos con líneas horizontales, verticales o

resaltando la serie de datos.

Bounded Full Marker Fill Marker Range Marker – vertical

Shape Marker – Flag (bandera) Line Marker – Vertical Line Small • Fills permite dar color de fondo al área del gráfico y al área total de la imagen • Margins permite agregar márgenes • Y finalmente Grids agrega una grilla al gráfico

En la parte inferior derecha aparecen dos espacios, el primero arroja un link http para ser enviado por correo y un código HTML para ser publicado en una página web. El segundo espacio permite al usuario ver los cambios en la configuración de la API que ha



generado. Note que a medida que se hacen cambios en el gráfico, cambien los elementos de la API.

El usuario también puede guardar el gráfico como imagen, dando click derecho sobre el área del gráfico y eligiendo las opciones: guardar imagen como, ver imagen o copiar imagen.

Procedimientos

2. Diríjase a la galería de gráficos y elija el gráfico de torta concéntrico y genere una imagen para dos variables de su elección. Los gráficos de torta (Pie) y radiales poseen la opción de diferenciar cada área de datos con un Label.

3. Los gráficos tipo radar: se generarán dos gráficos tipo radar, de una y dos variables, a partir de los datos de la tabla Variables clima, que se encuentra en la carpeta del taller. Esta tabla contiene los datos de temperatura minima y máxima y la precipitación

Formato API

Información para publicación



registradas en Bogotá durante el año 2010, en la estación meteorológica del Aeropuerto El Dorado2.

• Seleccione uno de los gráficos radiales de dos variables que aparecen en la galería.

• En la opción Axes, cambie los Labels por el nombre de los meses, y agregue los campos necesarios con Add New Label. Luego de haber generado los ejes diríjase a la opción Data para agregar los datos de temperatura máxima y mínima de la tabla Variables clima. Recuerde que cada dato debe ir separado con un espacio.

¿Qué sucede cuando se agregan valores negativos?

• Luego genere un gráfico de precipitación con el tipo de gráfico radial que se encuentra

en la pestaña Start.

2 Fuente: http://www.meteored.com/



4. Mapas temáticos: Google Chart Tool ofrece mapas temáticos básicos a escala mundial que representa datos con la variable color. El único país para el que existe un mapa regional es los estados Unidos.

• Elija el mapa temático mundial y en el espacio Optios for Thematic Map seleccione en Geographical Area - South America

• En el espacio Country seleccione los países andinos y agréguelos al mapa con Add. Observe que a medida que agrega los países estos se resaltan en el mapa.



En Data Values asigne valores al área de cada país para cambiar la intensidad del color. A diferencia de los otros gráficos los mapas temáticos no ofrecen la posibilidad de agregar datos.

Gráficos Interactivos Google ofrece herramientas para la generación de gráficos y mapas interactivos, generalmente para usuarios familiarizados con el manejo de JavaScript, como:

• Mapa JavaScript API: permite agregar mapas de Google Maps a una página web o a

dispositivos móviles. http://code.google.com/intl/es-AR/apis/maps/documentation/javascript/

• Maps API for Flash: permite insertar en Google Maps aplicaciones Flash.

http://code.google.com/intl/es-AR/apis/maps/documentation/flash/

• Google Mapplets: los mapplets son miniaplicaciones que se ejecutan dentro de Google Maps. Algunas de las aplicaciones que se han creado por los usuarios integran información superpuesta en un mapa como fotos, condiciones meteorológicas o el precio de la gasolina. http://code.google.com/intl/es-AR/apis/maps/documentation/mapplets/

• API de Google Earth: es un complemento que permiten insertar una ventana de

Google Earth, en una página web. Por medio de esta API se pueden crear aplicaciones de mapas tridimensionales, agregar imágenes en la superficie y cargar archivos KML. http://code.google.com/intl/es-AR/apis/earth/

• Google Static Maps API: permite insertar una imagen de Google Maps en tu sitio web

sin utilizar JavaScript, se crean mapas a partir de los parámetros de URL enviados a través de una solicitud HTTP que de desarrolla desde una cuenta básica de Google maps. http://code.google.com/intl/es-AR/apis/maps/documentation/staticmaps/

• Google Maps Data API: al igual que la aplicación anterior permite a los usuario

generar mapas sin JavaScript a partir de una cuenta básica de Google maps. Esta aplicación permite guardar datos para los puntos, áreas o líneas creadas por el usuario y agregar información de texto, imágenes y enlaces. http://code.google.com/intl/es-AR/apis/maps/documentation/mapsdata/

• API de Gadgets: Google ofrece la posibilidad de realizar gráficos y mapas interactivos

sencillos a partir de aplicaciones gadgets predeterminas, importando datos desde Google docs de una cuenta de correo de gmail. http://code.google.com/intl/es-AR/apis/gadgets/

Para este ejercicio se utilizarán las últimas dos opciones, las cuales no requieren un conocimiento del manejo de Java Script. 5. Abra su cuenta de correo gmail. Diríjase a la pestaña Docs en la parte superior de la

ventana de inicio



• En el menú izquierdo de la nueva ventana de clic sobre la opción Subir y luego en Seleccionar archivos para subir, elija la tabla Frutas Bogotá de la carpeta del taller. En la parte de abajo de clic sobre Iniciar subida. Para agregar las demás tablas de la carpeta selecciones Subir mas archivos, y luego regrese a Google docs.

• En la ventada de documentos deben aparecer cargadas las tablas. Seleccione Frutas Bogotá con doble clic para abrir la tabla. Allí aparecen los ingresos a Bogotá de frutas de clima frio, para los años 2001 y 2002.

• Seleccione todos los datos de la tabla y en la pestaña insertar, seleccione Gadget



• En la ventana de Gadgets seleccione Gráficos - Gráfico en movimiento

• En la ventana de configuración de nombre al gráfico (deje el espacio de Default state en blanco) y luego Aceptar y cerrar

• Aparecerá sobre el área de la tabla la aplicación con los datos seleccionados. En la opción color seleccione colores exclusivos y en la opción tamaño Toneladas. Luego

oprima el botón Play para ver el gráfico en movimiento.



• En las pestañas superiores de la ventana del Gadget cambie la opción de visualización

a barras y líneas. • En el menú del Gadget encontrará opciones para la publicación, Google proporciona

códigos HTML, XML y http, para incluir la información en páginas web.

6. Ahora diríjase a la tabla Países Andinos que cargo anteriormente en Google docs. Observe que en la tabla aparecen la primera columna el código ISO para cada país, esto se debe a que el Gadget de mapas reconoce las áreas de cada país bajo este código internacional. Las columnas siguientes deben contener valores numéricos.

• Seleccione los datos de las primeras columnas, las que contienen los códigos ISO, el

valor de población y densidad de población. En Insertar seleccione nuevamente Gadget y en la opción Mapas – Mapa de color. En la ventana de configuración de Gadget seleccione la región – South America y de nombre al mapa.



• Observe que se generan dos mapas, uno para cada atributo de la tabla. • Explore otros tipos de gráficos, realice un ejercicio con los datos que usted desee y

comente los resultados obtenidos. Mapas Interactivos

7. Ahora se generará un mapa interactivo básico con Google maps a partir de la aplicación Google Maps Data API.

• Con su cuenta de gmail abierta, ingrese en una nueva pestaña a la página de Google

maps http://maps.google.es/ y seleccione Acceder en la parte superior derecha, e ingrese su dirección y clave de correo

• En el menú izquierdo de la cuenta elija Mis mapas – Crear un nuevo mapa.

• Titule el mapa como Cartografía Temática, en descripción escriba Facultad de Ciencias Humanas, y seleccione Publicación restringida.

La opción Publicación restringida, le permite mantener su mapa en la cuenta para realizar ediciones antes de su publicación, por ejemplo en una página web. Si considera que tiene todos los datos para agregar al mapa y publicarlo abiertamente cuando termine puede escoger la opción Público, esta opción permite que cualquier usuario vea sus mapas, la información se incluye en las búsquedas de Google.



• Busque la ubicación del edificio de la Facultad, para facilitar su búsqueda elija la opción de vista Google Earth.

• En la barra de herramientas de la vista seleccione dibujar una forma y encierre en un

polígono el edificio. Al finalizar (con doble clic) aparecerá una ventana de opciones, seleccione Texto enriquecido

• Ingrese un comentario sobre el edificio, en diferentes tipos de letras, tamaños y colores.

• Seleccione el texto y oprima el ícono de enlace , agregue la página web de la facultad http://www.humanas.unal.edu.co/home/ en la ventana de especificación de la URL.



• Para agregar imágenes se debe tener la URL de la imagen en Panoramio.

• Para editar el color y transparencia de la forma arrastre la imagen hacia la izquierda

para ver la opción de edición. Dando clic sobre esta opción aparecerá, en el mismo recuadro de edición anterior, las opciones para editar la forma.

• Cambie las opciones predeterminadas y presione Aceptar

• En las propiedades del mapa oprima Listo.

• En el extremo superior derecho del cuadro de vista del mapa aparece la opción

Enlazar, al dar clic sobre ella Google maps arroja dos códigos, uno http y uno HTML, para enlazar su mapa. Copie el vinculo http en la solución de este taller.



• En la opción Personalizar y obtener vista previa del mapa que va a insertar, el usuario

puede cambiar el tamaño de vista del mapa y centrar el mapa de acuerdo a como quiere presentarlo en su página web. Estas ediciones modifican el código HTML

• En la siguiente página encontrará un ejemplo de mapa informativo de museos y

colecciones de la Sede Bogotá publicado en la página del Sistema de Patrimonio Cultural y Museos de la Universidad Nacional.

http://www.museos.unal.edu.co/sccs/plantilla_1.php?id_subseccion=483&id_seccion=34

Intercambio de información Google Earth – Google Ma ps Las ediciones de mapas realizados en Google Earth pueden ser visualizadas también en Google Maps, con un tamaño máximo de archivo de 10MB. Los datos se comparten en formato KML3, sin embargo existen aún algunas restricciones para los archivos KML en Google Maps, por lo cual no todos los archivos pueden ser visualizados en una sola vista. 8. Abra Google Earth. En Archivo - Abrir, seleccione el archivo Localidades.kmz que

aparece en la carpeta del taller. Despliegue el menú del tema que acaba de agregar, Observe que el tema contiene todos los polígonos de las localidades de Bogotá en un solo color. De clic derecho sobre el título del tema y oprima Propiedades.

3 El formato KML se basa en una estructura de etiquetas con atributos y elementos (marcas de posición, descripciones, superposiciones del suelo, rutas y polígonos) en lenguaje XML, y se utiliza para mostrar información geográfica en navegadores como Google Earth, Google Maps y Google Maps para móviles. Su extensión de archivo es *.kml o *.kmz (versión comprimida del kml). Fuente: Google Code http://code.google.com



• En la pestana Estilo, color seleccione el recuadro de color de línea y escoja un tono rojo, luego en Anchura coloque 1.5 y en opacidad 0% (el mismo procedimiento de puede seguir para dar color a cada polígono)

• Ahora podrá visualizar las áreas de cada localidad. Ubiquese sobre la localidad de Puente Aranda, puede seleccionarla directamente del menú, quitando la marca del tema y seleccionando unicamente la localidad.



• Sobre el menú ubíquese en Mis Lugares y dando clic derecho agregue una nueva carpeta, asígnele un nombre y oprima Aceptar.



• Realice una interpretación de la imagen resaltando con polígonos las áreas

residenciales de auto construcción y urbanizaciones, zonas industriales, cárcel La Modelo y el complejo militar. Asegúrese de que la carpeta creada anteriormente este

seleccionada. Agregue los polígonos con la herramienta Polígono y de una descripción a cada uno.

• Al terminar ubiquese sobre la carpeta y dando clic derecho seleccione Guardar como y elija la carpeta de archivos del taller. Observe que la carpeta de poligonos se guarda con una extensión .kmz • Regurese a su cuenta de Google Maps, en Mis mapas cree un nuevo mapa, pero ahora seleccione la opción Importar. En la ventana dirijase a Examinar… elija el archivo kmz que acaba de crear y luego oprima Subir desde archivo. Observe los resultados.



ArcGIS permite también crear archivos KML que pueden ser visualizados y editados en Google Earth, sin embargo por ser estos más complejos y de mayor tamaño no pueden visualizarse en una vista completa en Google Maps.

• Abra un proyecto de ArcMap y agregue el tema factor_antropico1 de la carpeta del

taller. En la columna de Herramientas elija Data Management Tools – Generalization – Dissolve, y elija como campo para disolver los polígonos el atributo donde se encuentra el nombre. Esto le permitirá tener menos datos al exportar el archivo.

• Esta capa se encuentra en el sistema coordenado Colombia_Bogota_Zone. Para utilizar esta capa en Google Earth debe reproyecteda en WGS84.

• Luego con el tema final ya proyectado en sistema coordenado WGS84, vaya en la columna de herramientas a Conversion Tools – To KML – Layer to KML.

• Seleccione el tema que proyectó en WGS84 y guardelo en la carpeta del taller, elija una escala de salida y presione OK.

• Abra el nuevo archivo .kmz en google Earth

hypertext markup language (lenguaje de marcado de

Documents