Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Desarrollo Web / Mapas HTML5 – Elementos del canvas- Parte 4

Mapas HTML5 – Elementos del canvas- Parte 4

Autor jc mouse viernes, noviembre 23, 2012

Continuando con nuestro tutorial de “Mapas interactivos con HTML5” , esta es la sección que corresponde a los elementos que conforman el Mapa Estadístico.

En post anteriores ya se estableció la estructura del proyecto, se creo el documento HTML5, codigo CSS,  imágenes y el archivo “elecciones.js” , ademas de crearse los mapas de las provincias utilizando shapes [Parte1, Part2, Parte3 ],  en esta sección debemos crear los diferentes objetos que componen nuestro gráfico en el canvas.

object javascript

Elementos.

Cada una de nuestras provincias, las cuales ya definimos como pintarlas en un post anterior[3], es un objeto con las siguientes propiedades:

name: Nombre de la provincia

population: población habilitada para votar

gui: es una función que corresponde al tutorial3, pintados de los shapes, mapas de cada provincia.

color_release: color de la provincia cuando el mouse no esta dentro de las coordenadas del shape

color_hover: Color de la provincia cuando el mouse esta dentro de las coordenadas del shape.

function localidad( name, population , gui , color_release  , color_hover )
{
 this.name = name ;
 this.gui = gui ; 
 this.population = population  + ' Hab.';
 this.color_release = color_release; 
 this.color_hover = color_hover;
 this.color = color_release ;
}

Tenemos dos corruptos, digo candidatos políticos 🙂 para las elecciones, cada uno tiene las siguientes propiedades.

X,Y : Corresponden a las coordenadas de la esquina superior izquierda de cada recuadro amarillo

name: Nombre del corrupto in extremis.

sigla: Las iniciales del partido.

image: es un objeto javascript image.

votos: la cantidad de votos obtenidos.

function candidato( x , y , name  , sigla , image , votos )
{
 this.x = x;
 this.y = y; 
 this.name =  name;
 this.sigla = sigla; 
 this.foto = new Image();
 this.foto.src = image;
 this.votos = votos ;
}

Los votos nulos y blancos se almacenaran en un objeto llamado NoData, es similar al objeto candidato, la diferencia es que no tiene imagen y tiene dos campos para almacenar votos en lugar de uno, los votos nulos y blancos.

function NoData( x, y , nulos, blancos )
{
 this.x = x;
 this.y = y;
 this. nulos = nulos ;
 this.blancos= blancos ; 
}

Cuando se presiona una provincia, se ejecuta un evento ajax en espera de nuevos datos, mientras esto ocurre, se debe alertar al usuario y esto se lo hace con una pequeña ventana de alerta.

function Process( x , y )
{
 this.x = x;
 this.y = y; 
 this.imageLoad = new Image();
 this.imageLoad.src = 'images/wait.png'; 
}

Para terminar, se define un objeto para pintar el titulo.

function Title()
{
 this.x = 700;
 this.y = 80;
 this. name = "Elecciones Beni 2013" ;  
}

Fin de la Cuarta Parte

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

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

Personalizar iconos de un JTree

Personalizar iconos de un JTree

JTree cuenta con métodos que nos permiten cambiar los iconos de cada nodo según su estado, sin embargo a veces esto no e...

Imprimir Swing

Imprimir Swing

Java Printing nos permite hacer uso de las impresoras del sistema para, valga la redundancia 🙂 imprimir los gráficos de...

Matriz de Adyacencia: Representación de grafos en Java

Matriz de Adyacencia: Representación de grafos en Java

En este post conoceremos una forma de representar grafos mediante una Matriz de Adyacencia y un ejemplo básico de este e...

Crea un TextBox estilo Metro para java

Crea un TextBox estilo Metro para java

En este tutorial personalizaremos un JTextField java para darle la apariencia de un TextBox de Windows Metro. El TextBox...

Generar reportes con origen de datos JSON

Generar reportes con origen de datos JSON

JSON es un formato de texto ligero para el intercambio de datos ampliamente usado en los Servicios Web. En este post uti...

Comparte lo que sabes

Categorias

Últimas entradas

En este post aprenderemos lo que es la clonación de objetos en java o lo que es lo mismo, generación de nuevas instancia...

El índice TIOBE (TIOBE, The Importance of Being Earnest – “La importancia de ser honesto” – refe...

SDKMAN! es una herramienta para la administración de versiones paralelas de varios programas de desarrollo de software c...

Continuando con el estudio del meta lenguaje XML (Lenguaje de Marcado Extensible) bastante utilizado en el intercambio d...

Android Bolivia

MAUS