Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Desarrollo Web / Creación de mapas con shapes – Parte 3

Creación de mapas con shapes – Parte 3

Autor jc mouse domingo, noviembre 18, 2012

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

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 🙂

mapa modificado

– 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:

trucho

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

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

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.

Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye

Enjoy! :)

También Te Podría Interesar

Empaquetado de texturas en LibGDX

Empaquetado de texturas en LibGDX

Continuando con los tutoriales sobre LibGDX (Librería para el desarrollo de videojuegos), en esta ocasión veremos como e...

Plantilla android de aviso de página en construcción

Plantilla android de aviso de página en construcción

Cuando tenemos dominio web pero aun no tenemos el contenido listo es común colocar en su lugar una simple web de aviso q...

jFace – Crea retratos hablados

jFace – Crea retratos hablados

La policia, el FBI u otros organismos similares utilizaban a dibujantes para realizar el “retrato hablado” d...

Texto e Imagen en Java2d (Proyecto)

Texto e Imagen en Java2d (Proyecto)

Nivel: Intermedio-Avanzado IDE: Netbeans 6.9 o Sup. Tiempo: 30 minutos En este tutorial crearemos una aplicación que nos...

Seleccionar y mover shapes en html5

Seleccionar y mover shapes en html5

En este tutorial se hará uso de los eventos de ratón de jquery para desplazar shapes sobre el canvas, para tener una mej...

Mapas interactivos con HTML5 – Parte 1

Mapas interactivos con HTML5 – Parte 1

La tecnología de HTML5 y javascript  nos permite crear gráficos interactivos livianos sin tener que recurrir a flash, el...

4 comentarios en “Creación de mapas con shapes – Parte 3”

  1. Jef dice:

    Buen dia, segui al pie de la letra tu proyecto de mapas, me parece que falta una pequeña parte para concluirlo.
    puedes ayudarme con esto, no se que hacer con el archivo data.php y veo que utilizar el archivo .js con otro nombre .min.js.
    por otro lado te felicito, muy bien explicado hasta donde puedo segurite.

    un saludo

    1. Mouse dice:

      hola se usa el min.js para indicar que el contenido del archivo JS se a optimizado, el archivo php funciona desde un servidor, si lo abres directamente en el navegador no te funcionara

  2. john jairo dice:

    q bn ..excelentemente explicado

    pero y el resto del tutorial?? 🙂

    la parte 4?

  3. Rocio dice:

    Muy buena la explicación, pero me parece que falta la visualización, solo me sale lo degradado y lo abrí desde un servidor.

Los comentarios estan cerrados

Comparte lo que sabes

Categorias

Últimas entradas

En este y un segundo post desarrollaremos un microservicio java utilizando el framework Spark que implementara las funci...

Oi galera, en esta oportunidad les traigo una curiosidad que encontré por casualidad perdiendo el tiempo en Internet, se...

Kotlin es un lenguaje de programación relativamente nuevo que ha ido ganando terreno en el desarrollo de aplicaciones pa...

Kotlin es un lenguaje de programación de tipado estático que corre sobre la máquina virtual de Java y que también puede...

Android Bolivia

MAUS