Integración de Adobe Flex y Google Maps:

Aplicaciones Geográficas Enriquecidas para Internet

Carlos InfanteJuan Carlos Méndez

Kudos Ltda.

http://www.gkudos.com

Página 2

08/09/2008

Agenda

I. Introducción a los Datos Geográficos y Sistemas de Información Geográfica (SIG)

II. Taller: Integración de Adobe Flex y Google Maps(Adobe Flex como Herramienta para el Desarrollo de sistemas SIG basados en Web)

III. Aplicaciones Geográficas (Empresariales) Enriquecidas para Internet

IV. Demostración de GeoRIA’s

V. Preguntas y Conclusiones

1. Introducción a los Datos Geográficos y Sistemas de Información

Geográfica (SIG)

http://www.gkudos.com

Página 4

08/09/2008

Que es un SIG?

• Es un conjunto de funcionalidades que permiten capturar, almacenar, manipular, analizar, validar y desplegar datos geográficos utilizando adecuados canales de comunicación para su socialización y diseminación.

http://www.gkudos.com

Página 5

08/09/2008

Personas

Aplicaciones

Software

Equipos

DatosRequieren

Accesados

Canales de Comunicación

Componentes de un SIG

http://www.gkudos.com

Página 6

08/09/2008

Dato Geográfico• Se caracterizan por que tienen una localización espacial

(Latitud y longitud)

Latitud : Latitud Norte 4°35’56’’57

Longitud

Longitud Oeste de Greenwich 74°04’51’’30

http://www.gkudos.com

Página 7

08/09/2008

Ventajas de los Mapas y los SIG

• Capacidad de visualizar los eventos directamente en la localización geográfica donde ocurrieron o están sucediendo.

• Visualización rápida de eventos• Capacidad de realizar análisis espaciales donde se

combinan diferentes clases de variables• Generación de reportes que incluyen mapas

cartográficamente válidos

http://www.gkudos.com

Página 8

08/09/2008

Evolución de los SIG1960 1970 1980 1990 2000

Implementación de primeros SIG en CANADA y EEUU

Inicio de difusión en Agencias estatales

Difusión Comercial Masificación

CARTOGRAFIASISTEMAS DE INFORMACION GEOGRAFICA

WEB ‘ SIG

GRIA

* Adaptada de Online visualization of spatial data Thomas Hachler

Aplicaciones standalone

Arquitecturas Web

Sistemas AbiertosEstándares

Estandarización

RIA

http://www.gkudos.com

Página 9

08/09/2008

SIG en la WEB: 1997

Tomado de “Web Mapping Systems”http://www.slideshare.net/cageyjames/web-mapping-systems/

http://www.gkudos.com

Página 10

08/09/2008

SIG en la WEB: 2008

Google Earth

http://www.gkudos.com

Página 11

08/09/2008

Retos Actuales para los SIG Basados en WEb

• Reducción de Costos en Licenciamiento de Software

• Facilidad de Uso• Desempeño• Interoperabilidad con Otros Sistemas• Estandarización• Publicación a través de la Web

2. Taller: Integración de Adobe Flex y Google Maps

(Adobe Flex como Herramienta para el Desarrollo de sistemas SIG

basados en Web)

http://www.gkudos.com

Página 13

08/09/2008

Taller• En el presente taller se desarrollará un

prototipo de aplicación utilizando Adobe Flex y Google Maps donde se mostrarán algunas de las características más sobresalientes de dichas herramientas.

• Metodología:– Definición de Requerimientos del Sistema– Desarrollo Iterativo del Prototipo creando y

explicando cada una de las partes de código fuente que lo componen.

<Taller de Google Maps en Flex />

Prototipo de Aplicación Flex para Visualización Interactiva de Eventos

de Terremotos

antes de empezar a <programar/>…

qué desea nuestro “cliente”?(o los requerimientos…)

http://www.gkudos.com

Página 16

08/09/2008

Descripción del Problema

• Se desea proveer un sistema interactivo para consulta y visualización de información relacionada con Sismos.

• El “sistema actual” tiene algunas deficiencias respecto a presentación, usabilidad y desempeño.

http://www.gkudos.com

Página 17

08/09/2008

Descripción del Problema• Página Actual de Consulta de “Nuestro Cliente”:

