Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
79 lines (61 sloc) 2.32 KB
<title>Leaflet.OpacityControls Demo</title>
<link rel="stylesheet" href="lib/leaflet/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="libs/" /><![endif]-->
<script src="lib/leaflet/leaflet.js"></script>
<link rel="stylesheet" href="lib/opacity/Control.Opacity.css" />
<script src="lib/opacity/Control.Opacity.js"></script>
<script src="lib/jquery/jquery-1.9.1.js"></script>
<script src="lib/jquery/jquery-ui-1.10.3.custom.min.js"></script>
<link rel="stylesheet" href="lib/jquery/jquery-ui-1.10.3.custom.min.css" />
<style type="text/css">
body, html {
height: 100%;
width: 100%;
margin: 0;
#map {
width: 99%;
height: 100%;
<div id="map"></div>
<script type="text/JavaScript">
//Create the map
var washington = new L.tileLayer.wms('', {
layers: 'Washington',
maxZoom: 18,
format: 'image/png',
transparent: true
var historic_seattle = new L.tileLayer.wms('', {
layers: 'Seattle1890',
maxZoom: 18,
format: 'image/png',
transparent: true
var map = new'map', {
center: new L.LatLng(47.59, -122.30),
zoom: 12,
layers: [washington, historic_seattle],
zoomControl: true
//Create the opacity controls
var higherOpacity = new L.Control.higherOpacity();
var lowerOpacity = new L.Control.lowerOpacity();
var opacitySlider = new L.Control.opacitySlider();
//Specify the layer for which you want to modify the opacity. Note that the setOpacityLayer() method applies to all the controls.
//You only need to call it once.
//Set initial opacity to 0.5 (Optional)