Cargando

Ir a contenido


 


Mapa animado con JavaScript

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


Escrito por el sep 08 2015 12:47 javascript charts


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.

 

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

¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0
9.5
VOTA
5
75%
4
25%
3
0%
2
0%
1
0%

  Información

  •   Publicado sep 08 2015 12:47
  •   Actualizado jul 22 2016 13:54
  •   Visitas 2K
  •   Nivel
    Profesional



Tutoriales Relacionados


3 Comentarios


Ronny Bonillo
sep 08 2015 15:33

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


Hector Olmedo
sep 08 2015 16:11

Que bueno!!


Javier Salas
ene 25 2016 17:12

Muy bueno

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
Demuestra que eres experto!
  ESCRIBIR TUTORIAL
Suscribirse