Edit in JSFiddle

      // create a map
      $("#map").geomap({
        center: [-71.0595678, 42.3604823],
        zoom: 6
      });

      // create a jQuery UI slider
      // in the slide event, search for the default service by its class, .osm, and call the opacity method.
      // 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.
      $(".slider").slider({
        value: 100,
        slide: function (e, ui) {
          $(".osm").geomap("opacity", ui.value / 100);
        }
      });

      // create a jQuery UI button
      // in the click event, search for the default service by its class, .osm, and call the toggle method.
      // 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.
      $("button").button().click(function() {
        $(".osm").geomap("toggle");
      });
    <div id="map">
    </div>
    <div class="info">
      <h1>opacity &amp; toggle</h1>
      <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>
      <label>
        <span>opacity</span>
        <span class="slider"></span>
      </label>
      <label>
        <span>visibility</span>
        <button type="button">toggle</button>
      </label>
    </div>
html
{
  font:13px/1.231 Calibri,Arial,sans-serif; *font-size:small;
}

.info 
{
  background: #fff;
  border-radius: 8px;
  box-shadow: -4px 4px #444;
  opacity: .8;
  padding: 8px;
  width: 95%;
}

fieldset { border: none; }

legend {
  font-size: 14px;
  font-weight: bold;
}

    #map {
      position: fixed;
      left: 0; top: 0; right: 0; bottom: 0;
      background: #b5d0d0;
    }
    
    label { display: block; }

    label span:first-child
    {
      font-weight: bold;
      margin-right: 12px;
    }
    
    .slider
    {
      display: inline-block;
      width: 60%
    }

External resources loaded into this fiddle: