Cargando



Mapa animado con JavaScript

Aprende a crear un mapa animado con JavaScript y la librería de amCharts.


sep 08 2015 13:47
Profesional
jul 22 2016 14:54

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.

 

video-animado.gif

 

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.

 

Fichero Adjunto  mapa animado JavaScript.zip   1,86K   240 Descargas


¿Te ayudó este Tutorial?


3 Comentarios


Ronny Bonillo
sep 08 2015 16:33

Interesante, me lo copio, seguro me servirá en algún proyecto :)


Hector Olmedo
sep 08 2015 17:11

Que bueno!!


Javier Salas
ene 25 2016 18:12

Muy bueno

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X