Como hacer un sencillo mapa en flex sin usar APIs de GoogleMap, Yahoo Maps, u otros...

43 views
Skip to first unread message

Lacsanch

unread,
Feb 22, 2009, 12:54:47 AM2/22/09
to Flex AIR Venezuela
Hola:
Tengo una preguntota del tamaño del mundo, apenas soy nueva en Flex
pero me parece muy interesante, quiero saber si se puede crear un mapa
sin necesidad de usar Sistemas de Informacion Geografica como
MapServer o ArcGIS un mapa sencillo que muestre al rededor de 100
sitios de interes, por ejemplo que al posicionarse en un lugar
aparesca el nombre y la foto de este.
Podrian ayudarme? Excelente sitio sigan asi.
Disculpen si es una pregunta muy novata.

Rafael Ochoa: Flex Air Venezuela

unread,
Feb 25, 2009, 9:00:46 AM2/25/09
to Flex AIR Venezuela
Hola,
Muchas gracias por tu pregunta, lo importante es tener el interes y
que bueno que lo tienes.
Disculpa la tardanza.
Referente a tu pregunta, para utilizar ArcGIS tienes un API para Flex
que realiza esta conexión que necesitas. En este Link encontraras un
video de como puedes utilizar el API.
http://resources.esri.com/arcgisserver/apis/flex/index.cfm?fa=home


Cualquier cosa no dudes en preguntar.
Mucha suerte.

Lacsanch

unread,
Feb 25, 2009, 7:09:10 PM2/25/09
to Flex AIR Venezuela
Hola una mega pregunta, gracias por responderme, a una API como es la
de Arc se le puede acer modificaciones? ya sea cambiar las imagenes o
cuadritos que trae por defecto?
Tu has usado arcggis? o ago asi como mapserver?
otra duda lo que pasa es que quiero hacer un mapa como este
http://www.ibge.gov.br/paisesat/main.php
m imagino que es flex y php y flash pero no estoy segura por donde
empezar!!!




On 25 feb, 15:00, "Rafael Ochoa: Flex Air Venezuela"
<rafaeloch...@gmail.com> wrote:
> Hola,
> Muchas gracias por tu pregunta, lo importante es tener el interes y
> que bueno que lo tienes.
> Disculpa la tardanza.
> Referente a tu pregunta, para utilizar ArcGIS tienes un API para Flex
> que realiza esta conexión que necesitas. En este Link encontraras un
> video de como puedes utilizar el API.http://resources.esri.com/arcgisserver/apis/flex/index.cfm?fa=home

Lacsanch

unread,
Feb 25, 2009, 7:35:44 PM2/25/09
to Flex AIR Venezuela
http://www.ibge.gov.br/paisesat/main.php UN MAPA asi quiero hacer me
imagino usan algo como mapserver o arcgis verdad aparte de
tecnologias como xml php o algo asimilar? si alguien sabe como hacer
esto ayuda!!!

On 25 feb, 15:00, "Rafael Ochoa: Flex Air Venezuela"
<rafaeloch...@gmail.com> wrote:
> Hola,
> Muchas gracias por tu pregunta, lo importante es tener el interes y
> que bueno que lo tienes.
> Disculpa la tardanza.
> Referente a tu pregunta, para utilizar ArcGIS tienes un API para Flex
> que realiza esta conexión que necesitas. En este Link encontraras un
> video de como puedes utilizar el API.http://resources.esri.com/arcgisserver/apis/flex/index.cfm?fa=home

Juan Manrique

unread,
Feb 25, 2009, 8:33:57 PM2/25/09
to Flex AIR Venezuela
Saludos Lacsanch.

Disculpa la tardanza para responder y gracias por registrarte como
miembro del grupo.

Muy buena idea mandar un ejemplo de algo parecido a lo que quieres
hacer porque asi sabemos que es lo que necesitas mas acertadamente. Me
parece que lo que necesitas definitivamente es el componente ImageMap
perteneciente al famoso FlexLib de Google Code. Este FlexLib es una
libreria que contiene un monton de componentes super interesantes que
han sido desarrollados por un grupo de flexer de muy alto nivel y de
varias partes del mundo, quienes han puesto sus codigos de manera
abierta en esta libreria. Uno de esos componentes es el ImageMap,
desarrollada por uno de los mejores flexers que he visto: Doug McCune.
Este componente te permite tomar una imagen y trazar zonas
individuales sobre este, de manera que puedas agregar eventos sobre
dichas zonas de manera especifica para cada una y asi poder
diferenciar las zonas. De esta forma, podras agregarle a cada una el
evento, por ejemplo, click, y asi poder desplegar un cuadro
informativo como el del ejemplo que mandaste. Aqui te mando el ejemplo
oficial del ImageMap para que veas que es exactamente lo que buscas (o
al menos muy cercano): http://flexlib.googlecode.com/svn/trunk/examples/ImageMap/ImageMap_Sample.swf.

