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.
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
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! :)
XAMPP es un software para la gestión de base de datos, servidor web apache e interprete para lenguajes como php o perl....
En este post crearemos un plugin para el CMS WordPress el cual comprende el plugin en si, un panel de administración y e...
Un Tile o azulejo, es una parte seccionada de una imagen, por ejemplo la imagen de abajo (chica anime) esta dividida en...
SOAP (Simple Object Access Protocol) es un protocolo estándar que define cómo dos objetos en diferentes procesos pueden...
En un ejemplo anterior [Seleccionar y mover shapes en html5] se utilizo un método sencillo para detectar si un punto se...
En este post hablaremos sobre la biblioteca de Apache PDFBox el cual es una herramienta para java de código abierto que...
Si trabajas con redes sociales (RRSS) a continuación te muestro tres herramintas gratuitas que te ayudaran a la hora de...
Por lo general se usan transacciones a nivel base de datos y posteriormente se llaman estos a través de procedimientos a...
En este post, aprenderemos como conectar Visual Basic 6 con SQL Server, abrir una tabla, leer su contenido y mostrar est...
Lo que veremos en este post es la configuración del driver para PHP de SQL Server que ha creado Microsoft el cual permit...