forked from PiotrKrosniak/FusionTablesSlider
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
96 lines (82 loc) · 2.57 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<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>