4.1 Toggling single objects

Often times you will want to provide the user with the ability to toggle certain layers on and off. The following tutorial takes you through two different scenario’s:

  • toggling single object layers (ex: one marker, one buffer, one kml layer)
  • toggling objects in an array (ex: bus stops)

Setting up

Let’s start by setting up a basic maproom layout:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>Advanced GIS Toggle Tutorial</title>
    <style type="text/css">
        html { height: 100% }
        body { height: 100%; margin: 0px; padding: 0px }
        #map_canvas { height: 100% }
    </style>
 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://yohman.bol.ucla.edu/jquery-1.5.2.min.js"></script>
 
    <script type="text/javascript">    
        //declare namespace
        var yoh = {};
 
        //declare map
        var map;
       
        function trace(message)
        {
            if (typeof console != 'undefined')
            {
                console.log(message);
            }
        }
 
        //Function that gets run when the document loads
        yoh.initialize = function()
        {
            var latlng = new google.maps.LatLng(34.070264, -118.4440562);
            var myOptions = {
                zoom: 13,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        }
</script>
</head>
<body onload="yoh.initialize()">
 
    <!-- side panel div container -->
    <div style="position:absolute; width:380px; height: 100%; overflow:auto; float:left; padding-left:10px; padding-right:10px;">
        <h1>Advanced GIS Toggle Tutorial</h1>    
        <br>
    </div>
    <!-- map div container -->
    <div id="map_canvas" style="height:100%; margin-left:400px;"></div>
 
</body>  
</html>

Toggling single objects on and off

Next, create a buffer (circle) object that we want to toggle on and off. First, define the circle layer variable in the global space:

1
var uclaCircle;

Then, in the “initialize” function, create the uclaCircle.

1
2
3
4
5
6
7
8
9
10
11
12
//draw circle example
var bufferOptions = {
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    map: map,
    center: new google.maps.LatLng(34.070264, -118.4440562),
    radius: 2000
  };                       
uclaCircle = new google.maps.Circle(bufferOptions);

The call to turn single layers on and off is handled by the Google Maps API’s “setMap” function. For example, to turn the “uclaCircle” off:

1
uclaCircle.setMap(null);

To turn it back on:

1
uclaCircle.setMap(map);

Create a function that will do the toggling

Now that we know the function calls to toggle a layer on and off, let’s create a generic function that will actually do this for us.

1
2
3
4
5
6
7
8
9
10
11
12
//toggle single layers on/off
yoh.toggleLayer = function(layer,id)
{
    if ($('#'+id).is(':checked'))
    {
        layer.setMap(map);
    }
    else
    {
        layer.setMap(null);
    }
}

This function requests two parameters:

  • layer: the layer that you want to toggle (for example, “uclaCircle”)
  • id: the id of the checkbox that will be clicked in order to turn the layer on and off

The function first checks to see whether the checkbox is checked or not using the jQuery function .is. If it is checked on, then it turns the layer on, if it is checked off, it turns the layer off.

Create the checkbox html

Now let’s actually create the checkbox in the side panel that will allow the user to turn the uclaCircle on and off. For this, we will use the HTML “input” tag. Put the following input code somewhere in the body tag that fits your layout. In the example below, it is put in the side panel DIV below the H1 tag.

1
<input id="uclaCircle_checkbox" type="checkbox" checked="checked" onClick="yoh.toggleLayer(uclaCircle,'uclaCircle_checkbox')" /> UCLA 2km buffer<br>

(sample code)

Leave a Reply