Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Desarrollo Web / Mapas en HTML5 – Uniendo todo – Parte 6

Mapas en HTML5 – Uniendo todo – Parte 6

Autor jc mouse sábado, noviembre 24, 2012

Última parte del tutorial «Mapas interactivos HTML5», vamos uniendo todo todo el código.

HTML5 Map Canvas

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 🙂

«ENLACE DE DESCARGA SUPER POBRE» 🙂

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

Introduccion a la programacion shell

Introduccion a la programacion shell

En este post veremos una muy pequeña introducción de lo que es el mundo de la programación en shell de Linux. Necesitamo...

Ejemplo de aplicación Android y SQLite

Ejemplo de aplicación Android y SQLite

En esta oportunidad dejo para estudio y critica de los programadores android un ejemplo sencillo de una aplicación que h...

Descargar Doodle Google Pacman

Descargar Doodle Google Pacman

Hace un par de años atras google para el aniversario del juego de Pacman saco un doodle en su homenaje, ese doodle que s...

Leer datos de un REST API con VUE

Leer datos de un REST API con VUE

En este post realizaremos un proyecto en VUE que se conectara a un REST API  y utilizara un servicio del mismo para obte...

Mapas con HTML5 – Funciones de pintado – Parte 5

Mapas con HTML5 – Funciones de pintado – Parte 5

En esta penúltima parte, declaramos las funciones que nos permitirán pintar los shapes en el canvas, vamos al grano que...

Google Circles en java

Google Circles en java

En este tutorial crearemos el botón de Google+ Google Circles para una interfaz de escritorio 🙂 si no sabes lo que son e...

2 comentarios en “Mapas en HTML5 – Uniendo todo – Parte 6”

  1. dante oh dice:

    excelente código

  2. GustavoMG dice:

    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.

Los comentarios estan cerrados

Comparte lo que sabes

Categorias

Últimas entradas

WhatsApp anuncio a través de su blog que ya se encuentra disponible la función de envío de fotos y videos TEMPORALES, es...

Muchas de las innovaciones computacionales de la NASA se desarrollaron para ayudar a explorar el espacio, pero ahora la...

TikTok es una plataforma de microvideos muy popular entre los jóvenes el cual cuenta ya con millones de videos cortps de...

Una clase JTree permite mostrar datos de una forma jerárquica y en realidad este objeto no contiene sus datos; es decir,...

Herramientas

Generador de Enlaces a Whatsapp