Any chance you've been able to look at the toggling issue? I followed your suggestions and have still been unsuccessful at getting the fusion layer to toggle. I can repost my code if that's helpful. Thanks!
On Thu, Aug 2, 2012 at 9:45 AM, asgallant <[email protected]> wrote: > Make sure the function comes after you declare the "layer" variable - it > should work. If it still doesn't, I'll try to do up a jsfiddle example and > see what's going on. > > > On Thursday, August 2, 2012 12:03:52 PM UTC-4, es wrote: >> >> So, I deleted the "google.maps.event.**addDomListener(window, 'load', >>> initialize);" at the very bottom of the script and I moved the ToggleLayer >>> function to here (see below), but the toggle still doesn't work. Did I do >>> this correctly? >>> >>> >> <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() { >> >> *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); >> } >> } >> >> * >> On Wed, Aug 1, 2012 at 1:39 PM, asgallant <[email protected]>wrote: >> >>> Two things: >>> >>> 1) you shouldn't call the initialize function from both >>> google.setOnLoadCallback and google.maps.event.**addDomListener - the >>> setOnLoadCallback should be sufficient (and the other one is probably >>> throwing an error - if it isn't, then initialize is being called twice, >>> which you probably don't want). >>> >>> 2) the source of your problem is the scope of the "layer" variable. It >>> is declared locally inside the initialize function, and you are trying to >>> access it from outside the initialize function. You either need to declare >>> "layer" in a global scope or move the ToggleLayer function inside the >>> initialize function. >>> >>> >>> On Wednesday, August 1, 2012 4:27:30 PM UTC-4, es wrote: >>>> >>>> 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(**initi**alize); >>>> var map; >>>> function initialize() { >>>> var myOptions = { >>>> center: new google.maps.LatLng(38.099983, -80.683594), >>>> zoom: 7, >>>> mapTypeControl: true, >>>> mapTypeControlOptions: { >>>> style: google.maps.**MapTypeControlStyl**e.** >>>> HORIZONTAL_BAR, >>>> position: google.maps.ControlPosition.**TO**P_RIGHT >>>> }, >>>> zoomControlOptions: { >>>> style: google.maps.ZoomControlStyle.**L**ARGE >>>> }, >>>> streetViewControl: true, >>>> streetViewControlOptions: { >>>> position: google.maps.ControlPosition.**LE**FT_TOP >>>> }, >>>> mapTypeId: google.maps.MapTypeId.TERRAIN >>>> }; >>>> >>>> map = new google.maps.Map(document.**getEl**ementById('map_canvas'), >>>> myOptions); >>>> var layer = new google.maps.FusionTablesLayer(****); >>>> updateLayerQuery(layer); >>>> layer.setMap(map); >>>> >>>> var kmlLayerNationalforestURL = 'http://www.esenvironmental.**co** >>>> m/kml/national_forests.kml<http://www.esenvironmental.com/kml/national_forests.kml> >>>> '; >>>> var kmlLayerWildernessURL = 'http://www.esenvironmental.**co** >>>> m/kml/wilderness.kml<http://www.esenvironmental.com/kml/wilderness.kml> >>>> '; >>>> var kmlLayerBoundaryURL = 'http://www.esenvironmental.**co** >>>> m/kml/study_region.kml<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(**kmlLayerN**ationalforestURL, >>>> kmlOptions); >>>> kmlLayerNationalforest.**setMap**(null); >>>> >>>> kmlLayerWilderness = new google.maps.KmlLayer(**kmlLayerW**ildernessURL, >>>> kmlOptions); >>>> kmlLayerWilderness.setMap(**nul**l); >>>> >>>> kmlLayerBoundary = new google.maps.KmlLayer(**kmlLayerB**oundaryURL, >>>> kmlOptions); >>>> kmlLayerBoundary.setMap(map); >>>> >>>> >>>> document.getElementById('show_****hide_KML_Layer_Nationalforest'****).checked >>>> = false; >>>> document.getElementById('show_****hide_KML_Layer_Wilderness').**ch**ecked >>>> = false; >>>> document.getElementById('show_****hide_KML_Layer_Boundary').**chec**ked >>>> = 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.**ChartWrap**per({ >>>> 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('ht**** >>>> tp://www.google.com/**fusiontabl**es/gvizdata?tq='<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.**ChartWrap**per({ >>>> 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.**ad**dListener(scatter, >>>> 'ready', function() { >>>> google.maps.event.addListener(****layer, 'click', >>>> function(e) { >>>> var Site = e.row['Site'].value; >>>> setScatterSelection(Site); >>>> drawVisualization(Site); >>>> }); >>>> google.maps.event.**addDomListen**er(document.** >>>> getElementById('**Site'), 'change', function() { >>>> var Site = this.value; >>>> updateLayerQuery(layer, Site); >>>> setScatterSelection(Site); >>>> drawVisualization(Site); >>>> }); >>>> >>>> google.visualization.events.**re**moveListener(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.**ad**dListener(scatter, >>>> 'ready', function() { >>>> scatter.getChart().**setSelectio**n([{ >>>> row: row, >>>> column: 2 >>>> }]); >>>> google.visualization.events.**re**moveListener(ready); >>>> }); >>>> >>>> scatter.setDataTable(view); >>>> scatter.setOption('title', site); >>>> scatter.draw(); >>>> }; >>>> }); >>>> >>>> function drawVisualization(Site) { >>>> var pieQuery = new google.visualization.Query('ht**** >>>> tp://www.google.com/**fusiontabl**es/gvizdata?tq='<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(**respons**e) { >>>> 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.**getCo**lumnLabel(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('**sho** >>>> w_hide_KML_Layer_Boundary')**.**checked) >>>> kmlLayerBoundary.setMap(null); >>>> else >>>> kmlLayerBoundary.setMap(map); >>>> } >>>> function toggleKMLLayerWilderness() { >>>> if (!document.getElementById('**sho**w_hide_KML_Layer_** >>>> Wilderness').**checked) >>>> kmlLayerWilderness.setMap(**null**); >>>> else >>>> kmlLayerWilderness.setMap(map)****; >>>> } >>>> function toggleKMLLayerNationalforest() { >>>> if (!document.getElementById('**sho**w_hide_KML_Layer_** >>>> Nationalfores**t').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.**addDomListen**er(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.**MapTypeControlStyl**e.** >>>>>>>>> HORIZONTAL_BAR, >>>>>>>>> position: google.maps.ControlPosition.**TO**P_RIGHT >>>>>>>>> }, >>>>>>>>> zoomControlOptions: { >>>>>>>>> style: google.maps.ZoomControlStyle.**L**ARGE >>>>>>>>> }, >>>>>>>>> streetViewControl: true, >>>>>>>>> streetViewControlOptions: { >>>>>>>>> position: google.maps.ControlPosition.**LE**FT_TOP >>>>>>>>> }, >>>>>>>>> mapTypeId: google.maps.MapTypeId.TERRAIN >>>>>>>>> }; >>>>>>>>> >>>>>>>>> map = new google.maps.Map(document.**getEl**ementById('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.**co** >>>>>>>>> m/kml/wilderness.kml<http://www.esenvironmental.com/kml/wilderness.kml> >>>>>>>>> '; >>>>>>>>> var kmlLayerBoundaryURL = 'http://www.esenvironmental.**co** >>>>>>>>> m/kml/study_region.kml<http://www.esenvironmental.com/kml/study_region.kml> >>>>>>>>> '; >>>>>>>>> var kmlOptions = { >>>>>>>>> preserveViewport: true >>>>>>>>> }; >>>>>>>>> >>>>>>>>> >>>>>>>>> kmlLayerWilderness = new >>>>>>>>> google.maps.KmlLayer(**kmlLayerW**ildernessURL, >>>>>>>>> kmlOptions); >>>>>>>>> kmlLayerWilderness.setMap(**nul**l); >>>>>>>>> kmlLayerBoundary = new google.maps.KmlLayer(**kmlLayerB**oundaryURL, >>>>>>>>> kmlOptions); >>>>>>>>> kmlLayerBoundary.setMap(map); >>>>>>>>> >>>>>>>>> document.getElementById('show_****hide_KML_Layer_Wilderness').**ch >>>>>>>>> **ecked = false; >>>>>>>>> document.getElementById('show_****hide_KML_Layer_Boundary').**chec >>>>>>>>> **ked = true; >>>>>>>>> document.getElementById('show_****hide_Layer').checked = false; >>>>>>>>> >>>>>>>>> function toggleKMLLayerBoundary() { >>>>>>>>> if (!document.getElementById('**sho** >>>>>>>>> w_hide_KML_Layer_Boundary')**.**checked) >>>>>>>>> kmlLayerBoundary.setMap(null); >>>>>>>>> else >>>>>>>>> kmlLayerBoundary.setMap(map); >>>>>>>>> } >>>>>>>>> function toggleKMLLayerWilderness() { >>>>>>>>> if (!document.getElementById('**sho**w_hide_KML_Layer_** >>>>>>>>> Wilderness').**checked) >>>>>>>>> kmlLayerWilderness.setMap(**null**); >>>>>>>>> else >>>>>>>>> kmlLayerWilderness.setMap(map)****; >>>>>>>>> } >>>>>>>>> function ToggleLayer() { >>>>>>>>> var chkLayer = document.getElementById("**chkLa**yer"); >>>>>>>>> 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_**Bounda**ry" >>>>>>>>> onClick="**toggleKMLLayerBoundar**y();" />Study Area<p> >>>>>>>>> Show:<input type="checkbox" id="show_hide_KML_Layer_**Wilder**ness" >>>>>>>>> onClick="**toggleKMLLayerWildern**ess();" />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/-**/BcZdEWox9icJ<https://groups.google.com/d/msg/google-visualization-api/-/BcZdEWox9icJ> >>> . >>> >>> To post to this group, send email to google-visualization-api@** >>> googlegroups.com <[email protected]>. >>> To unsubscribe from this group, send email to google-visualization-api+* >>> *[email protected]<google-visualization-api%[email protected]> >>> . >>> For more options, visit this group at http://groups.google.com/** >>> group/google-visualization-**api?hl=en<http://groups.google.com/group/google-visualization-api?hl=en> >>> . >>> >> >> -- > 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/-/WjFQ9ztIel8J. > > 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. > -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. 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.
