I'm wondering if it's interfering in some way, with my pie and scatter
(which also reference the "layer" variable). I wanted to spare you a
lengthy code posting, but maybe it would be helpful to see the rest of the
code??
<!-- Below is the code for the google map: -->
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
google.load('maps', '3.9', {other_params: "sensor=false"});
google.setOnLoadCallback(initialize);
var map;
function initialize() {
var myOptions = {
center: new google.maps.LatLng(38.099983, -80.683594),
zoom: 7,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
},
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
var layer = new google.maps.FusionTablesLayer();
updateLayerQuery(layer);
layer.setMap(map);
var kmlLayerNationalforestURL =
'http://www.esenvironmental.com/kml/national_forests.kml';
var kmlLayerWildernessURL =
'http://www.esenvironmental.com/kml/wilderness.kml';
var kmlLayerBoundaryURL =
'http://www.esenvironmental.com/kml/study_region.kml';
<!-- preserveViewport prevents the map from zooming to the specific kml
file -->
var kmlOptions = {
preserveViewport: true
};
kmlLayerNationalforest = new
google.maps.KmlLayer(kmlLayerNationalforestURL, kmlOptions);
kmlLayerNationalforest.setMap(null);
kmlLayerWilderness = new google.maps.KmlLayer(kmlLayerWildernessURL,
kmlOptions);
kmlLayerWilderness.setMap(null);
kmlLayerBoundary = new google.maps.KmlLayer(kmlLayerBoundaryURL,
kmlOptions);
kmlLayerBoundary.setMap(map);
document.getElementById('show_hide_KML_Layer_Nationalforest').checked =
false;
document.getElementById('show_hide_KML_Layer_Wilderness').checked = false;
document.getElementById('show_hide_KML_Layer_Boundary').checked = true;
document.getElementById('show_hide_Layer').checked = true;
//In the Javascript OUTSIDE of where you are creating your map, toggle the
display of the KML Layers
//(see near the end of this Java Script code). If the toggle is created
inside the map code, toggling will NOT work!
var pieChart = new google.visualization.ChartWrapper({
containerId: "visualization",
chartType: "PieChart",
options: {
colors: ['#0000CC', '#3399FF', '#66CC00', '#FFFF00', '#FF9933',
'#FF0033'],
legendTextStyle: {
color: '#666666',
fontSize: '11'
},
titleTextStyle: {
color: '#006600',
fontSize: '12'
},
titlePosition: 'out',
legend: 'left',
is3D: true,
height: 150,
width: 350,
backgroundColor: 'none',
tooltip: {
textStyle: {
color: 'black'
},
showColorCode: true
},
pieSliceText: 'percentage',
pieSliceTextStyle: {
color: 'white',
fontSize: '11'
},
chartArea: {
top: '30',
left: '5',
height: "80%",
width: "70%"
}
}
});
drawVisualization('Bear Branch');
var query = new
google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=');
query.setQuery('SELECT Site, CALK, MAGIC_CL50 FROM 3235688');
query.send(function(response) {
var data = response.getDataTable();
var baseView = new google.visualization.DataView(data);
baseView.setColumns([1, 2]);
var scatter = new google.visualization.ChartWrapper({
containerId: "scatter",
chartType: "ScatterChart",
dataTable: baseView,
options: {
width: 300,
height: 300,
titleX: 'ANC (ueq/L)', fontSize: '12',
title: 'Site',
backgroundColor: {fill: 'white'},
titleTextStyle: {
color: '#006600',
fontSize: '12'
},
titleY: 'CL for ANC=50 (meq/m2/yr)', fontSize: '12',
fontName: 'Arial',
series: [{
pointSize: 5
}, {
visibleInLegend: false,
pointSize: 10,
color: 'red'
}],
legend: {
position: 'none',
textStyle: {
color: 'blue',
fontSize: 12
}
}
}
});
var runOnce = google.visualization.events.addListener(scatter,
'ready', function() {
google.maps.event.addListener(layer, 'click', function(e) {
var Site = e.row['Site'].value;
setScatterSelection(Site);
drawVisualization(Site);
});
google.maps.event.addDomListener(document.getElementById('Site'), 'change',
function() {
var Site = this.value;
updateLayerQuery(layer, Site);
setScatterSelection(Site);
drawVisualization(Site);
});
google.visualization.events.removeListener(runOnce);
});
setScatterSelection('Bear Branch');
function setScatterSelection(site) {
var row = data.getFilteredRows([{
column: 0,
value: site
}])[0];
var view = new google.visualization.DataView(baseView);
view.setColumns([0, 1, {
type: 'number',
label: baseView.getColumnLabel(1),
calc: function(dt, index) {
if (row == index) {
return dt.getValue(index, 1);
}
else {
return null;
}
}}]);
var ready = google.visualization.events.addListener(scatter,
'ready', function() {
scatter.getChart().setSelection([{
row: row,
column: 2
}]);
google.visualization.events.removeListener(ready);
});
scatter.setDataTable(view);
scatter.setOption('title', site);
scatter.draw();
};
});
function drawVisualization(Site) {
var pieQuery = new
google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=');
pieQuery.setQuery("SELECT Site, BCw, BCdep, Nup, Nimm, ANClimit,
BCup FROM 3235688 WHERE Site = '" + Site + "'");
pieQuery.send(function(response) {
var baseData = response.getDataTable();
var pieData = new google.visualization.DataTable();
pieData.addColumn('string', baseData.getColumnLabel(0));
pieData.addColumn('number', 'Value');
for (var i = 1; i < baseData.getNumberOfColumns(); i++) {
pieData.addRow([baseData.getColumnLabel(i),
baseData.getValue(0, i)]);
}
pieChart.setOption('title', Site);
pieChart.setDataTable(pieData);
pieChart.draw();
basePieData = null;
pieData = null;
});
}
function updateLayerQuery(layer) {
layer.setOptions({
query: {
select: 'Site',
from: '3235688'
}
});
}
}
function toggleKMLLayerBoundary() {
if
(!document.getElementById('show_hide_KML_Layer_Boundary').checked)
kmlLayerBoundary.setMap(null);
else
kmlLayerBoundary.setMap(map);
}
function toggleKMLLayerWilderness() {
if
(!document.getElementById('show_hide_KML_Layer_Wilderness').checked)
kmlLayerWilderness.setMap(null);
else
kmlLayerWilderness.setMap(map);
}
function toggleKMLLayerNationalforest() {
if
(!document.getElementById('show_hide_KML_Layer_Nationalforest').checked)
kmlLayerNationalforest.setMap(null);
else
kmlLayerNationalforest.setMap(map);
}
function ToggleLayer() {
var chkLayer = document.getElementById("show_hide_Layer");
if (chkLayer.checked === true) {
//Turn layer on
layer.setMap(map);
}
else {
//Turn layer off
layer.setMap(null);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
On Wednesday, August 1, 2012 1:06:34 PM UTC-7, es wrote:
> Oh yes... I see that now. However after making the change the fusion
> layer still does not turn off and on. Any other thoughts?
>
> On Wednesday, August 1, 2012 12:58:51 PM UTC-7, asgallant wrote:
>
>> It's in the javascript; it should be:
>>
>> var chkLayer = document.getElementById("show_hide_Layer");
>>
>> On Wednesday, August 1, 2012 3:53:31 PM UTC-4, es wrote:
>>>
>>> I tried using a lower case "l", but that didn't work either:
>>> id="show_hide_layer". Is this the wrong id all together?
>>>
>>>
>>>
>>> On Wednesday, August 1, 2012 12:34:01 PM UTC-7, asgallant wrote:
>>>
>>>> The id of the checkbox doesn't match the id you use to set the chkLayer
>>>> variable in the ToggleLayer function.
>>>>
>>>> On Wednesday, August 1, 2012 3:15:43 PM UTC-4, es wrote:
>>>>>
>>>>> I have unsuccessfully tried to create a toggle (checkbox) for my
>>>>> google fusion tables layer which should work with the toggling of my kml
>>>>> layers (the kml layers toggle off and on my map successfully). Here are
>>>>> some snippets of code that I am using to code the klm layers and the one
>>>>> google fusion layer. I have not included a bunch of other coding,
>>>>> including the pie and scatter plots (also referencing the fusion table
>>>>> layer). Thanks in advance for any help!
>>>>>
>>>>> function initialize() {
>>>>> var myOptions = {
>>>>> center: new google.maps.LatLng(38.099983, -80.683594),
>>>>> zoom: 7,
>>>>> mapTypeControl: true,
>>>>> mapTypeControlOptions: {
>>>>> style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
>>>>> position: google.maps.ControlPosition.TOP_RIGHT
>>>>> },
>>>>> zoomControlOptions: {
>>>>> style: google.maps.ZoomControlStyle.LARGE
>>>>> },
>>>>> streetViewControl: true,
>>>>> streetViewControlOptions: {
>>>>> position: google.maps.ControlPosition.LEFT_TOP
>>>>> },
>>>>> mapTypeId: google.maps.MapTypeId.TERRAIN
>>>>> };
>>>>>
>>>>> map = new google.maps.Map(document.getElementById('map_canvas'),
>>>>> myOptions);
>>>>> //the "layer" is the one I am trying to have function with a toggle
>>>>> var layer = new google.maps.FusionTablesLayer();
>>>>> updateLayerQuery(layer);
>>>>> layer.setMap(null);
>>>>>
>>>>> var kmlLayerWildernessURL = '
>>>>> http://www.esenvironmental.com/kml/wilderness.kml';
>>>>> var kmlLayerBoundaryURL = '
>>>>> http://www.esenvironmental.com/kml/study_region.kml';
>>>>> var kmlOptions = {
>>>>> preserveViewport: true
>>>>> };
>>>>>
>>>>>
>>>>> kmlLayerWilderness = new google.maps.KmlLayer(kmlLayerWildernessURL,
>>>>> kmlOptions);
>>>>> kmlLayerWilderness.setMap(null);
>>>>> kmlLayerBoundary = new google.maps.KmlLayer(kmlLayerBoundaryURL,
>>>>> kmlOptions);
>>>>> kmlLayerBoundary.setMap(map);
>>>>>
>>>>> document.getElementById('show_hide_KML_Layer_Wilderness').checked =
>>>>> false;
>>>>> document.getElementById('show_hide_KML_Layer_Boundary').checked = true;
>>>>> document.getElementById('show_hide_Layer').checked = false;
>>>>>
>>>>> function toggleKMLLayerBoundary() {
>>>>> if
>>>>> (!document.getElementById('show_hide_KML_Layer_Boundary').checked)
>>>>> kmlLayerBoundary.setMap(null);
>>>>> else
>>>>> kmlLayerBoundary.setMap(map);
>>>>> }
>>>>> function toggleKMLLayerWilderness() {
>>>>> if
>>>>> (!document.getElementById('show_hide_KML_Layer_Wilderness').checked)
>>>>> kmlLayerWilderness.setMap(null);
>>>>> else
>>>>> kmlLayerWilderness.setMap(map);
>>>>> }
>>>>> function ToggleLayer() {
>>>>> var chkLayer = document.getElementById("chkLayer");
>>>>> if (chkLayer.checked === true) {
>>>>> //Turn layer on
>>>>> layer.setMap(map);
>>>>> }
>>>>> else {
>>>>> //Turn layer off
>>>>> layer.setMap(null);
>>>>> }
>>>>> }
>>>>> <!-- Below is the code for the checkboxes: -->
>>>>> Show:<input type="checkbox" id="show_hide_KML_Layer_Boundary"
>>>>> onClick="toggleKMLLayerBoundary();" />Study Area<p>
>>>>> Show:<input type="checkbox" id="show_hide_KML_Layer_Wilderness"
>>>>> onClick="toggleKMLLayerWilderness();" />Wilderness<p>
>>>>> Show:<input type="checkbox" id="show_hide_Layer"
>>>>> onClick="toggleLayer();" />Sites<p>
>>>>> <!-- Above is the code for the checkboxes: -->
>>>>>
>>>>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/google-visualization-api/-/mMwlNUG-8hoJ.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
