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

   1 <!doctype html>
   2
   3 <html lang="en" class="no-js">
   4 <head>
   5   <meta charset="utf-8">
   6
   7   <title>toggle | geomap</title>
   8   <meta name="description" content="geomap toggle method">
   9   <meta name="author" content="Ryan Westphal">
  10
  11   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  12
  13   <link rel="stylesheet" href="../css/style.css?v=2">
  14   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
  15 </head>
  16
  17 <body>
  18
  19   <div id="toggle" data-role="page">
  20     <div data-role="header" data-theme="e">
  21       <h1>toggle</h1>
  22     </div>
  23
  24     <div data-role="content">
  25       <table>
  26         <tr>
  27           <th>return type</th>
  28           <td>undefined</td>
  29         </tr>
  30         <tr>
  31           <th>syntax</th>
  32           <td>$( <i>map or service selector</i> ).geomap( &quot;toggle&quot; [ , Boolean show_or_hide ] )</td>
  33         </tr>
  34         <tr>
  35           <th>usage</th>
  36           <td><pre><code>$(&quot;#map&quot;).geomap( &quot;toggle&quot; )
  37 $(&quot;#map .osm&quot;).geomap( &quot;toggle&quot;, false )</code></pre>
  38           </td>
  39         </tr>
  40       </table>
  41       <p>This method toggles or sets the visibility property of service objects in the services array.</p>
  42       <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>
  43       <pre><code>// for example, given the following as the map div
  44 &lt;div id=&quot;map&quot;&gt;&lt;/div&gt;
  45
  46 // and initializing geomap with the following services
  47 $(&quot;#map&quot;).geomap({
  48   services: [
  49     {
  50       id: &quot;water&quot;,
  51       class: &quot;mass-gis&quot;,
  52       type: &quot;shingled&quot;,
  53       src: function ( view ) { return null; }
  54     },
  55     {
  56       id: &quot;towns&quot;,
  57       class: &quot;mass-gis&quot;,
  58       type: &quot;shingled&quot;,
  59       src: function ( view ) { return null; }
  60     },
  61     {
  62       id: &quot;harbor-cruise&quot;,
  63       type: &quot;shingled&quot;,
  64       src: function ( view ) { return null; }
  65     }
  66   ]
  67 });
  68
  69 // you can later hide all services
  70 $(&quot;#map&quot;).geomap(&quot;toggle&quot;, false);
  71
  72 // all mass-gis services
  73 $(&quot;#map .mass-gis&quot;).geomap(&quot;toggle&quot;, false);
  74
  75 // or a specific service
  76 $(&quot;#harbor-cruise&quot;).geomap(&quot;toggle&quot;, false);</code></pre>
  77       <p>If the optional boolean value is not supplied, the visibility of the services will be toggled.</p>
  78       <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>
  79     </div>
  80   </div> <!-- end of #container -->
  81
  82   <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  83   <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
  84   <script src="../js/script.js"></script>
  85   <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
  86 </body>
  87 </html>
  88