Permalink
Browse files

Make it easier to specify the layer for which you want to modify the …

…transparency.
  • Loading branch information...
1 parent 3c87453 commit 4d77005f39aa3cb246aa628f7fae2e588a3cec1b lizardtechblog committed Dec 18, 2013
Showing with 35 additions and 12 deletions.
  1. +9 −3 LeafletOpacityDemo.html
  2. +9 −0 README.md
  3. +17 −9 lib/opacity/Control.Opacity.js
@@ -1,6 +1,6 @@
<html>
<head>
- <title>Leaflet.OpacityControls Demo/title>
+ <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]-->
@@ -57,7 +57,7 @@
zoomControl: true
});
- historic_seattle.setOpacity(0.5);
+
//Create the opacity controls
var higherOpacity = new L.Control.higherOpacity();
@@ -66,7 +66,13 @@
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);
@tormi
tormi Dec 30, 2013

Maybe it's easier to define initial opacity in L.tileLayer options, see http://leafletjs.com/reference.html#tilelayer-opacity

</script>
</body>
</html>
View
@@ -30,3 +30,12 @@ Then to initialize the controls, add the following lines to the BODY of your HTM
var opacitySlider = new L.Control.opacitySlider();
map.addControl(opacitySlider);
+To specify the layer for which you want to modify the opacity, use the ````setOpacityLayer()```` method. For example, to set a layer called ````historic_seattle```` as the opacity layer, add the following line to the BODY of your HTML document:
+
+ higherOpacity.setOpacityLayer(historic_seattle);
+
+You only need to call the setOpacityLayer() method for one control. The method sets the opacity layer for the other controls automatically. This makes it possible for you to use controls individually. For example, if you only want to create the opacity slider control, you can add the following lines to the BODY of your HTML document:
+
+ var opacitySlider = new L.Control.opacitySlider();
+ map.addControl(opacitySlider);
+ opacitySlider.setOpacityLayer(historic_seattle);
@@ -6,14 +6,18 @@
https://github.com/lizardtechblog/Leaflet.OpacityControls
*/
+//Declare global variables
+var opacity_layer;
//Create a control to increase the opacity value. This makes the image more opaque.
L.Control.higherOpacity = L.Control.extend({
options: {
position: 'topright'
},
-
- onAdd: function (map) {
+ setOpacityLayer: function (layer) {
+ opacity_layer = layer;
+ },
+ onAdd: function () {
var higher_opacity_div = L.DomUtil.create('div', 'higher_opacity_control');
@@ -30,7 +34,9 @@ L.Control.lowerOpacity = L.Control.extend({
options: {
position: 'topright'
},
-
+ setOpacityLayer: function (layer) {
+ opacity_layer = layer;
+ },
onAdd: function (map) {
var lower_opacity_div = L.DomUtil.create('div', 'lower_opacity_control');
@@ -48,7 +54,9 @@ L.Control.opacitySlider = L.Control.extend({
options: {
position: 'topright'
},
-
+ setOpacityLayer: function (layer) {
+ opacity_layer = layer;
+ },
onAdd: function (map) {
var opacity_slider_div = L.DomUtil.create('div', 'opacity_slider_control');
@@ -71,7 +79,7 @@ L.Control.opacitySlider = L.Control.extend({
slide: function ( event, ui ) {
var slider_value = ui.value / 100;
- historic_seattle.setOpacity(slider_value);
+ opacity_layer.setOpacity(slider_value);
}
});
@@ -85,12 +93,12 @@ L.Control.opacitySlider = L.Control.extend({
function onClickHigherOpacity() {
- var opacity_value = historic_seattle.options.opacity;
+ var opacity_value = opacity_layer.options.opacity;
if (opacity_value > 1) {
return;
} else {
- historic_seattle.setOpacity(opacity_value + 0.2);
+ opacity_layer.setOpacity(opacity_value + 0.2);
//When you double-click on the control, do not zoom.
map.doubleClickZoom.disable();
map.once('click', function (e) {
@@ -101,12 +109,12 @@ function onClickHigherOpacity() {
}
function onClickLowerOpacity() {
- var opacity_value = historic_seattle.options.opacity;
+ var opacity_value = opacity_layer.options.opacity;
if (opacity_value < 0) {
return;
} else {
- historic_seattle.setOpacity(opacity_value - 0.2);
+ opacity_layer.setOpacity(opacity_value - 0.2);
//When you double-click on the control, do not zoom.
map.doubleClickZoom.disable();
map.once('click', function (e) {

0 comments on commit 4d77005

Please sign in to comment.