Google Maps component per Flash
Venerdì 25 Gennaio, 2008
Google ha reso disponibile le API - in Javascript - per inserire le sue mappe in qualsiasi sito Web. Viediamo come realizzare la stessa cosa con Flash!
Partiamo da un componente gratuito, UMAP (Universal ActionScript 3.0 Mapping API - integrated with Google Maps), sviluppato da AFComponents, una società verticalizzata su componenti per Flash/Flex davvero interessanti e a prezzi accessibili. Sul sito, dove è necessario registrarsi per usufruire dei download gratuiti, sono presenti anche le versioni di UMAP per ActionScript 2.0: G MAP Ver.2.6.1. In questo caso noi analizzeremo la versione 0.4 Beta di UMAP per ActionScript 3.0 (all'interno del pacchetto c'è anche il componente Flex). Questa che andremo a vedere è - evidentemente - una versione beta e manca, quindi, di alcune funzionalità presenti nella versione per Actionscript 2.0 (G MAP Ver.2.6.1). Tuttavia, gurdando al futuro, mi sembra più interessante focalizzare l'attenzione su questa release; le ho provate entrambe e, nonostante la maggiore completezza della release per Actionscript 2.0, la versione beta per Actionscript 3.0 è notevolmente più performante.
Tra le sue features troviamo:
- Support for custom map tiles and providers
- Updated loading algorithms for faster tile loading
- Flash / Flex versions
- KML Support
- Advanced content layering
- FLA-Based Map Controls
- Vector shape overlays
- Extended Info Window styling
Una volta installato il componente UMAP tramite Adobe Extension Manager troveremo quattro nuovi componenti che fanno tutti parte di UMAP. I controlli usati in Google Maps, come lo Zoom (Zoom Control), la scelta del tipo di mappa (Map Type Control) e il cursore per gli spostamenti (Position Control), sono qui realizzati come componenti/elementi esterni. Il componente principale è, ovviamente, UMap. A questo possono essere aggiungi tutti gli altri se lo desideriamo. Per farlo, tuttavia, bisogna scrivere qualche riga di codice...
> Per la documentazione clicca qui: attenzione che la documentazione contiene qualche errore e tutorial sono assenti!
Vediamo un primo esempio. Apriamo un nuovo filmato Flash e trasciniamo il componente UMap e il componente Zoom Control. Nominiamo le istanze di questi rispettivamente umap e zoom.
 |
 |
| Componenti sullo Stage | Prova filmato |
Non è necessario porre il componente Zoom Control sopra il componente UMAP. Quando proverete il filmato lo Zoom sarà posizionato automaticamente sulla sinistra del componente principale. Il codice Actionscript da usare per "aggiungere" il componente Zoom è il seguente:
-
umap.addControl(zoom);
La stessa cosa va fatta se vogliamo completare la vista come normalmente viene mostrata su Google Maps.
 |
 |
| Componenti sullo Stage | Prova filmato |
Anche in questo caso nominare le istanze degli altri due componenti e scrivere il seguente codice:
-
umap.addControl(zoom);
-
umap.addControl(maptype);
-
umap.addControl(mapposition);
Chi non è pratico di Actionscript deve stare attento a qualche errore di "battitura" nella documentazione - come accennavo sopra. Dopotutto è un prodotto gratuito e in beta!
Per aprere una finestra (Window) personalizzata, ad esempio, il codice corretto è:
 |
 |
-
import com.afcomponents.umap.core.UMap;
-
import com.afcomponents.umap.styles;
-
import com.afcomponents.umap.styles.InfoWindowStyle;
-
import com.afcomponents.umap.types.Size;
-
//
-
umap.addControl (zoom);
-
umap.addControl (maptype);
-
umap.addControl (mapposition);
-
//
-
// definisce lo stile della Window
-
var style:InfoWindowStyle = new InfoWindowStyle();
-
style.strokeAlpha = 0.8;
-
style.size = new Size(200,100);
-
style.autoSize = InfoWindowStyle.AUTO_SIZE_NONE;
-
style.tailSize.height = 30;
-
style.tailOffset = 0.10;
-
style.contentStyle.html = true;
-
style.contentStyle.styleSheet = new StyleSheet();
-
style.contentStyle.styleSheet.setStyle ("html", {fontFamily:"arial", fontSize:12, color:"#555555"});
-
// parametri Window
-
var param:Object = new Object();
-
param.title = "Titolo Finestra";
-
param.content = "Contenuto...<br />in stile<br /><b><u>HTML</u></b>!";
-
// apre la Window
-
umap.openInfoWindow (param, style);
Ovviamente è possibile usare il componente UMAP, e gli altri, anche direttamente da codice, senza cioè trascinarli dalla finestra dei componenti nello stage. Ed è anche possibile aggiungere i Marker (o Ballon) per indicare luoghi sulla mappa.
 |
 |
-
import com.afcomponents.umap.core.UMap;
-
import com.afcomponents.umap.styles.GeometryStyle;
-
import com.afcomponents.umap.overlays.Marker;
-
import com.afcomponents.umap.types.LatLng;
-
//
-
var map:UMap = new UMap();
-
map.setSize (300, 300);
-
this.addChild (map);
-
//
-
var m:Marker = new Marker({name:"Titolo Marker",position:new LatLng(10, 10), description:"Questo è il testo del corpo del Marker"}, {fill:GeometryStyle.RGB, fillRGB:0xffcc00});
-
map.addOverlay (m);
Torneremo a parlare presto di questo componente, in attesa anche di altri rilasci - visto che è una beta!
In realtà tu hai ragione, e non sei il primo a...
Advanced Flash Components Blog » Blog Archive » Stuff is Happening at AFC ha detto:
[...] Undolog [...]