Integración de Adobe Flex y Google Maps: Aplicaciones Geográficas Enriquecidas para Internet

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)


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.


Página 5

08/09/2008

Personas

Aplicaciones

Software

Equipos

DatosRequieren

Accesados

Canales de Comunicación

Componentes de un SIG


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


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


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


Página 9

08/09/2008

SIG en la WEB: 1997

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


Página 10

08/09/2008

SIG en la WEB: 2008

Google Earth


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)


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


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.


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


Página 18

08/09/2008

Descripción del Problema

• Página Actual de Resultados


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


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


Página 21

08/09/2008

RequerimientosY nuestra selección… (por obvias razones)

– Adobe Flex

ahora si…

<el tutorial />…


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/


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


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/


Página 26

08/09/2008



Página 27

08/09/2008



Página 28

08/09/2008



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



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


Página 31

08/09/2008

3. Carga de Datos y Mostrar Puntos

• Estructura del Xml de los datos de terremotos:


Página 32

08/09/2008


• Carga de listado de terremotos en un Datagrid

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


Página 33

08/09/2008



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


Página 35

08/09/2008

4. Personalización de Markers y Animación


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.


Página 37

08/09/2008

5. Filtrar datos en la Interfaz de Usuario


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


Página 39

08/09/2008

6. Adicionar Polígonos


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


Página 41

08/09/2008

7. Despliegue de Imágenes


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


Página 43

08/09/2008

8. Despliegue de Video


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


Página 45

08/09/2008

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

3. Aplicaciones Geográficas (Empresariales) Enriquecidas para

Internet


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


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


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)


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


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


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

Integración de Adobe Flex y Google Maps: Aplicaciones Geográficas Enriquecidas para Internet

Technology

Transcript of Integración de Adobe Flex y Google Maps: Aplicaciones Geográficas Enriquecidas para Internet