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! :)
Necesitamos: Android Studio 2 tipos de fuente TTF Agregar Archivo de fuente al proyecto Paso 1: Crear carpeta assets Cli...
Este post es la continuación del tutorial «Generador de código para Netbeans« en donde vimos como crear un modulo para N...
Common Object Request Broker Architecture (CORBA) es un estándar que permite que diversos componentes de software escrit...
Continuando con el estudio del meta lenguaje XML (Lenguaje de Marcado Extensible) bastante utilizado en el intercambio d...
En muchas ocasiones es necesaria la personalización de componentes java para que estos se adecuen a nuestros requerimien...
En esta ocasión aprenderemos a conectaros con una base de datos Oracle desde Laravel. Es un tutorial sencillo y cortito,...
WhatsApp anuncio a través de su blog que ya se encuentra disponible la función de envío de fotos y videos TEMPORALES, es...
Muchas de las innovaciones computacionales de la NASA se desarrollaron para ayudar a explorar el espacio, pero ahora la...
TikTok es una plataforma de microvideos muy popular entre los jóvenes el cual cuenta ya con millones de videos cortps de...
Una clase JTree permite mostrar datos de una forma jerárquica y en realidad este objeto no contiene sus datos; es decir,...