Crear un mapa del mundo con el plugin JVectorMap y jQuery

 in Javascript by

JVectorMap es un plugin de JQuery/Javascript que permite renderizar un mapa de todo el mundo, un continente, un pais y/o algunas ciudades, para usarlo en graficas.

Lo principal para lo que sirve el plugin es para crear gráficas de números de los países o estados donde se use y poder ver de manera gráfica una sucesión de eventos o valores.

Algunos ejemplos en los que se puede usar el plugin jVectorMap son las siguientes:

  • Mapas de poblacion
  • Mapas de natalidad
  • Mapas de mortandad
  • Mapas de uso de tecnologia
  • Entre otros

Otra de las características principales es que los mapas son interactivos, es decir podemos seleccionar una ubicacion para ver datos, es posible hacer zoom.

El plugin es gratis para uso personal, para uso comercial es necesario “comprar” una licencia 😉

La pagina oficial del plugin es: https://jvectormap.com/

Descargando el plugin jVectorMap

Para descargar el plugin es necesario ir a la pagina principal para descargarlo en la sección Downloads.

También sera necesario ir a la pagina “Maps” y descargar el mapa del mundo en versión miller.

Al descargar estos archivos vamos a obtener los archivos css y js que vamos a utilizar.

Al final de este tutorial dejare los archivos que yo utilice para la demostración.

Instalando y usando el plugin jVectorMap

La instalacion del plugin no tiene mas ciencia que copiar los archivos a una carpta y de agregar las urls de las librerias a un archivo html en el head, tal como se muestra a continuacion.

	<script type="text/javascript" src="jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="jquery-jvectormap-2.0.5.css">
	<script type="text/javascript" src="jquery-jvectormap-2.0.5.min.js"></script>
	<script type="text/javascript" src="jquery-jvectormap-world-mill.js"></script>

Tambien van a necesitar el plugin jquery que lo pueden descargar de la pagina de jquery o bien copiarlo de algun proyecto donde lo tengan.

Ya que tenemos todo lo necesario ahora vamos a crear/renderizar el mapa.

Primero vamos a necesitar un contenedor, que puede ser un div con un id, por ejemplo “my-map”.

  <div id="my-map" style="width: 640px; height: 480px"></div>

Despues, dentro de las etiquetas “script” vamos a ejecutar la funcion vectorMap de la siguiente manera:

     $('#my-map').vectorMap({map: 'world_mill'});

Asi vamos a lograr un mapa y al pasar el mouse sobre el mapa podremos ver los nombres de los paises, tambien si usamos la rueda del mouse haremos zoom.

Agregar datos al Mapa jVectorMap

Para agregar datos vamos a cambiar un poco la ejecucion del script que genera el mapa.

Primero vamos a agregar un array de valores, asociando un valor a un pais, para ello se usa el prefijo del pais en 2 letras, si no conoces el prefijo de un pais puede ir a la seccion mapas de la pagina oficial de jvectormap.

var data = {
  "US": 100, // estados unidos
  "MX": 200, // mexico
  "CA": 300, // canada
  "PE": 400, // peru
  "AR": 500, // argentina
  "CL": 600, // chile
  "BR": 700, // brazil
  "PY": 800, // paraguay
  "UR": 900, // uruguay
  "CO": 1000, // colombia
};

Y ahora para renderizar el mapa vamos a necesitar algunos parametros extra.

$('#my-map').vectorMap({
  map: 'world_mill', // el mapa del mundo
  series: {
    regions: [{
      values: data, // los valores
      scale: ['#55FF55', '#555555'], // el rango de colores
      normalizeFunction: 'polynomial' // la formula de normalizacion de datos
    }]
  },
  onRegionTipShow: function(e, el, code){ // al seleccionar una region se muestra el valor que tengan en el array
    el.html(el.html()+' (Poblacion: '+data[code]+')');
  }
});

Y con eso ya podremos ver un mapa con valores y colores.

Descargar

A continuacion puedes descargar mi codigo de ejemplo, ademas las librerias con los archivos css y js.

Link: https://drive.google.com/file/d/1OA4q2b168zlFzg50_D-jRspuAZdy6cub/view

Leave a comment