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 🙂
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.
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»
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! :)
Un ProgressDialog muestra una ventana con un texto y una barra de progreso que indica el tiempo que tarda una tarea en r...
Hola 🙂 En este video tutorial veremos como crear y usar parámetros en reportes con JasperSoft Studio, la base de datos q...
En este post crearemos un plugin para el CMS WordPress el cual comprende el plugin en si, un panel de administración y e...
En este tutorial realizaremos una introducción al diseño de interfaces gráficas en JavaFX y Scene Builder, así también v...
En esta tercera parte del tutorial crearemos la interfaz de usuario GUI (VISTA) para el sistema de gestión de stock. Tom...
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...
Los comentarios estan cerrados
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...
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
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
q bn ..excelentemente explicado
pero y el resto del tutorial?? 🙂
la parte 4?
Muy buena la explicación, pero me parece que falta la visualización, solo me sale lo degradado y lo abrí desde un servidor.