// 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 & 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 $(".osm"). 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: