cv26/test.html

## 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>

	<!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>