Mapas interactivos para la Web utilizando Inkspace, SVG y el plugin JVectorMap
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.
Pasos:
Dibujar mapa en Inkscape
- Primero he dibujado un mapa en Inkscape en este caso un mapa de mi País Perú.
- Ahora editamos las regiones en Inkscape para tener un mejor resultado etiquetamos las regiones de los mapas, para ello seleccionamos la región haciendo click derecho sobre una región y escogemos la opción “Propiedades del Objeto”:
En este caso seleccionamos la región de Puno, y le pusimos un ID y un nombre para esta Región, esto es con el fin de que en nuestro resultado HTML se muestre esta etiqueta. - Ahora guardamos el mapa en un archivo por defecto que es (SVG de Inkscape).
- Este archivo podemos abrirlo en el bloc de notas
SGVTO (Convertidor de SGV a formato .js de JVectorMap)
- Seleccionamos todo el contenido del bloc de notas, lo copiamos y pegamos en el campo de texto del formulario que se encuentra en dirección:
http://svgto.jvectormap.com/
- Presionando el botón “Convert to map” podemos editar el nombre del mapa, los ids y los names de cada región; en este caso renombramos el nombre del mapa con “peru”.
- Finalmente generamos el mapa para JVectorMap presionando el botón “Save”.
Este resultado lo seleccionamos y copiamos en un archivo que podemos llamarlo “jvectormap.peru.js”.
JQuery y JQVectorMap
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).
Funcionamiento
- Ahora en nuestra carpeta debemos tener los siguientes archivos:
- Creamos un archivo peru.html que será donde se mostrara el mapa interactivo, Copiamos en el contenido del archivo:
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;">
JS
$(function() { $('#world-map').vectorMap({ map: 'peru' }) });
- Teniendo como resultado
- Mejorando nuestro mapa.
$('#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"
}
}
})
- Resultado final
Conclusión
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.
Tweet
Escrito por mcedwin para TECNato
Acerca del autor
Edwin Fredy Mamani Calderon
Desarrollador Web, Especialista en diseño y tecnologías Web. Profesional en Ingeniería de Sistemas.
Artículos destacados
Categorías
Miembros
TECNato
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).
Hazte miembro
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.
Soporte
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;
}