Leaflet Layer Transparent Slider

by aidankirrane

HTML

<link rel="stylesheet" href="script/leaflet/leaflet.css" />
    <!--[if lte IE 8]><link rel="stylesheet" href="script/leaflet/leaflet.ie.css" /><![endif]-->
    <link rel="stylesheet" href="script/jquery/css/smoothness/jquery-ui-1.8.17.custom.css" type="text/css">
    <script src="script/jquery/js/jquery-1.7.1.min.js"></script>
    <script src="script/jquery/js/jquery-ui-1.8.17.custom.min.js"></script>
        <script src="script/leaflet/leaflet.js"></script>
            <div id="map" style="height:300px"></div>
    <div id="slider"><div class="ui-slider-handle"></div></div>

CSS

#slider { position:relative; width:90%; top:10px; left:5%; }

JavaScript

var map = new L.Map('map');
        var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
            cloudmadeAttribution = 'Map data &copy; 2012 OpenStreetMap contributors, Imagery &copy; 2012 CloudMade',
            cloudmade = new L.TileLayer(cloudmadeUrl, {
                maxZoom: 18, attribution: cloudmadeAttribution
            });
        var gtopo30 = new L.TileLayer.WMS("http://demo.cubewerx.com/demo/cubeserv/cubeserv.cgi?", {
            layers: 'Foundation.gtopo30',
            format: 'image/png',
            transparent: true,
            attribution: "GTOPO30 © 2012 CubeWerx Inc.",
            opacity: .5
        });
        map.setView(new L.LatLng(30.524276,103.007813), 3).addLayer(cloudmade).addLayer(gtopo30);
        $("#slider").slider({
            value: 50,
            slide: function(e, ui) {
                gtopo30.setOpacity(ui.value / 100);
            }
        });