Permalink
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
<html>
<head>
<title>Leaflet.OpacityControls Demo</title>
<link rel="stylesheet" href="lib/leaflet/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="libs/leaflet.ie.css" /><![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%;
}
</style>
</head>
<body>
<div id="map"></div>
<br>
<script type="text/JavaScript">
//Create the map
var washington = new L.tileLayer.wms('http://demo.lizardtech.com/lizardtech/iserv/ows', {
layers: 'Washington',
maxZoom: 18,
format: 'image/png',
transparent: true
});
var historic_seattle = new L.tileLayer.wms('http://demo.lizardtech.com/lizardtech/iserv/ows', {
layers: 'Seattle1890',
maxZoom: 18,
format: 'image/png',
transparent: true
});
var map = new L.map('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();
map.addControl(higherOpacity);
var lowerOpacity = new L.Control.lowerOpacity();
map.addControl(lowerOpacity);
var opacitySlider = new L.Control.opacitySlider();
map.addControl(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.
opacitySlider.setOpacityLayer(historic_seattle);
//Set initial opacity to 0.5 (Optional)
historic_seattle.setOpacity(0.5);
</script>
</body>
</html>