http://www.ngdc.noaa.gov/nndc/struts/form?t=101650&s=1&d=1

http://www.gkudos.com

Página 18

08/09/2008

Descripción del Problema

• Página Actual de Resultados

http://www.gkudos.com

Página 19

08/09/2008

Requerimientos

• Requerimientos:– Visualización de Eventos en un Mapa– Filtrado Interactivo de Datos– Carga de Datos en XML– Personalización de Diseño Gráfico– La aplicación debe ser Basada en Web– Incorporación de Animación, Video y Fotografías– Compatibilidad con Firefox e Internet Explorer

http://www.gkudos.com

Página 20

08/09/2008

Requerimientos• Requerimientos:

– Rapidez en el Desarrollo• Alternativas Para el Desarrollo de Aplicaciones

Enriquecidas para la Web:– Tecnologías Relacionadas con Ajax: Javascript, Dhtml,

Css, XMLHttpRequest, DOM Scripting, Dojo, jQuery, Spry, YUI, etc, etc …

– Silverlight…– Otros vendedores…y….

http://www.gkudos.com

Página 21

08/09/2008

RequerimientosY nuestra selección… (por obvias razones)

– Adobe Flex

ahora si…

<el tutorial />…

http://www.gkudos.com

Página 23

08/09/2008

Prerrequisitos Técnicos