Aqui te mando el enlace a la libreria que te podras descargar de
manera gratuita, utilizarlo en tu aplicacion e inclusive modificar el
codigo a tu conveniencia: http://code.google.com/p/flexlib/downloads/list

Y finalmente, este es el api de la libreria, para que puedas entender
los componentes como si estuvieras leyendo la ayuda del Flex Builder:
http://flexlib.googlecode.com/svn/trunk/docs/flexlib/controls/ImageMap.html

Te recomiendo que le eches un ojo a todos los componentes, ya que son
sumamente interesantes. Te mando tambien el enlace a la pagina de
ejemplos de todos los componentes del FlexLib para que los veas:
http://code.google.com/p/flexlib/wiki/ComponentList

Me despido esperando que te sirva de algo mi respuesta y que ademas
nos cuentes como te fue con las posibles soluciones que aqui te
recomendamos. No dejes de escribir cuando tengas dudas.

Saludos. Juan Carlos


On 25 feb, 20:35, Lacsanch <lacsa...@hotmail.com> wrote:
> http://www.ibge.gov.br/paisesat/main.phpUN MAPA asi quiero hacer me
> > > Disculpen si es una pregunta muy novata.- Ocultar texto de la cita -
>
> - Mostrar texto de la cita -

Juan Manrique

unread,
Feb 25, 2009, 8:37:31 PM2/25/09
to Flex AIR Venezuela
Se me olvido comentar que el componente ImageMap no usa ningun api de
Google ni Yahoo ni ningun otro. Tampoco utiliza ningun servidor de
datos como lo hace el ArcGIS. Asi que los datos de los mapas o
cualquier otra cosa tendra que ser provistos por ti. Saludos.

Juan Carlos.


On 25 feb, 21:33, Juan Manrique <juca...@gmail.com> wrote:
> Saludos Lacsanch.
>
> Disculpa la tardanza para responder y gracias por registrarte como
> miembro del grupo.
>
> Muy buena idea mandar un ejemplo de algo parecido a lo que quieres
> hacer porque asi sabemos que es lo que necesitas mas acertadamente. Me
> parece que lo que necesitas definitivamente es el componente ImageMap
> perteneciente al famoso FlexLib de Google Code. Este FlexLib es una
> libreria que contiene un monton de componentes super interesantes que
> han sido desarrollados por un grupo de flexer de muy alto nivel y de
> varias partes del mundo, quienes han puesto sus codigos de manera
> abierta en esta libreria. Uno de esos componentes es el ImageMap,
> desarrollada por uno de los mejores flexers que he visto: Doug McCune.
> Este componente te permite tomar una imagen y trazar zonas
> individuales sobre este, de manera que puedas agregar eventos sobre
> dichas zonas de manera especifica para cada una y asi poder
> diferenciar las zonas. De esta forma, podras agregarle a cada una el
> evento, por ejemplo, click, y asi poder desplegar un cuadro
> informativo como el del ejemplo que mandaste. Aqui te mando el ejemplo
> oficial del ImageMap para que veas que es exactamente lo que buscas (o
> al menos muy cercano):http://flexlib.googlecode.com/svn/trunk/examples/ImageMap/ImageMap_Sa....
>
> Aqui te mando el enlace a la libreria que te podras descargar de
> manera gratuita, utilizarlo en tu aplicacion e inclusive modificar el
> codigo a tu conveniencia:http://code.google.com/p/flexlib/downloads/list
>
> Y finalmente, este es el api de la libreria, para que puedas entender
> los componentes como si estuvieras leyendo la ayuda del Flex Builder:http://flexlib.googlecode.com/svn/trunk/docs/flexlib/controls/ImageMa...
>
> Te recomiendo que le eches un ojo a todos los componentes, ya que son
> sumamente interesantes. Te mando tambien el enlace a la pagina de
> ejemplos de todos los componentes del FlexLib para que los veas:http://code.google.com/p/flexlib/wiki/ComponentList
>
> Me despido esperando que te sirva de algo mi respuesta y que ademas
> nos cuentes como te fue con las posibles soluciones que aqui te
> recomendamos. No dejes de escribir cuando tengas dudas.
>
> Saludos. Juan Carlos
>
> On 25 feb, 20:35, Lacsanch <lacsa...@hotmail.com> wrote:
>
>
>
> >http://www.ibge.gov.br/paisesat/main.phpUNMAPA asi quiero hacer me
> > imagino usan algo como mapserver o  arcgis verdad aparte de
> > tecnologias como xml php o algo asimilar? si alguien sabe como hacer
> > esto ayuda!!!
>
> > On 25 feb, 15:00, "Rafael Ochoa: Flex Air Venezuela"
>
> > <rafaeloch...@gmail.com> wrote:
> > > Hola,
> > > Muchas gracias por tu pregunta, lo importante es tener el interes y
> > > que bueno que lo tienes.
> > > Disculpa la tardanza.
> > > Referente a tu pregunta, para utilizar ArcGIS tienes un API para Flex
> > > que realiza esta conexión que necesitas. En este Link encontraras un
> > > video de como puedes utilizar el API.http://resources.esri.com/arcgisserver/apis/flex/index.cfm?fa=home
>
> > > Cualquier cosa no dudes en preguntar.
> > > Mucha suerte.
>
> > > On 23 feb, 00:54, Lacsanch <lacsa...@hotmail.com> wrote:
>
> > > > Hola:
> > > > Tengo una preguntota del tamaño del mundo, apenas soy nueva en Flex
> > > > pero me parece muy interesante, quiero saber si se puede crear un mapa
> > > > sin necesidad de usar Sistemas de Informacion Geografica como
> > > > MapServer o ArcGIS un mapa sencillo que muestre al rededor de 100
> > > > sitios de interes, por ejemplo que al posicionarse  en un lugar
> > > > aparesca el nombre y la foto de este.
> > > > Podrian ayudarme? Excelente sitio sigan asi.
> > > > Disculpen si es una pregunta muy novata.- Ocultar texto de la cita -
>
> > - Mostrar texto de la cita -- Ocultar texto de la cita -

