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

Que es y como se crea una Imagen Forense

Que es y como se crea una Imagen Forense

¿Que es y para que sirve una imagen forense? Una imagen forense es un «clon» (copia bit a bit) de algún dispositivo como...

Evaluar expresiones matemáticas en Java con JavaScript

Evaluar expresiones matemáticas en Java con JavaScript

Java 8 trae consigo una nueva versión del motor de JavaScript llamada Nashorn, este motor introduce mejoras de rendimien...

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

OS.js: Un sistema Operativo en tu navegador

OS.js: Un sistema Operativo en tu navegador

OS.js a pesar de lo que sugiere su nombre, no es en si un Sistema Operativo, es más, en su web oficial no se nombra  por...

Client REST usando GSON y Volley

Client REST usando GSON y Volley

En este post crearemos un cliente android para consumir un recurso de un REST API utilizando las librerías GSON y Volley...

Navega por Internet como si estuvieras en los 90!!!

Navega por Internet como si estuvieras en los 90!!!

En diciembre de 1990 se desarrolló una aplicación llamada WorldWideWeb en una máquina NeXT (programado con el lenguaje O...

Comparte lo que sabes

Categorias

Últimas entradas

En muchas ocasiones es necesaria la personalización de componentes java para que estos se adecuen a nuestros requerimien...

En este post mostramos como personalizar el Header (encabezado) de un componente JTable en Java colocando iconos, centra...

El JTable de Java es un gran componente para mostrar datos en una tabla de una forma rápida y sencilla, sin embargo en v...

En este post veremos un ejemplo sencillo de como descargar desde Internet archivos de cualquier tipo (*.jpg, *.png, *.gi...

Herramientas

Generador de Enlaces a Whatsapp