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

Añade un PlaceHolder a un JTextField

Añade un PlaceHolder a un JTextField

PlaceHolder: PlaceHolder es un atributo propio de HTML5 y es el texto que aparece dentro de un campo de texto (un JTextF...

Gráfico de lineas con jfreechart

Gráfico de lineas con jfreechart

Los gráficos de líneas muestran una serie como un conjunto de puntos conectados mediante una línea. Los valores se repre...

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

Ajustar imagen de fondo a diferentes resoluciones

Ajustar imagen de fondo a diferentes resoluciones

Si diseñamos paginas web, nos habremos topado con el problema de colocar una imagen de fondo y que este se adapte a toda...

Editor online HTML5

Editor online HTML5

JsFiddle es una herramienta que se puede utilizar de muchas maneras. Se puede utilizar como un editor en línea para crea...

Efecto Taringa! en vivo

Efecto Taringa! en vivo

En la pagina de Taringa, existe una sección donde se puede ver lo que pasa en ese foro al momento, “Taringa! en vi...

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

El Tangram es un juego chino muy antiguo, esta compuesto por 7 piezas: un paralelogramo (romboide), un cuadrado y 5 triá...

Espresso es un framework de testing propiedad de Google que está dirigido a desarrolladores que creen que las pruebas au...

Harvard WorldMap es una plataforma de mapeo de código abierto en línea, desarrollado por el Centro de Análisis Geográfic...

Realizar pruebas sobre nuestro código nos permiten comprobar su correcto funcionamiento e integración con otros módulos...

Android Bolivia

MAUS