diff --git a/LeafletOpacityDemo.html b/LeafletOpacityDemo.html index 1b2de99..84da218 100644 --- a/LeafletOpacityDemo.html +++ b/LeafletOpacityDemo.html @@ -58,13 +58,18 @@ }); - + var options = { + position: "bottomright", + max: 1000, + animate: "slow", + init_opac: 0.5 + } //Create the opacity controls - var higherOpacity = new L.Control.higherOpacity(); + var higherOpacity = new L.Control.higherOpacity(options); map.addControl(higherOpacity); - var lowerOpacity = new L.Control.lowerOpacity(); + var lowerOpacity = new L.Control.lowerOpacity(options); map.addControl(lowerOpacity); - var opacitySlider = new L.Control.opacitySlider(); + var opacitySlider = new L.Control.opacitySlider(options); map.addControl(opacitySlider); //Specify the layer for which you want to modify the opacity. Note that the setOpacityLayer() method applies to all the controls. @@ -72,7 +77,7 @@ opacitySlider.setOpacityLayer(historic_seattle); //Set initial opacity to 0.5 (Optional) - historic_seattle.setOpacity(0.5); + historic_seattle.setOpacity(options.init_opac); diff --git a/lib/opacity/Control.Opacity.js b/lib/opacity/Control.Opacity.js index dda56b9..5e8892a 100644 --- a/lib/opacity/Control.Opacity.js +++ b/lib/opacity/Control.Opacity.js @@ -55,27 +55,32 @@ L.Control.opacitySlider = L.Control.extend({ position: 'topright' }, setOpacityLayer: function (layer) { - opacity_layer = layer; + opacity_layer = layer; }, onAdd: function (map) { var opacity_slider_div = L.DomUtil.create('div', 'opacity_slider_control'); + // If an initial opacity is set, set slider to corresponding value + var max = this.options.max ? this.options.max : 100; + var value; + if (this.options.init_opac) value = this.options.init_opac * max; $(opacity_slider_div).slider({ orientation: "vertical", - range: "min", + range: this.options.range ? this.options.range : "min", min: 0, - max: 100, - value: 60, - step: 10, + max: max, + value: value ? value : 60, + step: max/5, + animate: this.options.animate ? this.options.animate : "fast", start: function ( event, ui) { //When moving the slider, disable panning. map.dragging.disable(); - map.once('mousedown', function (e) { + map.once('mousedown', function (e) { map.dragging.enable(); }); }, slide: function ( event, ui ) { - var slider_value = ui.value / 100; + var slider_value = ui.value / max; opacity_layer.setOpacity(slider_value); } }); @@ -88,32 +93,46 @@ L.Control.opacitySlider = L.Control.extend({ function onClickHigherOpacity() { var opacity_value = opacity_layer.options.opacity; - if (opacity_value > 1) { + if (opacity_value >= 1) { return; } else { opacity_layer.setOpacity(opacity_value + 0.2); + // Set slider value, if slider is available + var slider = $(".opacity_slider_control"); + if (slider && slider.length) { + var cur_val = slider.slider("value"); + var step = slider.slider("option").step; + slider.slider("value", cur_val + step); + } //When you double-click on the control, do not zoom. + var map = opacity_layer._map; map.doubleClickZoom.disable(); - map.once('click', function (e) { + map.once('click', function (e) { map.doubleClickZoom.enable(); }); } - } function onClickLowerOpacity() { var opacity_value = opacity_layer.options.opacity; - if (opacity_value < 0) { + if (opacity_value <= 0) { return; } else { opacity_layer.setOpacity(opacity_value - 0.2); + // Set slider value, if slider is available + var slider = $(".opacity_slider_control"); + if (slider && slider.length) { + var cur_val = slider.slider("value"); + var step = slider.slider("option").step; + slider.slider("value", cur_val - step); + } //When you double-click on the control, do not zoom. + var map = opacity_layer._map; map.doubleClickZoom.disable(); - map.once('click', function (e) { + map.once('click', function (e) { map.doubleClickZoom.enable(); }); - } - + } }