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.

DEMO

DOWNLOAD

Pasos:

Dibujar mapa en Inkscape

  • Primero he dibujado un mapa en Inkscape en este caso un mapa de mi País Perú.jvm01
  • 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”:jvm02
    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 notasjvm03

 

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/jvm04
  • 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”.jvm05
  • Finalmente generamos el mapa para JVectorMap presionando el botón “Save”.jvm06Este 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:jvm07
  • 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 jvm08
  • 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 finaljvm09

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.

Autor: mcedwin

Desarrollador Web, Especialista en diseño y tecnologías Web. Profesional en Ingeniería de Sistemas.

26 opiniones en “Mapas interactivos para la Web utilizando Inkspace, SVG y el plugin JVectorMap”

  1. luego de tener el mapa dibujado como puedo hacer para agregar un color diferente a cada region y un href?

  2. 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?

  3. Impresionante.
    Perfectamente explicado. Muchas gracias, sin duda es la mejor ayuda que he encontrado.

  4. 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

  5. Pero como se podra hacer para que los nombres se puedan ver como etiquetas? sin pasar el mouse por encima

  6. 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

  7. 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

  8. 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

  9. Como se le puede agregar el atributo id una vez q esta convertido en jvectormap. ejm( id = “dep_15” ). Gracias.

  10. Yo quiero aprender hacer esto con Google Web Designer. La pregunta seria se puede hacer esto con Google Web Designer????

  11. 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

  12. 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;
    }

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *