GeoVis est un composant d’analyse visuelle géographique, qui fait partie de la librairie open source BirdEye (http://code.google.com/p/birdeye/). Ce composant permet aux utilisateurs, de créer des interfaces de visualisation de données pour l’analyse de données géo spatiales. La librairie peut être téléchargée depuis l’adresse suivante :

http://code.google.com/p/birdeye/source/checkout

Le composant fournit des cartes géographiques avec divers projections tel que :

• Géographic
• Lambert equal area
• Mollweide
• Miller cylindrical
• WinkelTripel
• EckertIV
• EckertVI
• Goode
• Sinsoidal
• Robinson

Une projection en cartographie est un ensemble de technique permettant de représenter la surface de la terre sur la surface plane d’une carte. Le choix de la projection, dépends de l’usage que l’on veut en faire, car les projections peuvent avoir diverses propriétés :

• projection équivalentes : qui conserve localement les surfaces.
• Projection conforme : qui conserve localement les angles, donc les formes.
• Projection aphylactique : elle n’est ni conforme ni équivalente, mais peut être équidistante, c'est-à-dire conserver les distances sur les méridiens.

Une projection ne peut être à la fois conforme et équivalente.

Dans notre exemple, nous allons utiliser la projection Géographique :

<geomap:WorldMap projection="Geographic">

La balise « WorldMap » produit une carte géographique du monde vide. Il existe deux types de cartes pour l’instant, qui sont :

• WorldMap
• USStates

Il existe différentes région pour chacune de ces cartes qui sont:

• pour le monde :
  • AfricaMap
  • AntarticaMap
  • AsiaMap
  • CISMap
  • EasternMap
  • EuropeMap
  • NorthAfricaMap
  • NorthAmericaMap
  • OceaniaMap
  • SouthAmericaMap
  • SouthEasternMap
  • SouthernMap
  • SubSaharaMap
  • WesternMap
  • WorldMap
• pour les Etats-Unis :
  • ConusMap
  • EastNorthCentralMap
  • EastSouthCentralMap
  • MiddleAtlanticMap
  • MidwestMap
  • MountainMap
  • NewEnglandMap
  • NortheastMap
  • OconusMap
  • PacificMap
  • SouthAtlanticMap
  • SouthMap
  • USStates
  • WestMap
  • WestNorthCentralMap
  • WestSouthCentralMap

Nous allons maintenant ajouter quelques fonctionnalités à notre application, que nous allons expliquer au fur et à mesure.

Nous allons tout d’abord mettre une image d’arrière plan à notre composant, pour cela nous utilisons la balise « RasterLoader » :

<raster:RasterLoader
	projection="Geographic"
	visible="true"
	source="@Embed(source='raster/worldtopobathy.jpg')"
	id="myRaster"
/>

Nous allons ensuite colorier les pays de notre carte, il existe pour cela deux possibilités :-« features » qui est un objet géométrique qui représente un pays, il faut définir cette balise pour chaque pays.

<features:Features foid="SAU" fillItem="0xFF0000" />

Vous verrez ainsi apparaître l’Arabie Saoudite en rouge sur votre carte.

- « choropleth » permet quand à elle de colorier plusieurs pays à la fois selon des schémas implémentés selon ColorBrewer (http://www.colorbrewer.org). ColorBrewer inclus 35 schémas qui peuvent être configurés selon 3 méthodes :

• Sequential
• Diverging
• Qualitative

Référez-vous à ColorBrewer pour les différents types de schémas.

<analysis:Choropleth
	id="choropleth"
	alpha="0.7"
	dataProvider="{myWorldMedals.regions.region.Countries}" 
	foidField="@iso"
	colorField="@gold"
	scheme="RdPu"
	steps="4"
	dataTipFunction="customDataTip"
	highlighted="true"
/>

Ajoutons quelques symboles sur notre carte, il existe la aussi deux méthodes qui sont « Symbol » & « Symbols ».

L’utilisation de symboles permet d’annoter la carte avec une représentation multidimentionelle que ne permet pas la colorisation. Par exemple l’utilisation d’un pie chart permet de présenter de multiples valeurs.

Tout comme pour les « features », la première méthode ne permet de définir un symbole que pour un pays à la fois:

- « Symbol » :

<mx:Repeater id="r" dataProvider="{myWorldMedals.regions.region}">
	<symbols:Symbol id="mySymbol" key="{r.currentItem.@iso}" >
		<quarks:PieSpark
			id="PS1" visible="true"
			dataProvider="{r.currentItem.Total.tot.medal}"
			dataField="@number"
			gradientColors="{medalsColors}"
			width="{sizePie(r.currentItem.@total)}"
			height="{sizePie(r.currentItem.@total)}"
			showDataTips="true"
			dataTipFunction="custDT"
		/>
	</symbols:Symbol>
</mx:Repeater>

Comme le montre le code, il est possible d’utiliser un répéteur afin de s’épargner des lignes de codes inutiles.

-« Symbols » quand à lui permet d’afficher un même type de symbole sur plusieurs pays à la fois :

<symbols:Symbols
	id="mySymbols"
	dataProvider="{myWorldMedals.regions.region.Countries}"
	foidField="@iso"
	itemRenderer="renderers.MedalsRenderer"
	visible="true"
/>

Dans notre exemple, nous utilisons un « itemRenderer » pour présenter les médailles d’or de chaque pays. Dans votre « itemrenderer » vous pouvez bien entendu mettre tout ce que vous voulez (images, charts, etc…).

Ces deux méthodes placent les symboles au centre des pays, mais il existe également une méthode pour placer des objets selon la latitude et la longitude :

<locators:LatLong
	id="myLocators"
	visible="true"
	lat="40.78333333"
	long="-73.96666667"
>
	<mx:Label color="0x777777" text="New York" /> 
</locators:LatLong>

Nous allons également tracer sur notre carte le trajet parcouru par la flemme olympic, pour ce faire, nous utilisons les « Flow » :

<analysis:Flow
	id="johFlows"
	dataProvider="{myFlows}"
	fromField="@fromID"
	toField="@toID"
	showDataTips="true"
	valueField="@desc"
	fill="0xFF6666"
	visible="true"
	includeInLayout="false"
/>

Nous allons finalement placer une légende correspondant à la coloration de notre carte :

<mx:Canvas
	width="100%"
	horizontalScrollPolicy="off"
>
	<surrounds:Legend
		target="{choropleth}"
		x="{this.width/2-360}"
		y="780"
		width="720"
		height="20"
	/>
</mx:Canvas>

Ce composant évolu très rapidement, c’est pourquoi je vous conseil de visiter l’explorateur régulièrement à l’adresse suivante :

http://birdeye.googlecode.com/svn/trunk/geovis/demo/GeoVisExplorer.html

Ainsi que les explorateurs des autres composants de la librairie :

http://birdeye.googlecode.com/svn/trunk/ravis/RaVisExamples/example-binaries/RaVisExplorer.html

http://birdeye.googlecode.com/svn/trunk/qavis/examples/bin/QaVisExplorer.html

Je vous joins le projet de l’application traitée dans notre exemple.