Cílem je vytvořit aplikaci, která bude zobrazovat statickou mapu využívající mapových podkladů OSS projektu OpenStreetMap.
Zdrojový kód, který zobrazí statickou mapu (tedy mapu, se kterou není možné interagovat pomocí myši) může vypadat následovně:
example01.hx
import flash.display.Sprite;
import flash.events.Event;
import map.Canvas;
import map.LngLat;
import map.TileLayer;
import map.MapService;
class Example01 extends Sprite {
var canvas:Canvas;
static public function main()
{
var t:Example01 = new Example01();
flash.Lib.current.stage.scaleMode = flash.display.StageScaleMode.NO_SCALE;
flash.Lib.current.stage.addEventListener(Event.RESIZE, t.stageResized);
flash.Lib.current.stage.addChild(t);
}
function new()
{
super();
canvas = new Canvas(false);
canvas.move(0, 0);
stageResized(null);
canvas.setZoom(3);
canvas.setCenter(new LngLat(16.1234, 49.1234));
canvas.addLayer(new TileLayer(new OpenStreetMapService(), 8));
canvas.initialize();
addChild(canvas);
}
public function stageResized(e:Event)
{
canvas.setSize(flash.Lib.current.stage.stageWidth, flash.Lib.current.stage.stageHeight);
}
}
Nejprve vytvoříme instanci objektu Canvas (parametr false zakazuje interaktivitu pomocí myši), poté nastavíme jeho umístění a rozměry pomocí metod move() a setSize(). Následuje nastavení úrovně přiblížení (hodnota 4 odpovídá přiblížení o 4 stupně oproti výchozí hodnotě definované v MapService) a souřadnic středu mapy. V dalším kroku přidáme mapovou vrstvu složenou z dlaždic poskytovaných projektem OpenStreetMap a inicializujeme Canvas.
Metoda stageResized() zajistí roztažení mapy přes celou plochu Flash objektu.
Abychom mohli přeložit aplikaci, je nutné mít nainstalován OpenSource překladač Haxe. Poté stačí do libovolné složky rozbalit knihovní funkce (umístěné v podadresáři haxemaps) a zadat
> haxe -swf output.swf -swf-version 9 -main Example01 -swf-header 800:600:25:ffffff -cp haxemaps
Soubor example01.hx musí obsahovat třídu Example01, která obsahuje statickou metodu main starající se o vytvoření scény.
V případě ladění je k dispozici přepínač TILE_DBG, který u každé dlaždice zobrazí její relativní pozici a dále zvýrazní obrysy a její střed.
> haxe -swf output.swf -swf-version 9 -main Example01 -swf-header 800:600:25:ffffff -cp haxemaps -D TILE_DBG
K vložení mapy do HTML kódu lze využít jednoduchou knihovnu projektu SWFObject. Jinou možností je vložit statický kód, avšak SWFObject nabízí možnost přizpůsobit vložený kód prohlížeči, detekovat neexistující Flash player případně upozornit na jeho starší verzi apod.
<html>
<head>
<title>Map test</title>
<script type="text/javascript" src="swfobject.js"></script>
</head>
<body>
<div id="mapobj">Pro správnou funkci je vyžadován Flash player</div>
<script type="text/javascript">
swfobject.embedSWF("example01.swf", "mapobj", 400 /*sirka*/, 300 /*vyska*/, "9.0.0", null,null,
{'allowFullScreen':'true','allowScriptAccess':'always'});
</script>
</body>
</html>