TECNato – TIC's Perú

Mapas interactivos para la Web utilizando Inkspace, SVG y el plugin JVectorMap

Martes, 6 de Agosto del 2013 25 comentarios

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

BODY

JS

  • Teniendo como resultado jvm08
  • Mejorando nuestro mapa.

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


Escrito por para TECNato

25 comentarios

  • Neil
    7 de Agosto del 2013

    Esta muy bueno Edwin, saludos.

  • jronal
    11 de Agosto del 2013

    Bien man, muy util, para sacar reportes graficos, ahora estoy desarrolando reportes graficos con http://www.amcharts.com

    Saludos

  • Gabriel
    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?

  • Erick
    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?

  • davmanhack
    19 de Diciembre del 2014

    muy buen tuto. pero como puedo hacer que cada ciduad tenga un link¿? gracias de antemano

  • zoedhard
    25 de Febrero del 2015

    me parece este error alguien me puede ayudar

    NS_ERROR_FAILURE:
    return this.node.getBBox();

  • Mapas interactivos para la web
    25 de Mayo del 2015

    […] ello utilice el siguiente LINK donde está toda la guía de como […]

  • Miguel Angel
    26 de Mayo del 2015

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

  • Dionisio
    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

  • mcedwin
    6 de Julio del 2015

    Prueba con backgroundColor: ‘transparent’

  • AnzOne
    31 de Agosto del 2015

    Muy buen artículo me ha servido bastante.
    InkScape de los más excelentes softwares libres!

  • Anonymous
    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

  • cristian
    27 de Octubre del 2015

    como hago un href dependiendo la zona en la que quiera dar clic

  • Manuel
    16 de Noviembre del 2015

    graciaaaaaaas!

  • Manuel
    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

  • david burbano
    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

  • david burbano
    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

  • Byron pineda
    5 de Marzo del 2016

    Estimados como puedo darle intensidad de colores al mapa urgente

  • alejandro
    21 de Marzo del 2016

    Edwin cuanto me cobras por hacer uno de chile como yapo.cl

  • Leonardo
    13 de Abril del 2016

    muy buena pagina brother esta genial

  • Yilmer
    21 de Julio del 2016

    El link http://svgto.jvectormap.com/ está caído, algún otro disponible?

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

  • Nellyano
    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????

  • danifson
    14 de Febrero del 2017

    gracias!! que capito!

  • robert
    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

Deja tu comentario

(Iniciar sesión)

TECNato

TECNato nace de la idea de crear un espacio virtual de usuarios Peruanos 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 Peruanos, que estén dispuestos a compartir sus conocimientos en TIC’s, escribenos para mas detalles.

Soporte

Diseño Web:
Grupo Sistemas
Gestor de contenidos:
WordPress