Le Directeur général des élections du Québec (DGEQ)

PolygooMap

Qu'est-ce que c'est?

PolygooMap est une petite librairie qui a pour but de faciliter la création de cartes Google interactives. Le but premier de cette librairie étant de permettre la diffusion des résultats électoraux des élections générales au Québec d'une manière moderne, l'outil est maintenant disponible pour tous les développeurs pour toute utilisation.

Gardez en tête que cette librairie est encore embryonnaire et qu'elle est en constante évolution. Nous sommes d'ailleurs ouverts à tout commentaire constructif la concernant.

TÉLÉCHARGER (version minified) | Commentaires | Github



Préalables



Documentation

Paramètres

ParamètreTypeValeur par défautDescription
map (obligatoire) Instance de carte Google (object) null Seul paramètre obligatoire du constructeur; sans paramètre de carte les polygones ne peuvent être créés sur la carte.
polygons array Voir plus loin Tableau de coordonnées géographiques ou tableau «d'objet LatLng de Google maps». Le tableau peut aussi contenir plusieurs tableaux dans le cas où le polygone est fractionné en plusieurs sections (voir exemples).
fillColor string #C5FF5E Couleur du polygone. Toutes les couleurs CSS sont prises en charge (exemple : "green").
fillOpacity number 0.3 Opacité de la couleur du polygone, varie de 0 (transparent) à 1 (opaque).
strokeWeight number 1 Grosseur du trait de bordure en pixels.
strokeColor string #000000 Couleur du trait de bordure. Toutes les couleurs CSS sont prises en charge (exemple : "green").
strokeOpacity number 0.7 Opacité du trait de bordure, varie de 0 (transparent) à 1 (opaque).
clickable boolean true Indique si le polygone traitera les événements du curseur (clique, double-clique, etc.). Si le paramètre est à false, il ne sera pas possible d'utiliser l'événement onClick.
draggable boolean false Indique s'il sera possible de déplacer le polygone par mouvement du curseur.
editable boolean false Indique si le polygone pourra être modifié directement sur la carte par mouvement du curseur. Peu devenir extrêmement demandant pour le processeur si les polygones ont un grand nombre de points ou si la page comporte un grand nombre de polygones.
visible boolean true Indique si le polygone est visible ou non. Si le polygone n'est pas visible, aucun des événements ne pourra être déclenché (onClick, onMouseOver, etc.).
zIndex number 1 Indique la "priorité d'apparition" du polygone, si deux polygones sont un par-dessus l'autre, celui avec le plus petit zIndex sera sur le dessus.
onClick object or function null Action lors de l'événement clique sur le polygone (voir exemples).
onMouseOver object or function null Action lors de l'événement onMouseOver, lorsque le curseur est par-dessus le polygone (voir exemples).
onMouseOut object or function null Action lors de l'événement onMouseOut, lorsque le curseur sort des limites du polygone (voir exemples).

Méthodes

MéthodeParamètre(s)Valeur de retourDescription
onClick() anonymous function Aucune Permet la modification de l'événement onClick du polygone. Doit recevoir une fonction anonyme (voir exemples).
onMouseOver() anonymous function Aucune Permet la modification de l'événement onMouseOver du polygone. Doit recevoir une fonction anonyme (voir exemples).
onMouseOut() anonymous function Aucune Permet la modification de l'événement onMouseOut du polygone. Doit recevoir une fonction anonyme (voir exemples).
show() Aucun Aucune Affiche le polygone si celui-ci est caché.
hide() Aucun Aucune Cache le polygone si celui-ci est affiché.
isVisible() Aucun boolean Retourne true si le polygone est visible; false sinon.
getRawPoly() Aucun Google maps polygon (object) Permet l'accès direct à l'objet polygone de l'API Google maps.
setFillColor() object Aucune Permet de changer la couleur et l'opacité du polygone (voir exemples).
setStroke() object Aucune Permet de changer la couleur, l'épaisseur et l'opacité de la bordure du polygone (voir exemples).
getMaxBounds() Aucun Google maps LatLngBounds (object) Retourne un rectangle (objet LatLngBounds) qui englobe toutes les coordonnées du polygone (maximum et minimum pour la longitude et la latitude).
getCenter() Aucun Google maps LatLng (object) Retourne le centre du polygone (latitude et longitude).


Exemples

Exemple 1 - Carte avec options par défaut

Code JavaScript

new polygooMap({
	map: map
});
				

Exemple 2 - Carte avec plusieurs instances de couleurs différentes

Code JavaScript

new polygooMap({
	map: map,
	fillColor: "green",
	fillOpacity: 0.5,
});

new polygooMap({
	map: map,
	fillColor: "#D81A1A",
	fillOpacity: 1,
	polygons:[
		[new google.maps.LatLng(50,-69),new google.maps.LatLng(48, -69),new google.maps.LatLng(48, -64),new google.maps.LatLng(50, -64)],
		[new google.maps.LatLng(47,-69),new google.maps.LatLng(45, -69),new google.maps.LatLng(45, -64),new google.maps.LatLng(47, -64)]
	],
});

new polygooMap({
	map: map,
	fillColor: "#2F3CCE",
	fillOpacity: 0.2,
	polygons:[
		[new google.maps.LatLng(50,-63),new google.maps.LatLng(48, -63),new google.maps.LatLng(48, -60),new google.maps.LatLng(50, -60)]
	],
});
				

Exemple 3 - Carte avec événements

Code JavaScript

new polygooMap({
	map: map,
	onClick: function(e){
		console.log("onClick event Fired!");
		console.log(e.latLng.lat());
		console.log(e.latLng.lng());
	},
	onMouseOut:{
		fillColor: "#2F3CCE",
		fillOpacity: 0.3,
		strokeWeight: 2,
		strokeOpacity: 1,
		strokeColor: "black"
	},
	onMouseOver:function(e){
		console.log("onMouseOver event Fired!");
		this.setOptions({
			fillColor: "purple",
			fillOpacity: 0.3,
			strokeWeight: 1,
			strokeOpacity: 0.5,
			strokeColor: "red"
		});
	}
});
				

Commentaire

Dans le code ci-dessus, les événements onClick et onMouseOver font appel à des fonctions anonymes, alors que l'événement onMouseOut utilise un objet contenant de nouveaux paramètres d'apparence pour le polygone.

Points importants à retenir :

  • Le paramètre e passé aux fonctions anonymes nous permet d'avoir accès aux coordonnées du curseur lors de l'événement.
  • this dans le contexte des fonctions anonymes fait référence à l'objet polygon de Google maps, ce qui permet d'utiliser toutes ces méthodes.

Exemple 4 - Carte avec appels aux méthodes de PolygooMap


|

Code JavaScript

var polygon = new polygooMap({
	map: map
});

polygon.onClick(function(e){
	console.log("onClick event Fired!");
	console.log(e.latLng.lat());
	console.log(e.latLng.lng());
});

polygon.onMouseOver(function(e){
	console.log("onMouseOver event Fired!");
	console.log(e.latLng.lat());
	console.log(e.latLng.lng());
});

polygon.onMouseOut(function(e){
	console.log("onMouseOut event Fired!");
	console.log(e.latLng.lat());
	console.log(e.latLng.lng());
});

$("#hidePoly").click(function(){
	polygon.hide();
	polygon.setStroke({
		color: "black",
		weight: 2,
		opacity: 1
	});
});

$("#showPoly").click(function(){
	polygon.show();
	polygon.setFillColor({
		color: "green",
		opacity: 0.5
	});
});
				

Commentaire

Les objets passés en paramètre pour les méthodes setStroke et setFillColor peuvent comporter respectivement :

  • color, weight et opacity pour setStroke
  • color et opacity pour setFillColor

Points importants à retenir :

  • Le paramètre e passé aux fonctions anonymes nous permet d'avoir accès aux coordonnées du curseur lors de l'événement.
  • this dans le contexte des fonctions anonymes fait référence à l'objet polygon de Google maps, ce qui permet d'utiliser toutes ces méthodes.



Développements futurs

Voici une petite liste des développements futurs pour la classe