Última parte del tutorial «Mapas interactivos HTML5», vamos uniendo todo todo el código.
En la parte 5 de este tutorial, dejamos pendiente una función, esta función se llama paint(), lo que diferencia esta función de pintado del resto es que, esta función hace uso de un array de objetos que corresponden a las 6 provincias que se utilizan en este mapa para pintarlos en el canvas, este array «provincias» aún no esta declarado, se declara más abajo.
Así también esta función llama a las demás funciones de pintado pasando los parámetros que estos necesitan de los objetos declarados (candidatos, titulo, votos nulos y blancos).
function paint() { ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); //limpia pantalla //pinta las provincias for (var i=0; i<provincia.length; i++) { provincia[i].gui( ctx, provincia[i].color ); // pinta provincia if( !send_ajax ) //si mouse pasa sobre una provincia cambia a otro color provincia[i].color = ( ctx.isPointInPath( mouseX, mouseY ) ) ? provincia[i].color_hover : provincia[i].color_release ; } //pinta el resto de los shapes drawCandidato( jessica.x , jessica.y , jessica.name , jessica.sigla, jessica.foto , jessica.votos , 'red'); drawCandidato( carmelo.x , carmelo.y , carmelo.name , carmelo.sigla, carmelo.foto , carmelo.votos , 'green' ); drawNoData( noData.x, noData.y , noData.nulos, noData.blancos ); drawTitle( title.x , title.y , title.name ); }
Llego el momento de declarar todas las variables que se utilizan en este proyecto.
Se puede ver como se declara 2 objetos candidatos, jessica y carmelo, pasando como parámetros las coordenadas (X,Y) del shape ademas del nombre, sigla, ruta del archivo imagen y cantidad de votos que en un inicio es «0».
Se hace lo mismo con el objeto noData con sus respectivos valores de inicio.
Se declara también un array de objetos llamado «provincia», al mismo tiempo, mientras se declara el array, se inician las diferentes provincias (localidades) con sus respectivos valores de inicio.
/*=========== VARIABLES ===========*/ var canvas; var ctx; //coordenadas del mouse var mouseX, mouseY; //bandera para saber si se utiliza envio de datos por AJAX var send_ajax = false ; //candidatos var jessica = new candidato( 700 , 100 , 'Jessica Jordan', 'M.A.S.' , 'images/foto1.jpg' , 0 ); var carmelo = new candidato( 700 , 290 , 'Carmelo Lenz', 'BOLIVIA', 'images/foto2.jpg' , 0 ); var noData = new NoData( 700 , 470 , 0 , 0 ); var title = new Title(); var process = new Process( 130, 250 ); //array de provincias var provincia = [ new localidad('Vaca Diez' , '12.345' , vacadiez , '#9EE6A8' , '#2AA53B' ), new localidad('Mamore' , '45.203' , mamore , '#F4BDB6' , '#E94029' ) , new localidad('Yacuma', '35.991' , yacuma , '#A1B6F3' , '#002BA8' ) , new localidad('Ballivian', '22.321' , ballivian , '#FAF59E' , '#E7DB18' ) , new localidad('Itenez' , '10.678' , itenez , '#E1EE8D' , '#7A8A0E' ) , new localidad('Moxos' , '5.509' , moxos , '#64D8AD' , '#159364' ) ];
Se hace uso de la función jQuery «load», para esperar a que se carguen las imágenes en memoria y después pintar todo el canvas.
$(window).load(function(){ paint(); });
Para terminar implementamos las funciones y eventos del mouse en el jQuery, todo el código esta comentando y creo que se entiende claramente.
$(function(){ canvas = document.getElementById('canvas'); ctx = canvas.getContext('2d'); //eventos del mouse -> movimiento del raton o.O $('#canvas').mousemove(function(e) { //posicion del raton mouseX = e.pageX ; mouseY = e.pageY ; //se pinta todo el canvas paint(); //Si el raton esta dentro de alguna provincia->pinta Tooltip for (var i=0; i< provincia.length; i++) if( provincia[i].color !== provincia[i].color_release ) { drawTooltip ( mouseX, mouseY , provincia[i].name , provincia[i].population ); break; } //se esta enviando datos -> muestra ventana de aviso if( send_ajax ) drawProcess( process.x , process.y , process.imageLoad ); }); //cuando se presiona sobre el canvas $('#canvas').click(function(e) { for (var i=0; i< provincia.length; i++) { if( provincia[i].color !== provincia[i].color_release ) { send_ajax = true; jessica.votos = 0; carmelo.votos = 0; noData.nulos = 0; noData.blancos = 0 ; title.name = provincia[i].name var dataString = "provincia=" + provincia[i].name ; $.ajax({ type: 'POST', url: 'data.php', data: dataString, success: function(data) { var res = data.split('|') ; //divide el resultado jessica.votos = res[0] ; carmelo.votos = res[1] ; noData.nulos = res[2] ; noData.blancos = res[3] ; send_ajax = false; paint(); } });//fin ajax break; } } }); });//--> fin $
Se hace uso de AJAX para recibir los datos desde un servidor mediante el archivo «data.php» que es invocado cuando se realiza un clic sobre cualquier departamento, como no hacemos uso de ninguna base de datos, este archivo solo contendrá un array asociativo que a su vez esta compuesto de array asociativos con los valores de votación de cada departamento, ademas se utiliza la función sleep(2) para darle un poco de retardo y simular el trabajo que realiza un servidor al consultar la base de datos.
<?php if( $_POST ) { $votos = array( 'Vaca Diez'=> array( 'Jessica' => '12.5', 'Carmelo'=>'45.5', 'Blancos' => '10', 'Nulos' => '32' ), 'Mamore'=> array( 'Jessica' => '16.5', 'Carmelo'=>'75.5', 'Blancos' => '4', 'Nulos' => '4' ), 'Yacuma'=> array( 'Jessica' => '11.1', 'Carmelo'=>'75.2', 'Blancos' => '5.7', 'Nulos' => '8' ), 'Ballivian'=> array( 'Jessica' => '36.4', 'Carmelo'=>'37.3', 'Blancos' => '7.7', 'Nulos' => '8.68' ), 'Itenez'=> array( 'Jessica' => '16.7', 'Carmelo'=>'27.13', 'Blancos' => '37.1', 'Nulos' => '8.68' ), 'Moxos'=> array( 'Jessica' => '33.2', 'Carmelo'=>'26.8', 'Blancos' => '22.32', 'Nulos' => '18.68' ) ); sleep( 2 ); // retarda unos segundos echo $votos[ $_POST['provincia'] ] ['Jessica'] .'|'. $votos[ $_POST['provincia'] ] ['Carmelo'] .'|'. $votos[ $_POST['provincia'] ] ['Blancos'] .'|'. $votos[ $_POST['provincia'] ] ['Nulos'] ; } ?>
Espero haber sido bastante claro, no soy bueno explicando pero hice lo mejor que pude, aún así, si quedara alguna duda, dejo el proyecto completo para descarga directa y claro, los comentarios están abiertos 🙂
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! :)
En un post anterior [Crear plantillas personalizadas para Netbeans] vimos una forma sencilla que tiene Netbeans para fac...
Cuando realizamos proyectos java desde Netbeans, usamos System.out.println para imprimir datos en consola (para depurar,...
En este tutorial crearemos un sencillo rompecabezas de un tamaño de 4×6 con 24 piezas que se podrán mover haciendo...
Cuando se hace uso de programas a veces no importa que este cree más de una instancia al mismo tiempo, por ejemplo podem...
En este tutorial crearemos un sencillo juego de memoria en lenguaje java. Necesitamos IDE Netbeans 7.x Editor de imágene...
El cifrado francmasón es un cifrado por sustitución simple que cambia las letras por símbolos. Sin embargo, el uso de sí...
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...
excelente código
Gran post! Excelente diria yo.. (:
Gracias por todo >.<
Al momento de dar clic sobre cualquier de las provincias se queda en el mensaje de Procesando, por favor espere, y la pagina ya no responde, tengo que reiniciarla. No carga los datos del archivo data.php no se porque.
Saludos.