Lacsanch

unread,
Feb 25, 2009, 9:05:18 PM2/25/09
to Flex AIR Venezuela
Muchisimas gracias de verdad empezare a checarlo!!!! Cuando tenga la
aplicacion se las mostrare, tambien seguire en contacto con este grupo
la verdad gracias!!! Cuando sepa mas de flex los ayudare.
> > >http://www.ibge.gov.br/paisesat/main.phpUNMAPAasi quiero hacer me

Rafael Ochoa: Flex Air Venezuela

unread,
Feb 25, 2009, 9:15:55 PM2/25/09
to Flex AIR Venezuela
Hola Lacsanch,

Estuve viendo el link que envias, no he conseguido algo que requiera
el uso de un servidor de mapas o algo por el estilo,
todo depende del tiempo que tengas para realizar el proyecto, porque
para lograr algo que lo que muestras en el enlace podrias hacerlo
usando FXG que es lo nuevo de Flex 4 o con Degrafa, donde representas
en coordenadas los paises asi tu aplicación se carga mucho mas rapido
y es tiene un mejor rendimiento.

Yo utilizo Degrafa la verdad me parece bastante facil tiene ejemplos
bastante faciles de entender ademas del el apoyo de Adobe.

Te anexo un ejemplo con un mapa con Degrafa que me llamo la atención.

La idea de esto es que realices los trazos de un mapa en Fireworks,
puedes bajar una version de prueba en la pagina de Adobe, luego
exportas a SVG y realizas las composiciones en degrafa con estas
coordenadas. Lo que obtienes con esto son componentes visuales que
puedes manipular a tu antojo sin perder rendimiento.

Asi coneguirias el "rollover" cuando estas en un pais especifico.

Ademas con el uso del SVG, o dibujo en vectores puedes realizar el
acercamiento que se demuestra en el link que nos envias.

El efecto del panel cuando muestras la informacion lo consigues
bastante facil con un efecto en "showEffect".

Estos paneles y la barra superior se realizan utilizando un estilo en
CSS que anexas a tu aplicacion.

No se si me estoy extendiendo demasiado o me estoy complicando pero lo
que quiero es que puedas darte cuenta que no es tan complicado una vez
descompones la aplicacion en varias partes.

Espero haberte ayudado y gracias por el interes.
Esperaremos esa aplicacion cuando la termines.

_
Rafael Ochoa











