leaflet-transparency/leaflet-transparency.min.js

A Leaflet plugin that allows to add an opacity control

L.Control.OpacitySlider=L.Control.extend({includes:L.Evented?L.Evented.prototype:L.Mixin.Events,options:{position:"topright",opacity:100,backgroundColor:"transparent",sliderImageUrl:"images/opacity-slider3d14.png",margin:5,},_OPACITY_MAX_PIXELS:69,initialize:function(b,a){L.Util.setOptions(this,a);this.layer=b;this.layers=this.layer?[this.layer]:[]},onAdd:function(d){var b=this._container=L.DomUtil.create("DIV","opacity-control");var c=this._slider=L.DomUtil.create("DIV","opacity-slider");var a=this._knob=L.DomUtil.create("DIV","opacity-knob");b.setAttribute("style","cursor:pointer;");c.setAttribute("style","margin:"+this.options.margin+"px;overflow-x:hidden;overflow-y:hidden;background:url("+this.options.sliderImageUrl+") no-repeat;width:71px;height:21px;");a.setAttribute("style","padding:0;margin:0;overflow-x:hidden;overflow-y:hidden;background:url("+this.options.sliderImageUrl+") no-repeat -71px 0;width:14px;height:21px;");c.appendChild(a);b.appendChild(c);this.knob=new this.DraggableObject(a,{restrictY:true,container:b,onDragEnd:function(g){var f=this.knob.getValueX();this.setOpacity(f)}.bind(this)});L.DomEvent.on(b,"click mousedown mousemove mouseup",function(h){L.DomUtil.disableTextSelection();if(h.type=="mousedown"){this._dragging=true}else{if(h.type=="mouseup"||h.type=="click"){this._dragging=false}}if(h.type=="mousemove"&&this._dragging==true||h.type=="click"){var g=this.findPosLeft(this._container);var f=h.pageX-g-this.options.margin;this.knob.setValueX(f);this.setOpacity(f)}},this);L.DomEvent.disableClickPropagation(b);this._resetSlider();this.on("hidden",function(g){for(var f in this.layers){if(this.layers[f]){this.layers[f].remove()}}},this);this.on("visible",function(g){for(var f in this.layers){if(this.layers[f]){this.layers[f].addTo(this._map)}}},this);if(!this.layer){if(d.options.layers&&d.options.layers.length){this.setLayer(d.options.layers[0]);this._setLayerOpacity(d.options.layers[0],this.opacity)}d.on("baselayerchange",function(f){this.setLayer(f.layer);this._setLayerOpacity(f.layer,this.opacity)},this)}return b},setOpacity:function(a){var b=(100/this._OPACITY_MAX_PIXELS)*a;b=b/100;if(b<0){b=0}this.fire(b>0?"visible":"hidden");if(this.layer){if(this.layer.eachLayer){this.layer.eachLayer(function(c){this._setLayerOpacity(c,b)},this)}else{this._setLayerOpacity(this.layer,b)}}},_setLayerOpacity:function(a,b){if(a.setStyle){a.setStyle({opacity:b});this.opacity=b}else{if(a.setOpacity){a.setOpacity(b);this.opacity=b}}},findPosLeft:function(a){var b=0;if(a.offsetParent){do{b+=a.offsetLeft;a=a.offsetParent}while(a);return b}return undefined},getLayer:function(){return this.layer},setLayer:function(a){this.removeFeatureLayer(this.layer);this.addFeatureLayer(a);this.layer=a},addFeatureLayer:function(a){this.layers.push(a);return this.layers},removeFeatureLayer:function(b){for(var a in this.layers){if(this.layers[a]&&this.layers[a]._leaflet_id===b._leaflet_id){this.layers.splice(a,1)}}return this.layers},_resetSlider:function(){this._initialValue=this._OPACITY_MAX_PIXELS/(100/this.options.opacity);this.knob.setValueX(this._initialValue);this.setOpacity(this._initialValue)},DraggableObject:function(l,d){var p=this;var b={draggingCursor:"default",draggableCursor:"default",onDragStart:A,onDragEnd:A,onDragging:A,onMouseDown:A,onMouseUp:A,intervalX:1,intervalY:1,toleranceX:Infinity,toleranceY:Infinity,interval:1};L.Util.extend(b,d);var a=b.draggingCursor;var e=b.draggableCursor;var u=false;var n;var z,x,v,w,r,q;var s,t;var f,c;var m=l.setCapture?l:document;b.left=b.left||l.offsetLeft;b.top=b.top||l.offsetTop;l.style.position="absolute";l.addEventListener("mousedown",k);m.addEventListener("mouseup",i);j(false);y(b.left,b.top,false);function j(B){l.style.cursor=B?a:e}function y(C,H,D){t=Math.round(C);s=Math.round(H);if(b.intervalX>1){var B=Math.round(b.intervalX/2);var F=Math.round(t%b.intervalX);t=(F<B)?(t-F):(t+(b.intervalX-F))}if(b.intervalY>1){var G=Math.round(b.intervalY/2);var E=Math.round(s%b.intervalY);s=(E<G)?(s-E):(s+(b.intervalY-E))}if(b.container&&b.container.offsetWidth){t=Math.max(0,Math.min(t,b.container.offsetWidth-l.offsetWidth));s=Math.max(0,Math.min(s,b.container.offsetHeight-l.offsetHeight))}if(typeof z==="number"){if(((t-z)>b.toleranceX||(z-(t+l.offsetWidth))>b.toleranceX)||((s-x)>b.toleranceY||(x-(s+l.offsetHeight))>b.toleranceY)){t=f;s=c}}l.style.left=!b.restrictX&&!D?t+"px":l.style.left;l.style.top=!b.restrictY&&!D?s+"px":l.style.top}function o(B){var C=B||event;z=w+((h(C))-r);x=v+((g(C))-q);w=z;v=x;r=h(C);q=g(C);if(u){y(z,x,n);b.onDragging({mouseX:r,mouseY:q,startLeft:f,startTop:c,event:C})}}function k(B){var C=B||event;j(true);b.onMouseDown(C);if(l.style.position!=="absolute"){l.style.position="absolute";return}r=h(C);q=g(C);f=l.offsetLeft;c=l.offsetTop;w=f;v=c;m.addEventListener("mousemove",o);if(l.setCapture){l.setCapture()}if(C.preventDefault){C.preventDefault();C.stopPropagation()}else{C.cancelBubble=true;C.returnValue=false}u=true;b.onDragStart({mouseX:r,mouseY:q,startLeft:f,startTop:c,event:C})}function i(B){var C=B||event;if(u){j(false);m.removeEventListener("mousemove",o);if(l.releaseCapture){l.releaseCapture()}u=false;b.onDragEnd({mouseX:r,mouseY:q,startLeft:f,startTop:c,event:C})}z=x=null;b.onMouseUp(C)}function h(B){return B.pageX||(B.clientX+document.body.scrollLeft+document.documentElement.scrollLeft)}function g(B){return B.pageY||(B.clientY+document.body.scrollTop+document.documentElement.scrollTop)}function A(B){}p.moveTo=function(B){y(B.x,B.y,false)};p.moveBy=function(B){y(l.offsetLeft+B.width,l.offsetHeight+B.height,false)};p.setDraggingCursor=function(B){a=B;j(u)};p.setDraggableCursor=function(B){e=B;j(u)};p.left=function(){return t};p.top=function(){return s};p.getValueX=function(){var B=b.intervalX||1;return Math.round(t/B)};p.getValueY=function(){var B=b.intervalY||1;return Math.round(s/B)};p.setValueX=function(B){y(B*b.intervalX,s,false)};p.setValueY=function(B){y(t,B*b.intervalY,false)};p.preventDefaultMovement=function(B){n=B}}});