Actualmente la diversidad que aplicaciones que podemos encontrar en la web va desde lo más simple hasta lo más complejo, las cuales pueden representar diferentes escenarios que gracias a las nuevas tecnologías son mucho más fáciles de lograr.
Uno de estos muchos escenarios es la posibilidad de representar rutas en un mapa, y a pesar de que puede sonar como una tarea que nos puede llevar semanas completar, gracias a la librería de amCharts podemos hacerlo sin el menor esfuerzo posible.
Código HTML
Nuestro código HTML será bastante simple, tendrá una estructura estándar y lo que es importante hacer en el mismo es hacer las inclusiones de la librería de amCharts, así como nuestra hoja de estilos y el archivo .js. que será donde haremos la mayoría del trabajo:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Mapa Animado con JavaScript</title> <script src="http://www.amcharts.com/lib/3/ammap.js?3.17.0"></script> <script type="text/javascript" src="mapa.js"></script> <link rel="stylesheet" type="text/css" href="estilos.css" /> </head> <body> <div id="mapaAnimado"></div> </body> </html>Una de las partes fundamentales de nuestro HTML es agregar un div que tendrá el ID que utilizaremos para rendear nuestro mapa, y es el que enlazaremos en nuestro .js, en este caso lo llamamos mapaAnimado.
Hoja de estilos
Nuestra hoja de estilos será bastante simple, allí solo lo que haremos será definir el ancho y altura para desplegar nuestro mapa, en este caso lo haremos a pantalla completa:
body,
html {
width: 100%;
height: 100%;
margin: 0
}
#mapaAnimado {
width: 100%;
height: 100%;
}Hecho esto pasemos el core de nuestro ejemplo que sería el código JavaScript.
Código JavaScript
Primero necesitamos inicializar nuestro mapa con la función makeChart y dentro de la misma definir las opciones generales de este, ya que con esta función podemos no solo crear mapas, sino también diversos gráficos de todo tipo. Para ello definimos el tipo, el modelo del mapa, los niveles de zoom e incluso la fuente para los textos:
AmCharts.makeChart("mapaAnimado", {
type: "map",
fontSize:20,
balloon:{horizontalPadding:20, verticalPadding:15},
creditsPosition:"top-right",
dataProvider: {
map: "worldLow",
zoomLevel: 3.5,
zoomLongitude: -55,
zoomLatitude: 42,
});Además de esto podemos modificar otras opciones del mapa, cómo colores, líneas y duración de las animaciones que podemos utilizar de acuerdo al mapa que hayamos escogido, en este caso es un mapa para representar mapas de vuelos por lo que podemos qué tan rápido puede ir el icono del avión y cuanto puede pararse entre punto y punto.
areasSettings: {
unlistedAreasColor: "#9bc5f5"
},
imagesSettings: {
color: "#4e985c",
rollOverColor: "#4e985c",
selectedColor: "#4e985c",
pauseDuration: 0.2,
animationDuration: 2.5,
adjustAnimationSpeed: true
},
linesSettings: {
color: "#4e985c",
alpha: 0.4
}Una vez estemos satisfechos con las opciones que hayamos colocado, solo debemos ver cómo queda nuestro mapa animado en el navegador.
Cómo vemos se ve bastante bien y permitirá dar a nuestra aplicación un estilo diferente de forma de representar difíciles escenarios de forma sencilla, esto utilizando las bondades de JavaScript y librerías de terceros que nos hacen la vida mucho más fácil.
mapa animado JavaScript.zip 1,86K
268 Descargas
Interesante, me lo copio, seguro me servirá en algún proyecto