Me encontré con la necesidad de mostrar mapas interactivos en un sitio web, pero que funcione en los navegadores de internet más usados (Firefox, Chrome, InternetExplorer), así que descarte por adelantado a Adobe Flash.
Investigando en la red encontré 2 plugins basados en JQuery, el primero JQVMap es el más sencillo de usar, pero una de las principales desventajas que encontré es que no me funciona en InternetExplorer, el segundo plugin por el que me decidí por usar es el JVectorMap, es un poco difícil de utilizar y tiene más opciones, pero la ventaja es que funciona en los navegadores más usados y recientemente salió la versión 1.2.2.
JVectorMap es un plugin para construir mapas interactivos, en su sitio web oficial se puede descargar la última versión y algunos mapas del Mundo, pero tienen que tener en cuenta que su documentación no está actualizada.
Entramos a la página oficial de JQuery para descargar su última versión en este caso JQuery 1.10.2 y la última versión de JVectorMap en este caso JVectorMap 1.2.2, este último tiene 2 archivos (.js y el .css).
HEAD
jquery-1.10.2.min.js jquery-jvectormap-1.2.2.min.js jvectormap.peru.js
BODY
< div id="world-map" style="width: 290px; height: 400px;"> div>
JS
$(function() { $('#world-map').vectorMap({ map: 'peru' }) });
$('#world-map').vectorMap({ map: 'peru', backgroundColor: '#b3d1ff', series: { regions: [{ values: {"c0": "1", "c1": "2"}, scale: ['#d9d4ca', '#b3d1ff'], normalizeFunction: 'polynomial' }] }, regionStyle: { initial: { fill: "#f4f3f0", stroke: "#666666", "stroke-width": 1, "stroke-opacity": 1 }, hover: { fill: "#faa432", "fill-opacity": "1" } } })
En este tutorial se intentado enseñar como mostrar un mapa interactivo, espero haya aprendido y puedan aplicarlo a su trabajo. Pueden revisar su documentación de JVectorMap y agregarle más detalles como colores, bordes, opacidad, markers, eventos, etc.
Escrito por mcedwin para TECNato
Desarrollador Web, Especialista en diseño y tecnologías Web. Profesional en Ingeniería de Sistemas.
TECNato nace de la idea de crear una comunidad tecnológica, un espacio virtual para compartir conocimientos sobre TIC’s (Tecnologías de la Información y Comunicación).
TECNato es libre y abierto a nuevos miembros que estén dispuestos a compartir sus conocimientos en TIC’s, así que no dudes en escribirnos para mas detalles.
Diseño Web:
Grupo Sistemas
CMS:
WordPress
26 comentarios
7 de agosto del 2013
Esta muy bueno Edwin, saludos.
11 de agosto del 2013
Bien man, muy util, para sacar reportes graficos, ahora estoy desarrolando reportes graficos con http://www.amcharts.com
Saludos
31 de octubre del 2013
luego de tener el mapa dibujado como puedo hacer para agregar un color diferente a cada region y un href?
12 de abril del 2014
Ya tengo listo mi mapa. Como puedo agregarle links para que a la hora de darle clic a alguna region me direccione a otro sitio?
19 de diciembre del 2014
muy buen tuto. pero como puedo hacer que cada ciduad tenga un link¿? gracias de antemano
25 de febrero del 2015
me parece este error alguien me puede ayudar
NS_ERROR_FAILURE:
return this.node.getBBox();
25 de mayo del 2015
[…] ello utilice el siguiente LINK donde está toda la guía de como […]
26 de mayo del 2015
Impresionante.
Perfectamente explicado. Muchas gracias, sin duda es la mejor ayuda que he encontrado.
6 de julio del 2015
hola muy buen aporte, me ha servido mucho. Solo quisiera saber, en el caso que quiera ponerle una imagen de fondo, como puedo hacerlo?
ya que con backgroundColor: ‘#b3d1ff’, solo puedo cambiar el color y yo quiero tener una imagen de fondo
6 de julio del 2015
Prueba con backgroundColor: ‘transparent’
31 de agosto del 2015
Muy buen artículo me ha servido bastante.
InkScape de los más excelentes softwares libres!
11 de octubre del 2015
Pero como se podra hacer para que los nombres se puedan ver como etiquetas? sin pasar el mouse por encima
27 de octubre del 2015
como hago un href dependiendo la zona en la que quiera dar clic
16 de noviembre del 2015
graciaaaaaaas!
16 de noviembre del 2015
una duda tu pusiste »
[…] ello utilice el siguiente LINK donde está toda la guía de como […]»
pero la Palabra Link no estaba lineada, cual es el link? porfa
21 de diciembre del 2015
Ya tengo listo mi mapa. Como puedo agregarle links para que a la hora de darle clic a alguna region me direccione a otro sitio? ayuda por favor
21 de diciembre del 2015
Ya tengo listo el mapa Como puedo agregarle links para que a la hora de darle clic a alguna region me direccione a otro sitio? ayuda por favor
5 de marzo del 2016
Estimados como puedo darle intensidad de colores al mapa urgente
21 de marzo del 2016
Edwin cuanto me cobras por hacer uno de chile como yapo.cl
13 de abril del 2016
muy buena pagina brother esta genial
21 de julio del 2016
El link http://svgto.jvectormap.com/ está caído, algún otro disponible?
14 de octubre del 2016
Como se le puede agregar el atributo id una vez q esta convertido en jvectormap. ejm( id = «dep_15» ). Gracias.
12 de enero del 2017
Yo quiero aprender hacer esto con Google Web Designer. La pregunta seria se puede hacer esto con Google Web Designer????
14 de febrero del 2017
gracias!! que capito!
26 de febrero del 2017
Ya tengo listo el mapa, como puedo agregarle un links a una region en especifica y me direccione a otra pagina? ayuda por favor. Gracias y excelente aporte
4 de noviembre del 2017
Codigo para agregar links a una region en especifica
onRegionClick: function(element, code)
{
var message = ‘You clicked ‘+ code.toUpperCase();
location.href = ‘ver.php?id=’+ code;
}