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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta charset="utf-8">
   5
   6   <title>opacity</title>
   7   <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
   8   <meta name="description" content="A test of geomap's opacity and toggle methods">
   9   <meta name="author" content="Ryan Westphal">
  10
  11   <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css" />
  12   <link rel="stylesheet" href="css/style.css" />
  13   <style type="text/css">
  14     #map {
  15       position: fixed;
  16       left: 0; top: 0; right: 0; bottom: 0;
  17       background: #b5d0d0;
  18     }
  19
  20     label { display: block; }
  21
  22     label span:first-child
  23     {
  24       font-weight: bold;
  25       margin-right: 12px;
  26     }
  27
  28     .slider
  29     {
  30       display: inline-block;
  31       width: 60%
  32     }
  33   </style>
  34 </head>
  35 <body>
  36   <div>
  37     <div id="map">
  38     </div>
  39     <div class="info">
  40       <div class="links">
  41         <a href="../" class="docLink">&lt; docs</a>
  42         <a href="http://jsfiddle.net/ryanttb/kY5SC/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle &gt;</a>
  43       </div>
  44       <h1>opacity &amp; toggle</h1>
  45       <p>The slider calls geomap's opacity method targeting the OSM service. The default service object doesn't have an id but it does have a class, osm, that we can reference using $(&quot;.osm&quot;). The button calls the toggle method. I've matched the map div's background color to OSM's water color for effect.</p>
  46       <label>
  47         <span>opacity</span>
  48         <span class="slider"></span>
  49       </label>
  50       <label>
  51         <span>visibility</span>
  52         <button type="button">toggle</button>
  53       </label>
  54     </div>
  55   </div>
  56   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  57   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
  58   <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
  59   <script>
  60     $(function () {
  61       // create a map
  62       $("#map").geomap({
  63         center: [-71.0595678, 42.3604823],
  64         zoom: 6
  65       });
  66
  67       // create a jQuery UI slider
  68       // in the slide event, search for the default service by its class, .osm, and call the opacity method.
  69       // the ui argument's value is a number from 0-100 so to make a percentage that the opacity CSS property needs, we divide by 100.
  70       $(".slider").slider({
  71         value: 100,
  72         slide: function (e, ui) {
  73           $(".osm").geomap("opacity", ui.value / 100);
  74         }
  75       });
  76
  77       // create a jQuery UI button
  78       // in the click event, search for the default service by its class, .osm, and call the toggle method.
  79       // with no argument, toggle will flip the service's visibility but you can also pass true or false as a second argument after toggle to force a specific result.
  80       $("button").button().click(function() {
  81         $(".osm").geomap("toggle");
  82       });
  83     });
  84   </script>
  85 </body>
  86 </html>