• Flex Builder 3• Google Maps Api for Flex / Flash• Servidor Web (Ejemplo:IIS, Apache / WAMP

http://www.wampserver.com/ )• Datos de Terremotos Mundiales: Tomados

del USDOC/NOAA/NESDIS/NationalGeophysical Data Center (NGDC)http://www.ngdc.noaa.gov/

http://www.gkudos.com

Página 24

08/09/2008

Código Fuente

• Puede descargar el código fuente del taller desde la siguiente ubicación:

http://gkudos.com/web/guest/portfolio/demos/equake

http://www.gkudos.com

Página 25

08/09/2008

1. Instalando Google Maps

• Google Maps API for Flash: This API lets Flex developers embed Google Maps in Flash applications.http://code.google.com/apis/maps/documentation/flash/

• Download: http://maps.googleapis.com/maps/flash/release/sdk.zip

• Google Maps API Key: http://code.google.com/apis/maps/signup.html

• Documentation: http://code.google.com/apis/maps/documentation/

http://www.gkudos.com

Página 26

08/09/2008

1. Instalando Google Maps

http://www.gkudos.com

Página 27

08/09/2008

1. Instalando Google Maps

http://www.gkudos.com

Página 28

08/09/2008

1. Instalando Google Maps

http://www.gkudos.com

Página 29

08/09/2008

• Crear proyecto en Flex Builder• Adicionar la librería de Google Maps (map_flex_1_6.swc)

al proyecto de Flex Builder• Configuración Inicial del Mapa en la Aplicación Flex

1. Instalando Google Maps

http://www.gkudos.com

Página 30

08/09/2008

2. Configurando Controles

• Adición de Controles del Mapa (Zoom, Tipo de Mapa y Posición)

• Centrado del mapa en Un Punto inicial, Modificación del Tipo de Mapa, Selección del Nivel de Zoom

http://www.gkudos.com

Página 31

08/09/2008

3. Carga de Datos y Mostrar Puntos

• Estructura del Xml de los datos de terremotos:

http://www.gkudos.com

Página 32

08/09/2008

3. Carga de Datos y Mostrar Puntos

• Carga de listado de terremotos en un Datagrid

• Selección de Dato en el Datagrid y despliegue del evento en el mapa.

http://www.gkudos.com

Página 33

08/09/2008

3. Carga de Datos y Mostrar Puntos

http://www.gkudos.com

Página 34

08/09/2008

4. Personalización de Markers y Animación

• Personalizar el Color del Marker según la Magnitud del Sismo (Azul: Magnitud Cercana a 1, Rojo: Magnitud cercana a 9.5)

• Adicionar Tooltip al Marker• Hacer animación de movimiento entre Markers

adicionados• Adicionar Botón que Muestre todos los Eventos en

el Mapa• Adicionar Etiqueta que Muestre la Cantidad de

Eventos desplegados en el Datagrid

http://www.gkudos.com

Página 35

08/09/2008

4. Personalización de Markers y Animación

http://www.gkudos.com

Página 36

08/09/2008

5. Filtrar datos en la Interfaz de Usuario

• Modificar la aplicación para que el usuario pueda realizar filtrado de datos según un rango específico de magnitud del Sismo.

http://www.gkudos.com

Página 37

08/09/2008

5. Filtrar datos en la Interfaz de Usuario

http://www.gkudos.com

Página 38

08/09/2008

6. Adicionar Polígonos

• Adicionar un polígono que represente la profundidad del sismo. (El radio del círculo representa la profundidad del sismo)

• Adicionar Botón que permita remover todos los Overlays del Mapa

http://www.gkudos.com

Página 39

08/09/2008

6. Adicionar Polígonos

http://www.gkudos.com

Página 40

08/09/2008

7. Despliegue de Imágenes

• Adicionar Filtro para Desplegar en el Datagrid únicamente los registros que contienen foto

• Mostrar la Foto en una Nueva Ventana al dar click sobre el Marker

http://www.gkudos.com

Página 41

08/09/2008

7. Despliegue de Imágenes

http://www.gkudos.com

Página 42

08/09/2008

8. Despliegue de Video

• Adicionar Filtro para Desplegar en el Datagrid únicamente los registros que contienen video

• Mostrar el Video en una Nueva Ventana al dar click sobre el Marker

• Para ver el Video se utiliza el Componente “Flex Video Player”http://www.fxcomponents.com/?p=29

http://www.gkudos.com

Página 43

08/09/2008

8. Despliegue de Video

http://www.gkudos.com

Página 44

08/09/2008

9. Personalización del Diseño Gráfico

• Modificación Simple de los Colores del Aplicativo utilizando CSS

• Adición de Logos

http://www.gkudos.com

Página 45

08/09/2008

9. Personalización del Diseño Gráfico

<Fin del Tutorial />

3. Aplicaciones Geográficas (Empresariales) Enriquecidas para

Internet

http://www.gkudos.com

Página 48

08/09/2008

Características y Requerimientos del GIS Empresarial

• Integra datos de diferentes áreas de la organización• Soporta las actividades de Misión Crítica de la

Organización• Gran cantidad de Usuarios• Requiere continuidad en la planeación, administración,

soporte y mantenimiento.• Se Integra con diferentes procesos de negocio y

sistemas de la organización• Facilidad de Uso• Bajo Costo

http://www.gkudos.com

Página 49

08/09/2008

Integración de GIS con otros Sistemas

TransportationTransportation

Business Business ApplicationsApplications

Law Law EnforcementEnforcement

PlanningPlanning

RoadsRoads

UtilitiesUtilities

Web Services &Web Services &MessagingMessaging

Tomado de: http://www.gisdevelopment.net/proceedings/mapindia/2008/KeynoteSession1/RajeshMathur.pps

http://www.gkudos.com

Página 50

08/09/2008

Gis Empresarial: Nuestra Propuesta

• Optimización de la inversión en infraestructura para el Soporte GIS a través de la utilización de Software Libre / Código Abierto

• Visualización y análisis de Información Espacial basado en Web Utilizando tecnologías interactivas de Fácil uso. (Ejm: Adobe Flex, Google Earth, Google Maps, etc)

http://www.gkudos.com

Página 51

08/09/2008

GIS Empresarial y Software Libre

Adaptada de “Adding Spatial Smarts to PostgreSQL with PostGIS Paul Ramsey

Refractions Research

4. Demostración de GeoRIA’sKudos Ltda

http://www.gkudos.com

Página 53

08/09/2008

Demostración de GeoRIA’s - Kudos Ltda.

• Visualización de Accidentalidad y Contravenciones de Tránsito http://gkudos.com/web/guest/portfolio/clients/ibague

• Seguimiento a la Ejecución de Contratos de Inversión Social http://gkudos.com/web/guest/portfolio/clients/ue

http://www.gkudos.com

Página 54

08/09/2008

Demostración de GeoRIA’s - Kudos Ltda.

• Visualización de Indicadores de Salud en Colombia http://gkudos.com/web/guest/portfolio/demos

• Visualización de Inversiones de Contratación de Colombia en 3D http://gkudos.com/web/guest/portfolio/demos

5. Preguntas y Conclusiones

Gracias por su Atención

http://gkudos.com