Carte animée avec JavaScript

Actuellement, la diversité des applications que l'on peut trouver sur le web va des plus simples aux plus complexes, ce qui peut représenter différents scénarios qui grâce aux nouvelles technologies sont beaucoup plus faciles à réaliser.

L'un de ces nombreux scénarios est la possibilité de représenter des itinéraires sur une carte, et bien que cela puisse sembler une tâche qui peut nous prendre des semaines à accomplir, grâce à la bibliothèque de amCharts nous pouvons le faire sans le moindre effort possible.

Code HTML

Notre code HTML Ce sera assez simple, il aura une structure standard et ce qui est important de faire dedans c'est de faire les inclusions de la bibliothèque de amChartsainsi que notre feuille de style et notre fichier .js. qui sera l'endroit où nous ferons le plus gros du travail :

 Carte animée avec JavaScript

L'un des éléments fondamentaux de notre HTML est d'ajouter un div qui aura l'ID que nous utiliserons pour rendre notre carte, et c'est celui que nous allons lier dans notre .js, dans ce cas nous l'appelons carte animée.

Feuille de style

Notre feuille de style sera assez simple, là nous définirons uniquement la largeur et la hauteur pour afficher notre carte, dans ce cas nous le ferons en plein écran :

 corps, html {largeur : 100 %; hauteur : 100 % ; marge : 0} #AnimationMap {largeur : 100 % ; hauteur : 100 % ; }

Une fois cela fait, passons au cœur de notre exemple, qui serait le code JavaScript.

Code JavaScript

Nous devons d'abord initialiser notre carte avec la fonction makeChart et à l'intérieur de celui-ci, définissez les options générales de celle-ci, car avec cette fonction, nous pouvons non seulement créer des cartes, mais également divers graphiques de toutes sortes. Pour cela nous définissons le type, le modèle de carte, les niveaux de zoom et même la police des textes :

 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,});

En plus de cela, nous pouvons modifier d'autres options de la carte, telles que les couleurs, les lignes et la durée des animations que nous pouvons utiliser en fonction de la carte que nous avons choisie, dans ce cas il s'agit d'une carte pour représenter les cartes de vol afin que nous puissions comment rapide, il peut aller l'icône de l'avion et à quelle distance vous pouvez vous tenir entre un point et un point.

 areaSettings : {unlistedAreasColor : "# 9bc5f5"}, imagesSettings : {color : "# 4e985c", rollOverColor : "# 4e985c", selectedColor : "# 4e985c", pauseDuration : 0.2, animationDuration : 2.5, AdjustAnimationSpeed : 2.5, AdjustAnimationSpeed : lines {couleur : "# 4e985c", alpha : 0.4}

Une fois que nous sommes satisfaits des options que nous avons placées, il ne nous reste plus qu'à voir à quoi ressemble notre carte animée dans le navigateur.

La façon dont nous le voyons semble assez bonne et nous permettra de donner à notre application un style différent afin de représenter des scénarios difficiles de manière simple, ceci en utilisant les avantages de JavaScript et des bibliothèques tierces qui nous facilitent grandement la vie.

carte animée JavaScript.zip 1.86K 169 téléchargements