Creación de mapas con shapes – Parte 3

En nuestro mapa interactivo, se hará uso de un mapa departamental dividido en provincias, todo a través  de shapes, si bien se puede hacer uso de gráficos vectoriales, en esta ocasión se prefirió pintar las figuras directamente en el canvas.

El mapa que utilizaremos en este tutorial es el del departamento del Beni de la República de Bolivia 😉  , este departamento consta de 8 provincias y está ubicado en el oriente boliviano, tiene una superficie de 213.564 km2. siendo el segundo mas grande, su capital es Trinidad de la provincia Cercado, la temperatura promedio esta en los 30 grados tiene bastas extensiones de selva y ríos y una de las mujeres más bellas de Bolivia 🙂

Maria Teresa Roca Miss Beni y Señorita Bolivia 2012

Puedes hacer uso de este mapa o intentar con otro mapa de tu preferencia, mi consejo, termina este tutorial con este mapa y te darás cuentas lo fácil que es usar otros mapa :=D

Por motivos netamente educativos y de tiempo 🙂 solo se trabajara con este mapa modificado con 6 provincias 🙂

– Vaca Diez

– Ballivian

– Itenez

– Mamore

– Moxos

– Yacuma

1. Abre tu editor de imágenes favorito y ve separando en capas cada provincia como en la siguiente imagen:

El color de cada provincia es solo para una mejor entendimiento de lo que se debe hacer, de preferencia, que cada capa tenga un color negro.

Ve guardando cada capa por separado con extensión *.png y sus respectivos nombres.

2. Si tienes la paciencia de un santo y dominas las herramientas de dibujo de HTML5, (lines, curves, paths, shape, etc) bien podrías pasar unos minutos (o tal vez más), escribiendo las instrucciones javascript que te permitan dibujar una provincia y después continuar con el siguiente o.O, y así hasta terminar con las 6 provincias. Ahora imagina que tu mapa es de Brasil con 26 estados o.O menuda tarea tienes por delante 🙂

Para evitar esto, haremos uso de 2 herramientas on-line que nos ahorraran mucho tiempo 🙂 estas herramientas son:

A.- http://image.online-convert.com/convert-to-svg : Para convertir imágenes a gráficos vectoriales

B.- http://www.professorcloud.com/svg-to-canvas/ : Para convertir archivos SVG en código javascript.

3.  Solo trabajaremos con la provincia «vaca diez», el procedimiento para el resto de las provincias es el mismo.

Plantilla provincia Vaca Diez

3 Imagenes

3.1 Convertir imagen en SVG

Abre la herramienta «A», donde dice «Upload your image you want to convert to SVG» , presiona el botón para seleccionar el mapa de la provincia vacadiez.png y marca la opción «Monochrome«, para terminar presiona el botón «Convert file«. Espera unos segundos y el archivo sera convertido, se abrirá la ventana de descarga, dale en aceptar para bajar el archivo a tu pc.

Dependiendo de lo compleja que sea el mapa, el tamaño del archivo puede variar.

Repite el procedimiento para el resto de las 5 provincias.

3.2 Convertir SVG a Canvas javascript

Continuando con el archivo vacadiez.svg (el del paso anterior), abre este con un editor de texto cualquiera, abre en el navegador la herramienta «B» y pega el contenido del archivo SVG en el textarea que dice «Paste SVG in here«, no puede ser mas claro o.O , presiona «convert» y al instante tendrás el código javascript que necesitamos. Son muchos números  pero no te asustes que no es nada del otro mundo.

4. Abre dreamweaver y el archivo elecciones.js. Pega el contenido en el archivo js.

El código generado por la herramienta «B» , tiene la forma de:

var draw = function(ctx) {
ctx.save();
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(621.25,0);
ctx.lineTo(621.25,632.5);
ctx.lineTo(0,632.5);
ctx.closePath();
ctx.clip();
ctx.translate(0,0);
ctx.translate(0,0);
ctx.scale(1.25,1.25);
ctx.translate(0,0);
ctx.strokeStyle = 'rgba(0,0,0,0)';
ctx.lineCap = 'butt';
ctx.lineJoin = 'miter';
ctx.miterLimit = 4;
ctx.save();
ctx.restore();
ctx.save();
ctx.fillStyle = "#000000";
ctx.strokeStyle = "rgba(0, 0, 0, 0)";
ctx.translate(0,506);
ctx.scale(0.1,-0.1);
ctx.save();
ctx.beginPath();
ctx.moveTo(1781,4975);
ctx.bezierCurveTo(1746,4951,1709,4928,1699,4925);
...
ctx.bezierCurveTo(1886,5033,1868,5036,1781,4975);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.restore();
ctx.restore();
ctx.restore();
};

Haremos una pequeña modificación, nuestro mapa cambia de color pero el archivo generado solo tiene color negro, bueno, modificaremos la declaración de la función de la siguiente forma:

var draw = function(ctx) {

por

var vacadiez  = function(ctx , color ) {

colocamos el nombre de la provincia y un nuevo parámetro de entrada, «color«. Este nuevo parámetro debemos reemplazarlo por ctx.fillStyle = «#000000»; quedando nuestro código de la siguiente manera:

var vacadiez  = function(ctx , color ) {
ctx.save();
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(621.25,0);
ctx.lineTo(621.25,632.5);
ctx.lineTo(0,632.5);
ctx.closePath();
ctx.clip();
ctx.translate(0,0);
ctx.translate(0,0);
ctx.scale(1.25,1.25);
ctx.translate(0,0);
ctx.strokeStyle = 'rgba(0,0,0,0)';
ctx.lineCap = 'butt';
ctx.lineJoin = 'miter';
ctx.miterLimit = 4;
ctx.save();
ctx.restore();
ctx.save();
ctx.fillStyle =  color ; //AQUI SE REALIZO EL CAMBIO DE VARIABLE
ctx.strokeStyle = "#ffffff";
ctx.lineWidth = 10;
ctx.translate(0,506);
ctx.scale(0.1,-0.1);
ctx.save();
ctx.beginPath();
ctx.moveTo(1781,4975);
ctx.bezierCurveTo(1746,4951,1709,4928,1699,4925);
....
ctx.bezierCurveTo(1886,5033,1868,5036,1781,4975);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.restore();
ctx.restore();
ctx.restore();
};

Repite los pasos 3.2 y 4 para el resto de los archivos SVG, ahora tu archivo elecciones.js debe tener la forma de:

/*=========== P R O V I N C I A S ===========*/
//VACA DIEZ
var vacadiez  = function(ctx , color ) {
....
};

//MAMORE
var mamore = function( ctx , color ) {
...
};

//YACUMA
var yacuma  = function( ctx ,  color ) {
...
};

//BALLIVIAN
var ballivian = function(ctx , color ) {
...
};

//ITENEZ
var itenez = function( ctx,  color ) {
...
};

//MOXOS
var moxos  = function( ctx, color ) {
...
};
/*=========== P R O V I N C I A S : END===========*/

eso es todo por hoy 🙂 continuamos en otra oprtunidad 🙂 bye

Los archivos utilizados en este ejemplo, el mapa en formato PSD, archivos SVG y javascript en este «enlace pobre»

Tutorial anterior