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

   1 <!doctype html>
   2
   3 <html lang="en" class="no-js">
   4 <head>
   5   <meta charset="utf-8">
   6
   7   <title>opacity | geomap</title>
   8   <meta name="description" content="geomap opacity 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="opacity" data-role="page">
  20     <div data-role="header" data-theme="e">
  21       <h1>opacity</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;opacity&quot;, Number opacity )</td>
  33         </tr>
  34         <tr>
  35           <th>usage</th>
  36           <td><pre><code>$(&quot;#map&quot;).geomap( &quot;opacity&quot;, .5 )
  37 $(&quot;#map .osm&quot;).geomap( &quot;opacity&quot;, .7 )</code></pre>
  38           </td>
  39         </tr>
  40       </table>
  41       <p>This method sets the value of the opacity property of service objects in the services array.</p>
  42       <p>It will also update the opacity of all images already requested by the service.</p>
  43       <p>If you call opacity 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>
  44       <pre><code>// for example, given the following as the map div
  45 &lt;div id=&quot;map&quot;&gt;&lt;/div&gt;
  46
  47 // and initializing geomap with the following services
  48 $(&quot;#map&quot;).geomap({
  49   services: [
  50     {
  51       id: &quot;water&quot;,
  52       class: &quot;mass-gis&quot;,
  53       type: &quot;shingled&quot;,
  54       src: function ( view ) { return null; }
  55     },
  56     {
  57       id: &quot;towns&quot;,
  58       class: &quot;mass-gis&quot;,
  59       type: &quot;shingled&quot;,
  60       src: function ( view ) { return null; }
  61     },
  62     {
  63       id: &quot;harbor-cruise&quot;,
  64       type: &quot;shingled&quot;,
  65       src: function ( view ) { return null; }
  66     }
  67   ]
  68 });
  69
  70 // you can later change the opacity of all services
  71 $(&quot;#map&quot;).geomap(&quot;opacity&quot;, .8);
  72
  73 // all mass-gis services
  74 $(&quot;#map .mass-gis&quot;).geomap(&quot;opacity&quot;, .5);
  75
  76 // or a specific service
  77 $(&quot;#harbor-cruise&quot;).geomap(&quot;opacity&quot;, 1.0);</code></pre>
  78       <p>This is much faster than changing a service object's opacity value yourself and updating geomap's services property.</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