Enlaces
Degrafa Maps
http://www.degrafa.org/source/DegrafaMapSample/DegrafaMapDemo.html
Todo lo que necesitas referente a las superficies del mapa esta en
index.mxml comenzando en <Degrafa:GeometryGroup id="mapLayer"

Mapas del mundo en SVG
http://commons.wikimedia.org/wiki/Category:Blank_SVG_maps_of_the_world

FXG de flex 4
http://www.philterdesign.com/blog/2008/09/fxg_flex_graphics_the_missing_1.html
FXG usando Fireworks CS4
http://elromdesign.com/blog/2008/11/03/flex-40-gumbo-–-tutorial-setting-workarea-and-using-firework-cs4-and-flex-4-to-build-the-iphone/


Lacsanch

unread,
Feb 25, 2009, 9:14:08 PM2/25/09
to Flex AIR Venezuela
Orale muchas gracias OTRA MEGAPREGUNTA!!!
Despues podria programar cosas verdad como busquedas y poner ventanas
emergentes m imagino verdad?

On 26 feb, 02:37, Juan Manrique <juca...@gmail.com> wrote:
> > >http://www.ibge.gov.br/paisesat/main.phpUNMAPAasi quiero hacer me

Lacsanch

unread,
Feb 26, 2009, 12:07:56 AM2/26/09
to Flex AIR Venezuela
Muy interesante disculpa mi ignorancia jeje pero estube probando este
codigo
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" />
<ImageMap xmlns="flexlib.controls.source="c:\\usa.jpg""
showToolTips="true"
shapeClick="navigateToURL(new URLRequest
(event.href),event.linkTarget)" >
<map>
<area alt="WA" shape="POLY"
coords="85,11,133,11,134,42,114,42,100,47,96,45,91,48,83,40,76,40,75,29,70,23,71,18,82,20,87,18"
href="http://en.wikipedia.org/wiki/Washington" target="_blank"/>
<area alt="OR" shape="POLY"
coords="76,40,83,40,90,48,96,45,101,47,115,43,134,43,138,46,133,57,134,84,72,84,71,71,76,56"
href="http://en.wikipedia.org/wiki/Oregon" target="_blank"/>
</map>
</ImageMap>
</mx:Application>
Para empezar a familiarizarme con el Flex y la libreria que me paso
Juan Manrique, de google pero me marca un error la verdad no le hayo
porque el error es: THE MARKUP IN THE DOCUMENT FOLLOWING THE ROOT
ELEMENT MUST BE WELL FORMED. Me imagine que el error era en esta
primera parte <ImageMap xmlns="flexlib.controls.source="c:\
\usa.jpg"" showToolTips="true"
shapeClick="navigateToURL(new URLRequest
(event.href),event.linkTarget)" > porque el > me aparecia rojito y por
eso en source="c:\\usa.jpg"" le puse dos Comillas "". Pero me sigue
marcando el error con una o con 2.
Estuve checando loque me respondiste Rafael muy interesante la verdad
si te entendi algunas partes jejeje de verdad muchas gracias. Donde
descargo el flex 4? LA verdad aun me estoy familiarizando con flex
pero espero entenderle pronto.
Aydua. y muchas gracias!!!



On 25 feb, 20:15, "Rafael Ochoa: Flex Air Venezuela"
> Degrafa Mapshttp://www.degrafa.org/source/DegrafaMapSample/DegrafaMapDemo.html
> Todo lo que necesitas referente a las superficies del mapa esta en
> index.mxml comenzando en  <Degrafa:GeometryGroup id="mapLayer"
>
> Mapas del mundo en SVGhttp://commons.wikimedia.org/wiki/Category:Blank_SVG_maps_of_the_world
>
> FXG de flex 4http://www.philterdesign.com/blog/2008/09/fxg_flex_graphics_the_missi...
> FXG usando Fireworks CS4http://elromdesign.com/blog/2008/11/03/flex-40-gumbo-–-tutorial-setting-workarea-and-using-firework-cs4-and-flex-4-to-build-the-iphone/

Juan Manrique

unread,
Feb 27, 2009, 1:25:38 PM2/27/09
to Flex AIR Venezuela
Saludos.

La forma mas facil para correr el ejemplo es la siguiente:
1.- crea un nuevo proyecto Flex en el Flex Builder y colocale el mismo
nombre del archivo mxml del ejemplo del ImageMap.
2.- sustituye el archivo mxml de la aplicacion principal que te genero
el Flex Builder con el archivo mxml que trae el ejemplo.
3.- en la carpeta lib del proyecto que acabas de crear en Flex
Builder, copia la libreria ".swf" del FlexLib que se encuentra en
"flexlib-.2.4\bin" de la carpeta del FlexLib que descomprimiste del
archivo zip.
4.- ahora puedes ejecutar el ejemplo como una aplicacion Flex.

