Mapa animado com JavaScript

Atualmente a diversidade de aplicações que podemos encontrar na web vai das mais simples às mais complexas, podendo representar diferentes cenários que graças às novas tecnologias são muito mais fáceis de alcançar.

Um desses muitos cenários é a possibilidade de representar rotas em um mapa, e embora possa soar como uma tarefa que pode levar semanas para ser concluída, graças à biblioteca de amCharts podemos fazer isso sem o mínimo esforço possível.

Código HTML

Nosso código HTML Será bastante simples, terá uma estrutura padronizada e o que é importante fazer nela é fazer as inclusões da biblioteca de amChartsbem como nossa folha de estilo e arquivo .js. que será onde faremos a maior parte do trabalho:

 Mapa animado com JavaScript

Uma das partes fundamentais do nosso HTML é adicionar um div que terá o ID que usaremos para renderizar nosso mapa, e é aquele que iremos vincular em nosso .js, neste caso o chamamos mapa animado.

Folha de estilos

Nossa folha de estilo será bem simples, lá definiremos apenas a largura e altura para exibir nosso mapa, neste caso faremos em tela cheia:

 corpo, html {largura: 100%; altura: 100%; margem: 0} #AnimationMap {largura: 100%; altura: 100%; }

Feito isso, vamos passar o núcleo do nosso exemplo, que seria o código JavaScript.

Código JavaScript

Primeiro, precisamos inicializar nosso mapa com a função makeChart e dentro dele definir as opções gerais deste, já que com esta função podemos criar não só mapas, mas também vários gráficos de todos os tipos. Para isso definimos o tipo, o modelo do mapa, os níveis de zoom e até a fonte dos textos:

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

Além disso, podemos modificar outras opções do mapa, como cores, linhas e duração das animações que podemos usar de acordo com o mapa que escolhemos, neste caso é um mapa para representar mapas de vôo para que possamos como rápido pode ir o ícone do avião e até onde você pode ficar entre um ponto e outro.

 areasSettings: {unlistedAreasColor: "# 9bc5f5"}, imagesSettings: {color: "# 4e985c", rollOverColor: "# 4e985c", selectedColor: "# 4e985c", pauseDuration: 0.2, animationDuration: 2.5, ajustarAnimationSpeed: 2.5, ajustar {cor: "# 4e985c", alfa: 0,4}

Quando estivermos satisfeitos com as opções que colocamos, só temos que ver como nosso mapa animado se parece no navegador.

Como vemos parece muito bom e nos permitirá dar um estilo diferente ao nosso aplicativo, a fim de representar cenários difíceis de uma forma simples, usando os benefícios de JavaScript e bibliotecas de terceiros que tornam a vida muito mais fácil para nós.

mapa animado JavaScript.zip 1.86K 169 downloads