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

Servicio Web SOAP en Java

Servicio Web SOAP en Java

En este post vamos a construir un Servicio Web bajo el protocolo SOAP (Simple Object Access Protocol) el cual básicament...

Subir imagen a un servidor web con REST/JSON

Subir imagen a un servidor web con REST/JSON

En este tutorial crearemos una sencilla aplicación para android que nos permitirá subir una imagen a un servidor web. La...

¿Qué es AngularJS?

¿Qué es AngularJS?

Bienvenido a este artículo soy Jose Pedraza Desarrollador Web por más de 7 años, escribiré una serie de artículos para i...

Botones circulares de Google Plus en java

Botones circulares de Google Plus en java

Continuación del tutorial “Google Circles en java” o.O 🙂 La Interfaz El proyecto consta de una sola interfaz...

Leer y Escribir registros en archivo de texto

Leer y Escribir registros en archivo de texto

A veces se necesita utilizar archivos de texto plano como contenedor de registros como si de una base de datos se tratar...

Uso de Tiles para crear fondo para aplicaciones

Uso de Tiles para crear fondo para aplicaciones

Un Tile o azulejo, es una parte seccionada de una imagen, por ejemplo la imagen de abajo (chica anime) esta dividida en...

Comparte lo que sabes

Categorias

Últimas entradas

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

En este post conoceremos algunos de los operadores de comparación que existen en Linux y realizaremos unos ejercicios pa...

En este post conocernos lo que son las Estructuras de Control IF en los script de Bash. Estas estructuras nos ayudan a c...

Todo producto tecnológico tiene un ciclo de vida, algunos bastante corto otros muy largo, podemos mencionar el software...

Android Bolivia

MAUS