Toggle a fusion table layer with kml layers

[es]

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

[asgallant]

The id of the checkbox doesn't match the id you use to set the chkLayer variable in the ToggleLayer function.

[es]

I tried using a lower case "l", but that didn't work either: id="show_hide_layer".  Is this the wrong id all together?

[asgallant]

It's in the javascript; it should be:

var chkLayer = document.getElementById("show_hide_Layer"); 

[es]

Oh yes... I see that now.  However after making the change the fusion layer still does not turn off and on.  Any other thoughts?

[es]

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>

[asgallant]

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.

[E&S Environmental]

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() {

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

To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[asgallant]

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.

To post to this group, send email to google-visualization-api@googlegroups.com.
To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.

[E&S Environmental]

Hmm.... no such luck!  I have now moved it to to following:

 

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);

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 google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.

[E&S Environmental]

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 <drew_g...@abtassoc.com> wrote:

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 google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.

[asgallant]

Sorry, I haven't had the opportunity (I'm actually on vacation and am only popping in for a few minutes here and there).  If you could update this jsfiddle with your newest version of the code, I'll take a look when I get a chance: http://jsfiddle.net/asgallant/G5Bga/15/ (as I recall, this is the same one I helped you with before, right?).

To unsubscribe from this group, send email to google-visualization-api+unsubscr...@googlegroups.com.

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.

[E&S Environmental]

Sorry I took to long to reply back (working on other non-web work).  I pasted my code into the jsfiddle link you sent.  Have a look, but I can't even get the map to come up on the editor: http://jsfiddle.net/G5Bga/16/  If it makes it easier, I can paste all my code into a message.  As a brief reminder, I'm trying to get my fusion table point layer to toggle on and off, just like my kml layers do.

Thanks for having a look!

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/6KyjsMuTYjwJ.

To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.

[asgallant]

You needed to remove the <script> open and close tags from the javascript box.  Also, you need to assign the click event handler for the checkbox in javascript instead of HTML.  Once you do that, it works fine.  See: http://jsfiddle.net/asgallant/G5Bga/17/ 

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/6KyjsMuTYjwJ.

[es]

That works great now!  Thank you!!!  It's interesting that I didn't need the "function ToggleLayer() {" to make the toggling work for the fusion layer (as needed for the kml layers).  The onclick function seemed to do the trick (document.getElementById('show_hide_Layer').onclick = function()).

 

I have tried to place the layering so that certain layers are automatically shown on top of the others, but this doesn't seem to work either.  For instance, the "magic points" fusion layer (that you have now fixed to toggle :)  ), should always stay on top of the kml layers because a user needs to click these in order to generate the pie and scatter statistics.  If you turn on the polygon layers, they currently cover the point layer.  The only way to make the points show back on top, is to turn them off and back on again.  Do you have a suggestion on how to remedy this little glitch?

 

Thanks!

To post to this group, send email to google-visua...@googlegroups.com.

To unsubscribe from this group, send email to google-visualization-api+unsubscr...@googlegroups.com.
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 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 google-visua...@googlegroups.com.

To unsubscribe from this group, send email to google-visualization-api+unsubscr...@googlegroups.com.
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 view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/6KyjsMuTYjwJ.

To post to this group, send email to google-visua...@googlegroups.com.

[asgallant]

The KML layers would work that way, too.  The only reason you need to do special stuff with them is because you set the event handlers in HTML instead of javascript.

I did some quick research, and it looks like there isn't (yet?) a way to specify the z-index of a map layer, so if you want the "Magic Sites" layer always on top, you have to modify the other layer functions to re-set the "Magic Sites" layer when they are enabled.

I combined everything together and did up the KML layer functions the same way as the fusion tables layer: http://jsfiddle.net/asgallant/G5Bga/18/ 

[es]

Sorry for the long span in getting back to you… I’m just having a look this morning.  I see where you have added some changes, however when I viewed your http://jsfiddle.net/asgallant/G5Bga/18/ link, I see it is behaving similarly as before (when I turn on the Forest Service layer, it covers the Magic Points layer).  However,  if I turn on the Forest Service layer (which covers the Magic points), then turn on the Wilderness layer, the Magic points come on top of the Forest Service layer, but stay below the Wilderness layer. If I turn either the Wilderness or the Forest Service layers on, off, and then on again, the Magic points will then stay on the top. The same response occurs with the boundary layer.  Is this fixable?  Thanks!

[asgallant]

It only happens sometimes, and once the layering is right, it generally stays that way, which makes me think there is a timing issue in play here.  Unfortunately, there is no "ready" event for layers (at least not that I can see).  Maybe you should ask over the in the Maps forum (https://groups.google.com/forum/?fromgroups=#!forum/google-maps-js-api-v3), they might be able to help you better.

[es]

I'll give the maps forum a go.... thanks again for all your excellent help over the past couple of months!!