Mappa animata con JavaScript

Attualmente la diversità delle applicazioni che possiamo trovare sul web spazia dalle più semplici alle più complesse, che possono rappresentare scenari differenti che grazie alle nuove tecnologie sono molto più facili da realizzare.

Uno di questi tanti scenari è la possibilità di rappresentare percorsi su una mappa, e sebbene possa sembrare un compito che può richiedere settimane per essere completato, grazie alla libreria di amCharts possiamo farlo senza il minimo sforzo possibile.

codice HTML

Il nostro codice HTML Sarà abbastanza semplice, avrà una struttura standard e ciò che è importante fare in esso è fare le inclusioni della libreria di amChartscosì come il nostro foglio di stile e il file .js. che sarà dove faremo la maggior parte del lavoro:

 Mappa animata con JavaScript

Una delle parti fondamentali del nostro HTML è aggiungere un div che avrà l'ID che useremo per rendere la nostra mappa, ed è quello che collegheremo nel nostro .js, in questo caso lo chiamiamo mappa animata.

Foglio di stile

Il nostro foglio di stile sarà abbastanza semplice, lì definiremo solo la larghezza e l'altezza per visualizzare la nostra mappa, in questo caso lo faremo a schermo intero:

 corpo, html {larghezza: 100%; altezza: 100%; margine: 0} #AnimationMap {larghezza: 100%; altezza: 100%; }

Fatto ciò, passiamo al nocciolo del nostro esempio, che sarebbe il codice JavaScript.

Codice JavaScript

Per prima cosa dobbiamo inizializzare la nostra mappa con la funzione makeChart e al suo interno definisci le opzioni generali di questo, poiché con questa funzione possiamo non solo creare mappe, ma anche varie grafiche di ogni tipo. Per questo definiamo il tipo, il modello della mappa, i livelli di zoom e persino il carattere per i testi:

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

Oltre a questo possiamo modificare altre opzioni della mappa, come colori, linee e durata delle animazioni che possiamo usare in base alla mappa che abbiamo scelto, in questo caso è una mappa per rappresentare mappe di volo così possiamo come veloce può andare l'icona dell'aeroplano e quanto lontano puoi stare tra un punto e l'altro.

 settingsSettings: {unlistedAreasColor: "# 9bc5f5"}, imagesSettings: {color: "# 4e985c", rollOverColor: "# 4e985c", selectedColor: "# 4e985c", pauseDuration: 0.2, animationDuration: 2.5, aggiustaAnimationSpeed: 2.5, aggiustaAnimationSpeed: linee {colore: "# 4e985c", alfa: 0.4}

Una volta che siamo soddisfatti delle opzioni che abbiamo inserito, non ci resta che vedere come appare la nostra mappa animata nel browser.

Il modo in cui lo vediamo sembra abbastanza buono e ci permetterà di dare alla nostra applicazione uno stile diverso per rappresentare scenari difficili in modo semplice, sfruttando i vantaggi di JavaScript e librerie di terze parti che ci semplificano la vita.

mappa animata JavaScript.zip 1.86K 169 download