A reader of my previous article, the one about the comparison of the Australian States with other UN-countries, left a comment on saying that it would be interesting to see, for Australia, how the different aboriginal groups  are spread within the country. I found this comment very interesting and I decided to go so for. But, why not changing the study area?

I then came to the idea to picture the native settlers of the Canadian Provinces. More exactly, this post is about the percentage of the native settlers, that are Inuits, American Indian and Metis, in each Province of Canada.

The technology used in this case is Google Fusion Tables 

Canada – Inuit Population

How to create this map?

Data import

Data have been gathered from the website of the official Canadian Statistics and are from 2006. The geometries comes initially from a topo json file also used in another project published on github. This file has been converted to kml and imported, with the tabular data, into Google Fusion Table.

Both data have been merged together via a joint by using a common key: the name of the province.

Data have then been put on a map using the embedded Google Fusion Option.

Color Map

The following step is the symbolization.

This step has to be done for every attribute that one wants to show on a map, that is here, 4 times

• Inuits
• Metis
• American Indian
• Total Population per Province

App Creation

Code export

Each of the previous map has to be exported to get the html code.

Each map has a unique identifier and these has to be known for our final application.

From the exported code, I created a special style.css and engine.js file for respectively separating styles and javascript code. I added however the possibility to code in jquery.

Drop-down list

I added to my map the possibility to easily switch from one map to another via a drop down list.

In the html file, the drop-down list is added via this block:

 <div id="changeMap">
   <form>
       <select name="map">
       <option value="Inuits">Inuits</option>
       <option value="Metis">Metis</option>
       <option value="Indian">Indian</option>
       <option value="Population" selected>Population</option>
     </select>
   </form>
 </div>

In the engine.js file, we add something like this to make it possible to the user to switch between maps (here the example of switching to the Indian map):

 function changeToIndianMap(){
   google.maps.visualRefresh = true;
   removeLayer(layer);
   hideUnusedLegends();
   $('#indian').show();
   $("title").text("Canada - Indian");
   layer = new google.maps.FusionTablesLayer({
     map: map,
     heatmap: { enabled: false },
     query: {
       select: "col8>>0",
       from: "19R4wu3e15HQQ15Hc0B3O2OH8240CZtzQWzn_qyqX",
       where: ""
     },
     options: {
       styleId: 2,
       templateId: 2
     }
   });
 }

We also make sure the drop-down list appears at the right place in the app:

map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById('changeMap'));

The styles.css has finally been used to style the whole app up.