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

Libreria swing BlackTabbedPane

Libreria swing BlackTabbedPane

Continuación del tutorial [Personalizar JTabbedPane con Netbeans]. La clase BlackTabbedPaneUI que extendemos de BasicTab...

Dibujando con Canvas

Dibujando con Canvas

La clase Canvas (Lienzo)  de Android es una superficie que nos permite pintar figuras, texto e imágenes utilizando para...

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

Añade un PlaceHolder a un JTextField

Añade un PlaceHolder a un JTextField

PlaceHolder: PlaceHolder es un atributo propio de HTML5 y es el texto que aparece dentro de un campo de texto (un JTextF...

Uso de Tile Map en LibGDX

Uso de Tile Map en LibGDX

En esta ocasión vemos un ejemplo sencillo de como usar Tile Map en nuestros juegos android con la librería LibGDX utiliz...

Crear PopupMenu (Ventana Emergente)

Crear PopupMenu (Ventana Emergente)

En este tutorial crearemos una aplicación android que nos permitirá abrir un PopupMenu de donde podremos seleccionar una...

Comparte lo que sabes

Categorias

Últimas entradas

KolibriOS  es un pequeño sistema operativo poderoso, rápido y libre con un núcleo monolítico anticipativo en tiempo real...

Los cursos online se han convertido en algo común en nuestros días y las aplicaciones que hay en la nube para realizar r...

Dia Diagram Editor es un software gratuito de dibujo de código abierto para los sistemas operativos de Windows, Mac OS X...

En ocasiones el limite máximo de importación de base de datos que ofrece PhpMyAdmin (2MB) no es suficiente para lo que q...

Android Bolivia

MAUS