Home/ Questions/Q 8376413
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T15:25:33+00:00

I’m trying to toggle two layers in a Fusion Tables Map. To make that

  • 0

I’m trying to toggle two layers in a Fusion Tables Map. To make that I’ve created two functions – that I took from an example from Kathrin of the FT Team:

https://fusion-tables-users-group.googlegroups.com/attach/1d0b036133024eef/toggle_layers.html?pli=1&view=1&part=4

But somehow this isn’t working. Please take a look:

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
   <meta charset="UTF-8">
   <title>PDDUA Porto Alegre</title> 
<style>
#map-canvas { width:400px; height:450px; }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">

var map;

var layer1;
var layer2;

function initialize() {
   map = new google.maps.Map(document.getElementById('map-canvas'), {
      center: new google.maps.LatLng(-30.07080000, -51.1900000),
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer1 = new google.maps.FusionTablesLayer({
  query: {
     select: "'geometry'",
     from: '4756019',
  },
  map: map
});
layer2 = new google.maps.FusionTablesLayer({
  query: {
 select: "'geometry'",
 from: '4755921',
  },
  map: map
   });    
}
google.maps.event.addDomListener(window, 'load', initialize);

//FUNCTION TO CHANGE LAYERS
function changeMap(layerNum) {
   if (layerNum === 1) {
      update(layer1);
   }
   if (layerNum === 2) {
      update(layer2);
   }
} 

//FUNCTION TO UPDATE LAYERS
function updateMap(layer) {
   var layerMap = layer.getMap();
   if (layerMap) {
      layer.setMap(null);
   } else {
      layer.setMap(map);
   }
}   

//FUNCTION TO FILTER DATA BY COLUMNS AND ROWS
function filterData() {
   var searchString = document.getElementById('search-string').value.replace(/'/g, "\\'");
   var filter = document.getElementById('filter').value.replace(/'/g, "\\'");
   if (filter === "UEU") {
    layer1.setOptions({
        query: {
            select: "'geometry'",
            from: '4756019',
            where: "'UEU' = '" + searchString + "'"
        }
    });
}
else if (filter === "SUBUEU") {
    layer1.setOptions({
        query: {
            select: "'geometry'",
            from: '4756019',
            where: "'SUBUEU' = '" + searchString + "'"
        }
     });
}
else if (filter === "CODIGO") {
    layer1.setOptions({
        query: {
            select: "'geometry'",
            from: '4756019',
            where: "'CODIGO' = '" + searchString + "'"
        }
    });
}
}
//FUNCTION TO RESET DATA
function resetData() {
document.getElementById('search-string').value = "";
  layer1.setOptions({
      query: {
         select: "'geometry'",
         from: '4756019'
      }
   });
}

</script>
</head>
<div id="map-canvas"></div><br/>
<div style="margin-top: 10px;">
   <label>Tipo</label>
   <select id="filter">
      <option value="">--selecionar--</option>
  <option value="UEU">UEU</option>
  <option value="SUBUEU">SUBUEU</option>
  <option value="CODIGO">CODIGO</option>
   </select><br/><br/>
 <input type="text" id="search-string" />
 <input type="button" onclick="filterData();" value="Find!"/>
 <input type="button" onclick="resetData();" value="Reset Layer" /><br/><br/>
 <label>Layers:</label><br/>
 <label>RAREFEITA</label><input type="checkbox" value="1" onclick="changeMap(this.value);" checked="checked" /><br/>
 <label>INTENSIVA</label><input type="checkbox" value="2" onclick="changeMap(this.value);" checked="checked" /><br/>
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have a couple of problems here, which were both in this function.

    function changeMap(layerNum) {

   if (layerNum == 1) {
      updateMap(layer1);
   }
   if (layerNum == 2) {
      updateMap(layer2);
   }
}

    The first problem, is that you were using === which asserts the type of your paramaters, as well as the value, but since you were passing the value of the check box, you were passing the string “1”, which meant that update would not be called… Also, you were calling update rather than updateMap.

    Here is a working fiddle with this change included: http://jsfiddle.net/tholman/Xg8sr/

    • 0