Creating an Advanced Fusion Google Map with Fusion Table

On a wintry Saturday in 2/21/2015 I teamed up at a hackathon to create a visualization of census data of nepal for code for nepal

 

www.codefornepal.org
http://www.codefornepal.org

They have been collecting Nepal Census Data and want to visualize it.   Here is a sample of their data in a google fusion table.

https://www.google.com/fusiontables/data?docid=1ST6PXyk3H5wnlTxgHyn4AIrFCGjk3-9WCkEEOtdE#rows:id=1
Google Fusion Table

They have the Nepali district shapefiles

Nepal Shapefile

What it will eventually work like
GOOGLEAPI

We start by merging the excel table with the shapefile

mergeNext After zooming out to the desired level and area we exported or published.

select publish

In the publishing options we copied the HTML and Javascript

copy html and javascript

Once there we pasted the files into jsfiddle to start editing them.

jsfiddle1Let us start my adding a two dropdown lists.

Do this by adding a form html tags to the bottom right before the </html> line

<form>
 <label>Data Points </label>
 <select id="Coloumn">
 <option value="Total population">Total Population</option>
 <option value="Household">Number of Households</option>
 <option value="Population Density">Population per sq km</option>
 <option value="Population land ratioy">Population per Ha</option>
 <option value="Geographic Square Area">Geographic area per sq km</option>
 <option value="Sex Ratio">Male per 100 Female</option>
 </select>
 <label>District</label>
 <select id="county">
 <option value="Achham">Achham</option>
 <option value="Arghakhanchi">Arghakhanchi</option>
 <option value="Baglung">Baglung</option>
 <option value="Baitadi">Baitadi</option>
 <option value="Bajhang">Bajhang</option>
</select>
 </form>

This is then what the code will look like

With dropdown menus

 

Advertisements
%d bloggers like this: