Fusion Tables and Sliders

Adding a slider to a Fusion Table Layer

Adding Fusion Tables as a layer to your Google Map is a great way to display polygon data.  The polygons are very responsive and there are lot of ways to customize your map.  One of my favourite aspects of Fusion Tables is the ability to customize the style of the added Fusion Table layer through queries.  These styles can be applied to color, stroke weight, and opacity to lines and polygon values.

[iframe http://maps.citiesinstitutesurveys.org/Nat/NatsMaps/fusion_example.html 580 400]

 

See more about adding Fusion Table Layers at the Google Developers page: https://developers.google.com/maps/documentation/javascript/layers#FusionTables

With the ability to play with these styles we can now allow the user to customize the map in several different ways.  In this tutorial, we will use a slider to change the opacity of the polygons, although this technique can be used for to change any of the variables of the query.

JQuery User Interface is a great tool for adding jquery features. http://jqueryui.com/slider/ Shows all of the slider options.  We are going to use minimum, you can check out the demo there.

Using UI Slider Download at http://jqueryui.com/download/ at the top, select toggle all (remove check from all), then scroll down to ‘Widgets’ and click the check box next to slider.  This will automatically select the core UI files that are also necessary.

$( “#opactiySlider” ).slider({
range: “min”,
value: .40,
step: 0.01,
min: 0,
max: 1,
slide: function( event, ui ) {
$( “#newAmount” ).val(ui.value );
}
});

$(‘#opactiySlider’).css(“margin-left:15px; margin-right:15px;”);
$( “#newAmount” ).val( $( “#opactiySlider” ).slider( “value” ) );
});//end opacity slider

We use the value ‘step: 0.01’ so that the slider values can move by decimal values instead of integers.

Grab the selected value of the slider :
var opacity = $(‘#newAmount’).val();

Then change the polygon options to use the var opacity that you just extracted from the slider:

polygonOptions : {
fillColor : ‘#007FFF’,
fillOpacity : opacity

}

The final code all together is attached below.  Like I said, this is only part of what can be done with user interface changing the fusion table layer.  Try having a go with the fusion table queries: https://developers.google.com/maps/documentation/javascript/layers#FusionTables and the fusion table wizard is another great resource: http://fusion-tables-api-samples.googlecode.com/svn/trunk/FusionTablesLayerWizard/src/index.html

<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>

html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}

#opacityDiv {
position: absolute;
top: 50px;
right: 13px;
width: 225px;
background-color: #FFFFFF;
padding: 10px;
font-family: Arial, sans-serif;
font-size: 13px;
border: 1px solid #000;
z-index: 1000000;
}
</style>

<script type=”text/javascript”
src=”http://maps.google.com/maps/api/js?sensor=false”>  </script>
<link href=”css/ui-lightness/jquery-ui-1.9.2.custom.css” rel=”stylesheet”>
<script src=”js/jquery-1.8.3.js”></script>
<script src=”js/jquery-ui-1.9.2.custom.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$( “#opactiySlider” ).slider({
range: “min”,
value: .40,
step: 0.01,
min: 0,
max: 1,
slide: function( event, ui ) {
$( “#newAmount” ).val(ui.value );
}
});

$(‘#opactiySlider’).css(“margin-left:15px; margin-right:15px;”);
$( “#newAmount” ).val( $( “#opactiySlider” ).slider( “value” ) );
});//end ready function

 
var opacity = $(‘#newAmount’).val();
var map;
var layerl0;
function initialize() {
map = new google.maps.Map(document.getElementById(‘map-canvas’), {
center: new google.maps.LatLng(51.506178, -0.118309),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});

addFusionLayer();
}

google.maps.event.addDomListener(window, ‘load’, initialize);

function addFusionLayer(){
clearFusionLayer();
var opacity = $(‘#newAmount’).val();
fusionLayerStyled = new google.maps.FusionTablesLayer({
query: {
select: ‘\’geometry\”,
from: ‘1Hp50r74-mYAhCgbCOwbSb_MksI1GXRhz3Y8SDtI’
},
styles: [{
polygonOptions: {
fillColor: ‘#007FFF’,
fillOpacity: opacity
}
}],
map:map
});
}

function clearFusionLayer(){
if(typeof fusionLayerStyled!==’undefined’){
fusionLayerStyled.setMap(null);
}
if(typeof fusionLayerUnstyled!==’undefined’){
fusionLayerUnstyled.setMap(null);
}
}

</script>
</head>
<body>
<div id=”map-canvas”></div>
<div id=”opacityDiv”>
<label for=”newAmount”>Polygon Opacity: </label>
<input type=”text” id=”newAmount” style=”border: 0;width:50px” />
<div id=”opactiySlider”></div>
<button onclick=”addFusionLayer()” type=”button” style=”margin-top: 5px;margin-right:10px float: right;”>Set Opacity</button>
</div>
</body>
</html>