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

PolygooMap

What is it?

PolygooMap is a small JavaScript library that helps create and manipulate interactive Google maps. The primary goal of this library is to allow for the diffusion of election results of Québec’s general elections in a modern fashion; the tool is now available for all developers to use.

Keep in mind that this library is still in its early stages and that it is constantly evolving. We are also open to any constructive comments about it.

DOWNLOAD (Minified) | Comments | Github



Prerequisites



Documentation

Parameters

ParameterTypeDefault valueDescription
map (mandatory) Instance de carte Google (object) null The only obligatory parameter for the constructor; without a map parameter the polygons cannot be created on the map.
polygons array See below A geographic coordinates table or a Google Maps LatLng objects table. The table may also contain several tables in the case where the polygon is split into several sections (see examples).
fillColor string #C5FF5E Polygon’s color. All CSS colours are supported (example: "green").
fillOpacity number 0.3 Polygon’s color opacity, varies from 0 (transparent) to 1 (opaque).
strokeWeight number 1 Size of the border line in pixels.
strokeColor string #000000 Color of border line. All CSS colors are supported (example: "green").
strokeOpacity number 0.7 Opacity of the border line, varies from 0 (transparent) to 1 (opaque).
clickable boolean true Indicates whether this polygon handles click events (click, double-click, etc.). If the parameter is false, onClick event will not work.
draggable boolean false Indicates whether polygons can be moved using the cursor.
editable boolean false Indicates whether polygon could be directly modified on the map using the cursor. It can be extremely taxing for the processor if the polygons contain a large number of points or if the page contains a large number of polygons.
visible boolean true Indicates whether the polygon is visible or not. If the polygon is not visible, no other events can be undertaken (onClick, onMouseOver, etc.).
zIndex number 1 Indicates the appearance priority of the polygon; if two polygons are right on top of each other, then the one with the smallest z-index will be on top.
onClick object or function null Action during the event click on the polygon (see examples).
onMouseOver object or function null Action during an onMouseOver event, when the cursor is over the polygon (see examples).
onMouseOut object or function null Action during an onMouseOut event, when the cursor is outside the polygon (see examples).

Methods

MethodParameter(s)Return valueDescription
onClick() anonymous function None Allows modification of the onClick event of the polygon. Should receive an anonymous function (see examples).
onMouseOver() anonymous function None Allows modification of the onMouseOver event of the polygon. Should receive an anonymous function (see examples).
onMouseOut() anonymous function None Allows modification of the onMouseOut event of the polygon. Should receive an anonymous function (see examples).
show() None None Shows the polygon if it is hidden.
hide() None None Hides the polygon if it is showing.
isVisible() None boolean Returns true if the polygon is visible; false if not.
getRawPoly() None Google maps polygon (object) Allows direct access to the polygon object of the Google maps API
setFillColor() object None Allows polygon color and opacity to be changed (see examples).
setStroke() object None Allows polygon's border color, thickness, and opacity to be changed (see examples).
getMaxBounds() None Google maps LatLngBounds (object) Returns a rectangle (LatLngBounds object) that encompasses all the polygon’s coordinates (maximum and minimum for longitude and latitude).
getCenter() None Google maps LatLng (object) Returns the centre of the polygon (latitude and longitude).


Examples

Example 1 - Map with default options

JavaScript code

new polygooMap({
	map: map
});
				

Example 2 - Map with multiple instances of different colors

JavaScript code

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)]
	],
});
				

Example 3 - Map with events

JavaScript code

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"
		});
	}
});
				

Comments

In the code below the onClick and onMouseOver events, make use of anonymous functions while the onMouseOut event uses an object containing new appearance parameters for the polygon.

Important points to remember:

  • The parameter e passed to anonymous functions allows us to have access to the cursor coordinates during the event.
  • this in the context of anonymous functions refers to the polygon object of Google maps, which allows you to use all these methods.

Example 4 - Map with call to PolygooMap methods


|

JavaScript code

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
	});
});
				

Comments

The objects passed as a parameter for the setStroke and setFillColor methods can behave respectively:

  • color, weight and opacity for setStroke
  • color and opacity for setFillColor

Important points to remember:

  • The parameter e passed to anonymous functions allows us to have access to the cursor coordinates during the event.
  • this in the context of anonymous functions refers to the polygon object of Google maps, which allows you to use all these methods.



Future developments

Here is a short list of future developments for the library: