Animovaná mapa s JavaScriptem

V současné době se rozmanitost aplikací, které můžeme na webu najít, pohybuje od nejjednodušších po nejsložitější, což může představovat různé scénáře, kterých je díky novým technologiím mnohem snazší dosáhnout.

Jedním z těchto mnoha scénářů je možnost znázornění tras na mapě, a přestože to může znít jako úkol, jehož splnění nám může trvat týdny, díky knihovně amCharts můžeme to udělat bez nejmenšího možného úsilí.

HTML kód

Náš kód HTML Bude to docela jednoduché, bude to mít standardní strukturu a co je důležité v tom udělat, je vytvořit inkluzi knihovny amChartsstejně jako naše šablona stylů a soubor .js. kde budeme dělat většinu práce:

 Animovaná mapa s JavaScriptem

Jedna ze základních částí naší HTML je přidat div, který bude mít ID, které použijeme k vykreslení naší mapy, a to je to, které propojíme v našem .js, v tomto případě tomu říkáme animovaná mapa.

Stylový list

Náš styl bude velmi jednoduchý, definujeme pouze šířku a výšku pro zobrazení naší mapy, v tomto případě to uděláme na celou obrazovku:

 tělo, html {šířka: 100%; výška: 100%; okraj: 0} #AnimationMap {šířka: 100%; výška: 100%; }

Jakmile to bude hotové, předáme jádro našeho příkladu, kterým by byl kód JavaScript.

JavaScriptový kód

Nejprve musíme inicializovat naši mapu pomocí této funkce makeChart a v něm definovat obecné možnosti, protože s touto funkcí můžeme nejen vytvářet mapy, ale také různé grafiky všeho druhu. Za tímto účelem definujeme typ, model mapy, úrovně přiblížení a dokonce i písmo pro texty:

 AmCharts.makeChart ("Animatedmap", {type: "map", fontSize: 20, balloon: {horizontalPadding: 20, verticalPadding: 15}, creditsPosition: "top-right", dataProvider: {map: "worldLow", zoomLevel: 3,5, zoomLongitude: -55, zoomLatitude: 42,});

Kromě toho můžeme upravit další možnosti mapy, jako jsou barvy, čáry a doba trvání animací, které můžeme použít podle mapy, kterou jsme vybrali, v tomto případě se jedná o mapu, která představuje letové mapy, takže můžeme jak rychle to může jít ikona letadla a jak daleko můžete stát mezi bodem a bodem.

 areaSettings: {unlistedAreasColor: "# 9bc5f5"}, imagesSettings: {color: "# 4e985c", rollOverColor: "# 4e985c", selectedColor: "# 4e985c", pauseDuration: 0.2, animationDuration: 2.5, adjustAnimationSpeed: {barva: "# 4e985c", alfa: 0,4}

Jakmile jsme spokojeni s možnostmi, které jsme umístili, musíme se jen podívat, jak naše animovaná mapa vypadá v prohlížeči.

Jak to vidíme, vypadá to docela dobře a umožní nám to dát naší aplikaci jiný styl, abychom mohli jednoduchým způsobem reprezentovat obtížné scénáře, a to s využitím výhod JavaScript a knihovny třetích stran, které nám velmi usnadňují život.

animovaná mapa JavaScript.zip 1,86 kB 169 stažení