Estos fueron unos de los pasos que hice y me funciono a la primera. En
caso de que sigas con inconvenientes, escribe de nuevo por aqui.

Saludos. Juan Carlos.


On 26 feb, 01:07, Lacsanch <lacsa...@hotmail.com> wrote:
> Muy interesante disculpa mi ignorancia jeje pero estube probando este
> codigo
> <?xml version="1.0" encoding="utf-8"?>
> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
> layout="absolute" />
>         <ImageMap xmlns="flexlib.controls.source="c:\\usa.jpg""
> showToolTips="true"
>                 shapeClick="navigateToURL(new URLRequest
> (event.href),event.linkTarget)" >
>     <map>
>      <area alt="WA" shape="POLY"
> coords="85,11,133,11,134,42,114,42,100,47,96,45,91,48,83,40,76,40,75,29,70,­23,71,18,82,20,87,18"
> href="http://en.wikipedia.org/wiki/Washington" target="_blank"/>
>      <area alt="OR" shape="POLY"
> coords="76,40,83,40,90,48,96,45,101,47,115,43,134,43,138,46,133,57,134,84,7­2,84,71,71,76,56"
> > FXG usando Fireworks CS4http://elromdesign.com/blog/2008/11/03/flex-40-gumbo-–-tutorial-setting-workarea-and-using-firework-cs4-and-flex-4-to-build-the-i­phone/- Ocultar texto de la cita -

Lacsanch

unread,
Mar 2, 2009, 10:35:13 PM3/2/09
to Flex AIR Venezuela
Muchas gracias ya me sirve ese mapa, seguire con ese proyecto, pero
por lo pronto me urge tenerlo ya me lo estan pidiendo jajaja asi que
usare por lo pronto la api de Virtual Earth podrian decirme cual es
una api de flex que lo pueda usar !?!? podrian ayudarme algun api de
flex para el virtual earth!?

Graicas.

Lacsanch

unread,
Mar 2, 2009, 11:23:24 PM3/2/09
to Flex AIR Venezuela
Hola como podria hacer que se mueva el mapa y hacer zoom en imageMap
tal como lo hace virtual earth? Lo tengo en Flash el zoom maximo y
minimo, y el arrastre pero no se si funcionara en el flex, lo hice en
action script 2, ayuda porfa!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Juan Manrique

unread,
Mar 4, 2009, 9:50:45 AM3/4/09
to Flex AIR Venezuela
Saludos.
Sinceramente nunca he trabajado con zoom en componentes flex. Tengo
idea de como hacerlo trabajando con los porcentajes del ancho y alto
de los componentes pero tengo que sentarme a hacer un ejemplo para
poder explicarte luego como hacerlo. Sin embargo, y ya que lo que
tienes que hacer es con mapas, te dejo unos enlaces interesantes sobre
zoom en mapas con action script. Es un componente llamado
MultiScaleImage que pertenece a un paquete de llamado Open-zoom, que
sirve para facilitar el manejo de zoom de imagenes y otros objetos. No
utilizan virtual earth pero tal vez podria servirte de algo. En lo que
tenga un chance, me sentare con el ejemplo de zoom para luego
explicarlo en otra oportunidad. Aqui te dejo los enlaces y espero que
te sirvan de algo. No dejes escribir cualquier otra duda y esperamos
que nos cuentes sobre tu experiencia con lo que estas haciendo.
Saludos.

Ejemplo del MultiScaleImage: http://gasi.ch/examples/2008/12/08/flex-multiscaleimage-component/transformers/

http://gasi.ch/examples/2008/12/08/flex-multiscaleimage-component/out-of-the-box/
Pagina de Open-zoom donde esta el componente MultiScaleImage:

http://code.google.com/p/open-zoom/source/browse/trunk/src/main/flash/org/openzoom/flex/components/MultiScaleImage.as

Api web del MultiScaleImage: http://docs.openzoom.org/framework/org/openzoom/flex/components/MultiScaleImage.html

Un blog donde hacen un post especial sobre este componente:
http://gasi.ch/blog/flex-multiscaleimage-component/
> > > > - Mostrar texto de la cita -- Ocultar texto de la cita -
Reply all
Reply to author
Forward
0 new messages