https://longpaddock.qld.gov.au/vendor/other/Control.Opacity.js

1/*
2        Leaflet.OpacityControls, a plugin for adjusting the opacity of a Leaflet map.
3        (c) 2013, Jared Dominguez
4        (c) 2013, LizardTech
5
6        https://github.com/lizardtechblog/Leaflet.OpacityControls
7*/
8
9//Declare global variables
10var opacity_layer;
11var opacity_function;
12var opacity_slider_cnrtl;
13var opacity_value = 0.5;
14var _map;
15
16//Create a control to increase the opacity value. This makes the image more opaque.
17L.Control.higherOpacity = L.Control.extend({
18    options: {
19        position: 'topleft'
20    },
21    setOpacityLayer: function(layer) {
22        opacity_layer = layer;
23    },
24    setOpacityFunc: function(func) {
25        opacity_function = func;
26    },
27    onAdd: function() {
28
29        var higher_opacity_div = L.DomUtil.create('div', 'higher_opacity_control');
30
31        L.DomEvent.addListener(higher_opacity_div, 'click', L.DomEvent.stopPropagation)
32            .addListener(higher_opacity_div, 'click', L.DomEvent.preventDefault)
33            .addListener(higher_opacity_div, 'click', function() { onClickHigherOpacity() });
34
35        return higher_opacity_div;
36    }
37});
38
39//Create a control to decrease the opacity value. This makes the image more transparent.
40L.Control.lowerOpacity = L.Control.extend({
41    options: {
42        position: 'topleft'
43    },
44    setOpacityLayer: function(layer) {
45        opacity_layer = layer;
46    },
47    setOpacityFunc: function(func) {
48        opacity_function = func;
49    },
50    onAdd: function(map) {
51
52        var lower_opacity_div = L.DomUtil.create('div', 'lower_opacity_control');
53
54        L.DomEvent.addListener(lower_opacity_div, 'click', L.DomEvent.stopPropagation)
55            .addListener(lower_opacity_div, 'click', L.DomEvent.preventDefault)
56            .addListener(lower_opacity_div, 'click', function() { onClickLowerOpacity() });
57
58        return lower_opacity_div;
59    }
60});
61
62//Create a jquery-ui slider with values from 0 to 100. Match the opacity value to the slider value divided by 100.
63L.Control.opacitySlider = L.Control.extend({
64    options: {
65        position: 'topleft',
66        title: 'Set the transparency of the map data layer'
67    },
68    setOpacityLayer: function(layer) {
69        opacity_layer = layer;
70    },
71    setOpacityFunc: function(func) {
72        opacity_function = func;
73    },
74    setSlider: function(val) {
75        opacity_value = val;
76        $(opacity_slider_cnrtl).slider('value', opacity_value * 100);
77    },
78    onAdd: function(map) {
79        var opacity_slider_div = L.DomUtil.create('div', 'opacity_slider_control');
80        _map = map;
81        opacity_slider_cnrtl = $(opacity_slider_div).slider({
82            orientation: "vertical",
83            range: "min",
84            min: 0,
85            max: 100,
86            value: opacity_value * 100,
87            step: 10,
88            classes : {"ui-slider-handle": "opacity-toggle ui-corner-all"},
89            start: function(event, ui) {
90                //When moving the slider, disable panning.
91                _map.dragging.disable();
92                _map.once('mousedown', function(e) {
93                    map.dragging.enable();
94                });
95            },
96            slide: function(event, ui) {
97                var slider_value = ui.value / 100;
98                changeOpacity(slider_value - opacity_value);
99            }
100        });
101        opacity_slider_div.title = this.options.title;
102
103        return opacity_slider_div;
104    }
105});
106
107function changeOpacity(inc) {
108    var new_opacity_value = opacity_value + inc;
109
110    if (new_opacity_value > 1) {
111        if (opacity_value >= 1) return false;
112        new_opacity_value = 1;
113    }
114    if (new_opacity_value < 0) {
115        if (opacity_value <= 0) return false;
116        new_opacity_value = 0;
117    }
118
119    opacity_value = new_opacity_value;
120    $(opacity_slider_cnrtl).slider('value', opacity_value * 100);
121    opacity_function(opacity_value);
122    //When you double-click on the control, do not zoom.
123    _map.doubleClickZoom.disable();
124    _map.once('click', function(e) {
125        _map.doubleClickZoom.enable();
126    });
127
128}
129
130
131function onClickHigherOpacity() {
132    var opacity_value = opacity_layer.options.opacity;
133
134    if (!changeOpacity(0.2)) {
135        return;
136    } else {
137        //When you double-click on the control, do not zoom.
138        //_map.doubleClickZoom.disable();
139        //_map.once('click', function(e) {
140        //    _map.doubleClickZoom.enable();
141        //});
142    }
143
144}
145
146function onClickLowerOpacity() {
147    var opacity_value = opacity_layer.options.opacity;
148
149    if (!changeOpacity(-0.2)) {
150        return;
151    } else {
152        //opacity_layer.setOpacity(opacity_value - 0.2);
153        //When you double-click on the control, do not zoom.
154        //_map.doubleClickZoom.disable();
155        //_map.once('click', function(e) {
156        //   _map.doubleClickZoom.enable();
157        //});
158    }
159
160}