Piotr GIS Works | Google Maps API | Fusion Table Data Visualization | GIS: Google fusion table and data visualization - jQuery layers slider

Fusion Table Slider is a slider for Fusion Tables Layers to creating mind-blowing data visualizations with must-see effects for your webpages. It's a collaborative project on GitHub and that you're welcomed to add improvements. You are granted full rights to contribute to the project or use it as a starting point for your own project. It's build on jQuery platform, JavaScript library designed to simplify the client-side scripting of HTML.

This Tutorial will show you how to customize FuisonTableSlider to your data set and create a data visualization project with it. It will walk you through adding the fusion table layers to Google Maps API (v3) and creating your first visualization web application.
DEMO on GitHub

This tutorial is for beginners I assume that you have some knowledge of HTML but you don't' have to be a expert in HTML or Google Maps API. Just remember coding it's intelligent copy & paste.

What you need to develop multi-layered Google map with slider ?
1. Uploaded data to Google Fusion table and created map. Remember if you want to present data in polygons you must use KML file with proper references. You can find a lot of KLM files in internet.
2. Each layer is separate fusion table, so if you want to show map with 3 layers, showing change over years in three years you must prepare 3 separate fusion tables with maps.
3. You need to download from GitHub my project.

4. Below is code in HTML file (index.html), the only file you need to modify to your slider works.

	<html>
	<head>
	<title>Slider to change fusiontable maps</title>
	<link href="https://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script src="simple-slider.js"></script>
	<link href="simple-slider.css" rel="stylesheet" type="text/css" />
	<link href="simple-slider-volume.css" rel="stylesheet" type="text/css" />

	<script type="text/javascript">
	function initialize() {
	var myLatLng = new google.maps.LatLng(4.9878199334447695, 53.7890625);
	map = new google.maps.Map(document.getElementById('map_canvas'), {
	center: myLatLng,
	zoom: 3,
	panControl: false,
	zoomControl: true,
	zoomControlOptions: {
	position: google.maps.ControlPosition.LEFT_CENTER
	},
	mapTypeControl: false,
	mapTypeId: 'roadmap'
	});
	// Replace the xxx with your Fusion Tables IDs.
	//You can use FT Wizard http://fusion-tables-api-samples.googlecode.com/svn/trunk/FusionTablesLayerWizard/src/index.html
	layer1 = new google.maps.FusionTablesLayer({
	query: {
	select: 'XXXX-GEOODED-COLUMN-XXXX',
	from: 'XXXX-FUSION-TABLE-ID-XXXX'
	},
	styleId: XXXX,
	templateId: XXXX,
	map: map,
	});

	layer2 = new google.maps.FusionTablesLayer({
	query: {
	select: 'XXXX-GEOODED-COLUMN-XXXX',
	from: 'XXXX-FUSION-TABLE-ID-XXXX'
	},
	styleId: XXXX,
	templateId: XXXX,
	map: map,
	});


	layer1.setMap(map);
	}

	tableidselections = 0;

	function changeLayer(tableidselections) {

	if (tableidselections == 1){
	clearmap();
	layer1.setMap(map); }

	if (tableidselections == 2){
	clearmap();
	layer2.setMap(map); }
	}

	function clearmap() {
	layer1.setMap(null);
	layer2.setMap(null);
	}

	</script>

	</head>

	<body onLoad="initialize()">
	<div id="map_canvas" style="width:900px; height:500px;"></div>
	<h2>Scroll the scrubber to change maps</h2>
	<input type="text" data-slider="true" data-slider-values="1,2,3,4,5,6,7,8,9" data-slider-highlight="true">
	<script>
	$("[data-slider]")
	.each(function () {
	var input = $(this);
	$("<span>")
	.addClass("output")
	.insertAfter($(this));
	})
	.bind("slider:ready slider:changed", function (event, data) {
	$(this)
	.nextAll(".output:first")
	.html(data.value.toFixed(3));
	tableidselections = data.value.toFixed(0);
	changeLayer(tableidselections);
	});


	</script>
	</body>
	</html>

view raw fusontableslider.html hosted with ❤ by GitHub

Lines to change
[3]Change title.
[13] This coordinates it's where your map will be centered
[16] Zoom level, optional to modified
[17-22] Map Controls (false/true) , optional to modified
[29 & 39] Fusion table location column is an existing geocoded column of type Location. For example country names or county names, zip codes etc.
[30 & 40] Fusion Table ID, you can use FT Wizard to extract ID
[32-33 & 42-43] Fusion table style and template ID, you can use also Wizard.

TIP. You can add more layers just copy paste the code and name it as next layer ie. layer3, layer4.

If you want to customize your slider change parameter in lines [76], below list of options

	<input type="text" data-slider="true">
	<input type="text" data-slider="true" data-slider-theme="volume">
	<input type="text" value="0.2" data-slider="true">
	<input type="text" data-slider="true" data-slider-step="0.1">
	<input type="text" data-slider="true" data-slider-range="10,1000">
	<input type="text" data-slider="true" data-slider-range="100,500" data-slider-step="100">
	<input type="text" data-slider="true" data-slider-range="100,500" data-slider-step="100" data-slider-snap="true">
	<input type="text" data-slider="true" data-slider-values="0,100,500,800,2000">
	<input type="text" data-slider="true" data-slider-values="0,100,500,800,2000" data-slider-snap="true">
	<input type="text" data-slider="true" data-slider-values="0,100,500,800,2000" data-slider-equal-steps="true" data-slider-snap="true">
	<input type="text" data-slider="true" value="0.8" data-slider-highlight="true">
	<input type="text" data-slider="true" value="0.4" data-slider-highlight="true" data-slider-theme="volume">

Demo of the Simple Slider styles.

After all upload files to your server, remember to upload all files index.html, simple-slider.css and simple-slider.js

Google fusion table and data visualization - jQuery layers slider - tutorial

1 comment: