Skip to content

Instantly share code, notes, and snippets.

@cv26

cv26/test.html

Created June 19, 2017 15:46
Show Gist options
  • Save cv26/1452706d9513215cb5e90ef9b13d070d to your computer and use it in GitHub Desktop.
Save cv26/1452706d9513215cb5e90ef9b13d070d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
test.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"></meta>
<title>Data_Sample - Google Fusion Tables</title>
<style type="text/css">
html, body, #googft-mapCanvas {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#googft-legend{background-color:#fff;border:1px solid #000;font-family:Arial,sans-serif;font-size:12px;margin:5px;padding:10px 10px 8px}#googft-legend p{font-weight:bold;margin-top:0}#googft-legend div{margin-bottom:5px}.googft-legend-swatch{border:1px solid;float:left;height:12px;margin-right:8px;width:20px}.googft-legend-range{margin-left:0}.googft-dot-icon{margin-right:8px}.googft-paddle-icon{height:24px;left:-8px;margin-right:-8px;position:relative;vertical-align:middle;width:24px}.googft-legend-source{margin-bottom:0;margin-top:8px}.googft-legend-source a{color:#666;font-size:11px}
</style>
<link href="/apis/fusiontables/docs/samples/style/default.css"
rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://maps.google.com/maps/api/js?v=3"></script>
<script type="text/javascript">
function initialize() {
google.maps.visualRefresh = true;
var tableid = "10rToZkVcnR3ZAwOqy3ZMCkDMalawterdAl93PTLk"
var isMobile = (navigator.userAgent.toLowerCase().indexOf('android') > -1) ||
(navigator.userAgent.match(/(iPod|iPhone|iPad|BlackBerry|Windows Phone|iemobile)/));
if (isMobile) {
var viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'initial-scale=1.0, user-scalable=no');
}
var mapDiv = document.getElementById('googft-mapCanvas');
mapDiv.style.width = isMobile ? '100%' : '100%';
mapDiv.style.height = isMobile ? '100%' : '100%';
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(48.313333499583884, -122.35644562773437),
zoom: 6,
mapTypeId: 'satellite'
});
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend-open'));
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend'));
layer = new google.maps.FusionTablesLayer({
map: map,
heatmap: { enabled: false },
query: {
select: "col8",
from: "10rToZkVcnR3ZAwOqy3ZMCkDMalawterdAl93PTLk",
},
options: {
styleId: 2,
templateId: 2
}
});
if (isMobile) {
var legend = document.getElementById('googft-legend');
var legendOpenButton = document.getElementById('googft-legend-open');
var legendCloseButton = document.getElementById('googft-legend-close');
legend.style.display = 'none';
legendOpenButton.style.display = 'block';
legendCloseButton.style.display = 'block';
legendOpenButton.onclick = function() {
legend.style.display = 'block';
legendOpenButton.style.display = 'none';
}
legendCloseButton.onclick = function() {
legend.style.display = 'none';
legendOpenButton.style.display = 'block';
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<script type="text/javascript">
var layer = new google.maps.FusionTablesLayer();
query: {
select: ' sample_date'
from: '10rToZkVcnR3ZAwOqy3ZMCkDMalawterdAl93PTLk'
where: where
}
google.maps.event.addDomListener(document.getElementById("sample_date"),
'click', function() {
filterMap(layer, tableId, map);
});
google.maps.event.addDomListener(document.getElementById("sample_date"),
'click', function() {
filterMap(layer, tableId, map);
});
google.maps.event.addDomListener(document.getElementById("sample_date"),
'click', function() {
filterMap(layer, tableId, map);
});
}
// Filter the map based on checkbox selection.
function filterMap(layer, tableId, map) {
var where = generateWhere();
if (where) {
if (!layer.getMap()) {
layer.setMap(map);
}
layer.setOptions({
query: {
select: 'sample_date',
from: tableId,
where: where;
}
});
} else {
layer.setMap(null);
}
}
// Generate a where clause from the checkboxes. If no boxes
// are checked, return an empty string.
function generateWhere() {
var filter = [];
var date = document.getElementsByName("sample_date");
for (var i = 0, date; date = dates[i]; i++) {
if (date.checked) {
var sample_date > date.value;
filter.push("'" + sample_date + "'");
}
}
var where = '';
if (filter.length) {
where = "'sample_date' IN (" + filter.join(',') + ')';
}
return where;
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas"></div>
<div>
<input type="checkbox" checked="checked" name="date"
id= "sample_date" value="2012">
<label>2012</label>
<input type="checkbox" checked="checked" name="date"
id= "sample_date" value="2013">
<label>2013</label>
<input type="checkbox" checked="checked" name="date"
id="sample_date" value="2014">
<label>2014</label>
</div>
<div id="googft-mapCanvas"></div>
<input id="googft-legend-open" style="display:none" type="button" value="Legend"></input>
<div id="googft-legend">
<p id="googft-legend-title">Concentration of Microplastic (mg/L or ppm)</p>
<div>
<img class="googft-dot-icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiElEQVR42mNgQIAoIF4NxGegdCCSHAMzEC81izL7n746/X/VmSowbRho+B8oPhOmKM02zfb/TCzQItYCpDAWpOhA8YFirIoK9xaCFO0FKXrY/rAdq6Lm280gRbeJNikWZDc2RUYhRiBFITDHzwf5LmtjFth3GesyYL6bxoAGQOG0ERpO65DDCQDX7ovT++K9KQAAAABJRU5ErkJggg=="/>
<span class="googft-legend-range"> Low (0 to 0.001) </span>
</div>
<div>
<img class="googft-dot-icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAi0lEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NijL7v3p1+v8zZ6rAdGCg4X+g+EyYorS0NNv////PxMCxsRYghbEgRQcOHCjGqmjv3kKQor0gRQ8fPmzHquj27WaQottEmxQLshubopAQI5CiEJjj54N8t3FjFth369ZlwHw3jQENgMJpIzSc1iGHEwB8p5qDBbsHtAAAAABJRU5ErkJggg=="/>
<span class="googft-legend-range">Moderate (0.001 to 1) </span>
</div>
<div>
<img class="googft-dot-icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiklEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NUlH5v9rF5f+ZoCAwHaig8B8oPhOmKC1NU/P//7Q0DByrqgpSGAtSdOCAry9WRXt9fECK9oIUPXwYFYVV0e2ICJCi20SbFAuyG5uiECUlkKIQmOPng3y30d0d7Lt1bm4w301jQAOgcNoIDad1yOEEAFm9fSv/VqtJAAAAAElFTkSuQmCC"/>
<span class="googft-legend-range">High (1 to 4.3) </span>
</div>
<div class="googft-legend-source">
<a href="data?docid=10rToZkVcnR3ZAwOqy3ZMCkDMalawterdAl93PTLk" target="_blank">Source</a>
</div>
<input id="googft-legend-close" style="display:none" type="button" value="Hide"></input>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment