Animirana karta sa JavaScriptom

Trenutno se raznolikost aplikacija koje možemo pronaći na webu kreće od najjednostavnijih do najsloženijih, što može predstavljati različite scenarije koje je zahvaljujući novim tehnologijama puno lakše postići.

Jedan od tih mnogih scenarija je mogućnost predstavljanja ruta na karti, pa iako to može zvučati kao zadatak za koji nam je potrebno nekoliko tjedana, zahvaljujući knjižnici amCharts možemo to učiniti bez najmanjeg mogućeg napora.

HTML kod

Naš kod HTML Bit će prilično jednostavno, imat će standardnu ​​strukturu i ono što je važno u njemu učiniti jest uključiti biblioteku amChartskao i našu datoteku sa stilovima i .js datoteku. gdje ćemo obaviti najveći dio posla:

 Animirana karta sa JavaScriptom

Jedan od temeljnih dijelova našeg HTML je dodati div koji će imati ID koji ćemo koristiti za iscrtavanje naše karte, i to je onaj koji ćemo povezati u naš .js, u ovom slučaju to zovemo animirana karta.

Tablica stilova

Naša stilska tablica bit će prilično jednostavna, tu ćemo samo definirati širinu i visinu za prikaz naše karte, u ovom slučaju to ćemo učiniti na cijelom zaslonu:

 tijelo, html {širina: 100%; visina: 100%; margin: 0} #AnimationMap {width: 100%; visina: 100%; }

Kad to učinimo, prijeđimo na srž našeg primjera, a to bi bio kod JavaScript.

JavaScript kod

Prvo moramo inicijalizirati našu kartu s funkcijom makeChart i unutar nje definirajte općenite mogućnosti ovoga, budući da s ovom funkcijom ne možemo samo stvarati karte, već i razne grafike svih vrsta. Za to definiramo vrstu, model karte, razinu zumiranja, pa čak i font za tekstove:

 AmCharts.makeChart ("Animatedmap", {type: "map", fontSize: 20, balon: {horizontalPadding: 20, verticalPadding: 15}, creditsPosition: "gore-desno", dataProvider: {karta: "worldLow", zoomLevel: 3.5, zoomLoitude: -55, zoomLatitude: 42,});

Osim ovoga, možemo izmijeniti i druge opcije karte, poput boja, linija i trajanja animacija koje možemo koristiti prema karti koju smo odabrali, u ovom slučaju to je karta koja predstavlja karte leta kako bismo mogli kako brzo može doći do ikone zrakoplova i koliko daleko možete stajati između točke i točke.

 areaSettings: {unlistedAreasColor: "# 9bc5f5"}, imagesSettings: {color: "# 4e985c", rollOverColor: "# 4e985c", selectedColor: "# 4e985c", pauseDuration: 0,2, animationDuration: 2,5, AdjustationSpeed: 2,5, speedAnimationSpeed: 2,5, {color: "# 4e985c", alfa: 0,4}

Nakon što smo zadovoljni opcijama koje smo postavili, samo moramo vidjeti kako naša animirana karta izgleda u pregledniku.

Kako mi to vidimo izgleda prilično dobro i omogućit će nam da aplikaciji damo drugačiji stil kako bismo na jednostavan način predstavili teške scenarije, koristeći prednosti JavaScript i knjižnice trećih strana koje nam znatno olakšavaju život.

animirana karta JavaScript.zip 1.86K 169 preuzimanja