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

Ejemplo de uso de ProgressDialog

Ejemplo de uso de ProgressDialog

Un ProgressDialog muestra una ventana con un texto y una barra de progreso que indica el tiempo que tarda una tarea en r...

Creación y uso de parametros en Jaspersoft Studio

Creación y uso de parametros en Jaspersoft Studio

Hola 🙂 En este video tutorial veremos como crear y usar parámetros en reportes con JasperSoft Studio, la base de datos q...

Crea un plugin WP con panel de administracion

Crea un plugin WP con panel de administracion

En este post crearemos un plugin para el CMS WordPress el cual comprende el plugin en si, un panel de administración y e...

Introducción a Scene Builder y MVC (Parte I)

Introducción a Scene Builder y MVC (Parte I)

En este tutorial realizaremos una introducción al diseño de interfaces gráficas en JavaFX y Scene Builder, así también v...

Gestión de Stock – La Vista (Parte 3)

Gestión de Stock – La Vista (Parte 3)

En esta tercera parte del tutorial crearemos la interfaz de usuario GUI (VISTA) para el sistema de gestión de stock. Tom...

Blog MVC – Iniciando el proyecto [p2]

Blog MVC – Iniciando el proyecto [p2]

Segunda parte del tutorial [Crea tu blog con el patrón MVC y php]. En esta 2da parte toca ver lo que es la creación del...

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

Por lo general se usan transacciones a nivel base de datos y posteriormente se llaman estos a través de procedimientos a...

En este post, aprenderemos como conectar Visual Basic 6 con SQL Server, abrir una tabla, leer su contenido y mostrar est...

Lo que veremos en este post es la configuración del driver para PHP de SQL Server que ha creado Microsoft el cual permit...

Google Bard la inteligencia artificial de Google se actualiza con una mejora que entra a competir con el resto de IAs y...

Herramientas

Generador de Enlaces a Whatsapp