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

Cargar fuente TTF

Cargar fuente TTF

Necesitamos: Android Studio 2 tipos de fuente TTF Agregar Archivo de fuente al proyecto Paso 1: Crear carpeta assets Cli...

Pruebas instrumentadas con Espresso

Pruebas instrumentadas con Espresso

Espresso es un framework de testing propiedad de Google que está dirigido a desarrolladores que creen que las pruebas au...

Migrar proyecto Netbeans a Eclipse

Migrar proyecto Netbeans a Eclipse

En ocasiones por motivos cualesquiera que sea queremos pasar proyectos hechos en netbeans a Eclipse, Netbeans cuenta con...

Gestión de Stock (Parte 2)

Gestión de Stock (Parte 2)

Continuando con el desarrollo de la aplicación (Parte 1), abrimos Netbeans y creamos un nuevo proyecto al que llamaremos...

Compartir texto plano con un ShareActionProvider en Android

Compartir texto plano con un ShareActionProvider en Android

Un Action Provider es un elemento que habita en la Action Bar para incrementar la accesibilidad de nuestras aplicaciones...

Blog MVC – Carga de páginas estáticas [p4]

Blog MVC – Carga de páginas estáticas [p4]

Cuarta parte de esta pequeña serie de tutoriales sobre [Crea tu blog con el patrón MVC y php] En esta cuarta entrega ver...

Comparte lo que sabes

Categorias

Últimas entradas

“MyBatis es una herramienta de persistencia Java que se encarga de mapear sentencias SQL y procedimientos almacena...

MyBatis es un framework de persistencia Java que se encarga de mapear sentencias SQL y procedimientos almacenados a part...

Webcam Capture es un API  que permite usar una cámara web incorporada o externa directamente desde código Java utilizand...

im4java es una interfaz pura de Java para la línea de comandos de ImageMagick. La interfaz de la línea de comandos de IM...

Herramientas

Generador de Enlaces a Whatsapp