libs/js/jquery-geo-1.0a4/docs/geomap/toggle.html


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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

<!doctype html>  

<html lang="en" class="no-js">
<head>
  <meta charset="utf-8">

  <title>toggle | geomap</title>
  <meta name="description" content="geomap toggle method">
  <meta name="author" content="Ryan Westphal">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="../css/style.css?v=2">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
</head>

<body>

  <div id="toggle" data-role="page">
    <div data-role="header" data-theme="e">
      <h1>toggle</h1>
    </div>
    
    <div data-role="content">
      <table>
        <tr>
          <th>return type</th>
          <td>undefined</td>
        </tr>
        <tr>
          <th>syntax</th>
          <td>$( <i>map or service selector</i> ).geomap( &quot;toggle&quot; [ , Boolean show_or_hide ] )</td>
        </tr>
        <tr>
          <th>usage</th>
          <td><pre><code>$(&quot;#map&quot;).geomap( &quot;toggle&quot; )
$(&quot;#map .osm&quot;).geomap( &quot;toggle&quot;, false )</code></pre>
          </td>
        </tr>
      </table>
      <p>This method toggles or sets the visibility property of service objects in the services array.</p>
      <p>If you call toggle directly on geomap's div element, it will apply to all services. You can target individual services using a CSS selector based on the map div id and the class supplied for the service in its service object or just the id of the service if supplied in its service object.</p>
      <pre><code>// for example, given the following as the map div
&lt;div id=&quot;map&quot;&gt;&lt;/div&gt;

// and initializing geomap with the following services
$(&quot;#map&quot;).geomap({
  services: [
    {
      id: &quot;water&quot;,
      class: &quot;mass-gis&quot;,
      type: &quot;shingled&quot;,
      src: function ( view ) { return null; }
    },
    {
      id: &quot;towns&quot;,
      class: &quot;mass-gis&quot;,
      type: &quot;shingled&quot;,
      src: function ( view ) { return null; }
    },
    {
      id: &quot;harbor-cruise&quot;,
      type: &quot;shingled&quot;,
      src: function ( view ) { return null; }
    }
  ]
});

// you can later hide all services
$(&quot;#map&quot;).geomap(&quot;toggle&quot;, false);

// all mass-gis services
$(&quot;#map .mass-gis&quot;).geomap(&quot;toggle&quot;, false);

// or a specific service
$(&quot;#harbor-cruise&quot;).geomap(&quot;toggle&quot;, false);</code></pre>
      <p>If the optional boolean value is not supplied, the visibility of the services will be toggled.</p>
      <p>The change will happen immediately and you do not need to call refresh. This is recommended over manually changing the visibility property of the service object as it does not cause other services to refresh.</p>
    </div>
  </div> <!-- end of #container -->

  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
  <script src="../js/script.js"></script>
  <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</body>
</html>