diff --git a/README.md b/README.md index e2093bb..cb8f18f 100644 --- a/README.md +++ b/README.md @@ -36,7 +36,7 @@ collapsed: false or true //The position of the control (one of the map corners). position: 'topleft' or 'topright' or 'bottomleft' or 'bottomright' -//Optional label to present before the controls (e.g. "Layers Opacity") +//Label display of title (e.g. "Layers Opacity") label: string or null ``` @@ -153,7 +153,10 @@ L.control.layers( //OpacityControl L.control.opacity( - Map_AddLayer + Map_AddLayer, + { + label: "Layers Opacity" + } ).addTo(map); ``` @@ -246,7 +249,10 @@ L.control.layers( //OpacityControl L.control.opacity( - Map_AddLayer + Map_AddLayer, + { + label: "Layers Opacity" + } ).addTo(map); ``` @@ -306,6 +312,9 @@ collapsed: false or true //コントロールの配置設定。(デフォルト:右上配置) position: 'topleft' or 'topright' or 'bottomleft' or 'bottomright' +//タイトルのラベル表示(例:Layers Opacity) +label: string or null + ```
@@ -420,7 +429,10 @@ L.control.layers( //OpacityControl L.control.opacity( - Map_AddLayer + Map_AddLayer, + { + label: "Layers Opacity" + } ).addTo(map); ``` @@ -513,7 +525,10 @@ L.control.layers( //OpacityControl L.control.opacity( - Map_AddLayer + Map_AddLayer, + { + label: "Layers Opacity" + } ).addTo(map); ``` diff --git a/dist/L.Control.Opacity.css b/dist/L.Control.Opacity.css index 52ea3b4..eb61cc3 100755 --- a/dist/L.Control.Opacity.css +++ b/dist/L.Control.Opacity.css @@ -1 +1 @@ -input[type=range]{-webkit-appearance:none;-webkit-tap-highlight-color:rgba(255,255,255,0);width:110px;height:10px;margin:0;border:none;padding:1px 2px;border-radius:30px;background:#F1F0EE;outline:0}input[type=range]::-ms-track{border:inherit;color:transparent;background:0 0}input[type=range]::-ms-fill-lower,input[type=range]::-ms-fill-upper{background:0 0}input[type=range]::-ms-tooltip{display:none}input[type=range]::-ms-thumb{width:15px;height:18px;border-radius:12px;border:0;background-image:linear-gradient(to bottom,#1253A4 0,#1253A4 100%)} \ No newline at end of file +input[type=range]{-webkit-appearance:none;-webkit-tap-highlight-color:rgba(255,255,255,0);width:110px;height:10px;margin:0;border:none;padding:1px 2px;border-radius:30px;background:#F1F0EE;outline:0}input[type=range]::-ms-track{border:inherit;color:transparent;background:0 0}input[type=range]::-ms-fill-lower,input[type=range]::-ms-fill-upper{background:0 0}input[type=range]::-ms-tooltip{display:none}input[type=range]::-ms-thumb{width:15px;height:18px;border-radius:12px;border:0;background-image:linear-gradient(to bottom,#1253A4 0,#1253A4 100%)}.leaflet-control-layers-label{margin:0 0 8px 1px} \ No newline at end of file diff --git a/dist/L.Control.Opacity.js b/dist/L.Control.Opacity.js old mode 100644 new mode 100755 index 8d0da9c..0010303 --- a/dist/L.Control.Opacity.js +++ b/dist/L.Control.Opacity.js @@ -1 +1 @@ -L.Control.Opacity=L.Control.extend({options:{collapsed:!1,position:"topright"},initialize:function(t,e){for(i in L.Util.setOptions(this,e),this._layerControlInputs=[],this._layers=[],this._lastZIndex=0,this._handlingClick=!1,t)this._addLayer(t[i],i,!0)},onAdd:function(t){return this._initLayout(),this._update(),this._container},expand:function(){L.DomUtil.addClass(this._container,"leaflet-control-layers-expanded"),this._form.style.height=null;var t=this._map.getSize().y-(this._container.offsetTop+50);return t1,this._baseLayersList.style.display=t?"":"none"),this._separator.style.display=e&&t?"":"none",this},_addItem:function(t){var e,i=document.createElement("label");t.overlay?(e=document.createElement("input"),e.type="range",e.className="leaflet-control-layers-range",e.min=0,e.max=100,e.value=100):e=this._createRadioElement("leaflet-base-layers",checked),this._layerControlInputs.push(e),e.layerId=L.Util.stamp(t.layer),L.DomEvent.on(e,"click",this._onInputClick,this);var a=document.createElement("span");a.innerHTML=" "+t.name;var s=document.createElement("div"),l=document.createElement("div");i.appendChild(s),s.appendChild(a),i.appendChild(l),l.appendChild(e);var n=t.overlay?this._overlaysList:this._baseLayersList;return n.appendChild(i),i},_onInputClick:function(){var t,e,i=this._layerControlInputs;this._handlingClick=!0;for(var a=i.length-1;a>=0;a--)t=i[a],e=this._getLayer(t.layerId).layer,"undefined"==typeof e._url||e.setOpacity(t.value/100);this._handlingClick=!1,this._refocusOnMap()}}),L.control.opacity=function(t,e){return new L.Control.Opacity(t,e)}; \ No newline at end of file diff --git a/docs/js/script.js b/docs/js/script.js index deefced..836caf3 100644 --- a/docs/js/script.js +++ b/docs/js/script.js @@ -47,8 +47,8 @@ var Map_AddLayer = { //LayerControl L.control.layers( - Map_BaseLayer, - Map_AddLayer, + Map_BaseLayer, + Map_AddLayer, { collapsed: false } @@ -56,5 +56,8 @@ L.control.layers( //OpacityControl L.control.opacity( - Map_AddLayer + Map_AddLayer, + { + label: "Layers Opacity" + } ).addTo(map); diff --git a/docs/plugin/Leaflet.Control.Opacity/dist/L.Control.Opacity.css b/docs/plugin/Leaflet.Control.Opacity/dist/L.Control.Opacity.css index 52ea3b4..eb61cc3 100755 --- a/docs/plugin/Leaflet.Control.Opacity/dist/L.Control.Opacity.css +++ b/docs/plugin/Leaflet.Control.Opacity/dist/L.Control.Opacity.css @@ -1 +1 @@ -input[type=range]{-webkit-appearance:none;-webkit-tap-highlight-color:rgba(255,255,255,0);width:110px;height:10px;margin:0;border:none;padding:1px 2px;border-radius:30px;background:#F1F0EE;outline:0}input[type=range]::-ms-track{border:inherit;color:transparent;background:0 0}input[type=range]::-ms-fill-lower,input[type=range]::-ms-fill-upper{background:0 0}input[type=range]::-ms-tooltip{display:none}input[type=range]::-ms-thumb{width:15px;height:18px;border-radius:12px;border:0;background-image:linear-gradient(to bottom,#1253A4 0,#1253A4 100%)} \ No newline at end of file +input[type=range]{-webkit-appearance:none;-webkit-tap-highlight-color:rgba(255,255,255,0);width:110px;height:10px;margin:0;border:none;padding:1px 2px;border-radius:30px;background:#F1F0EE;outline:0}input[type=range]::-ms-track{border:inherit;color:transparent;background:0 0}input[type=range]::-ms-fill-lower,input[type=range]::-ms-fill-upper{background:0 0}input[type=range]::-ms-tooltip{display:none}input[type=range]::-ms-thumb{width:15px;height:18px;border-radius:12px;border:0;background-image:linear-gradient(to bottom,#1253A4 0,#1253A4 100%)}.leaflet-control-layers-label{margin:0 0 8px 1px} \ No newline at end of file diff --git a/docs/plugin/Leaflet.Control.Opacity/dist/L.Control.Opacity.js b/docs/plugin/Leaflet.Control.Opacity/dist/L.Control.Opacity.js old mode 100644 new mode 100755 index 8d0da9c..0010303 --- a/docs/plugin/Leaflet.Control.Opacity/dist/L.Control.Opacity.js +++ b/docs/plugin/Leaflet.Control.Opacity/dist/L.Control.Opacity.js @@ -1 +1 @@ -L.Control.Opacity=L.Control.extend({options:{collapsed:!1,position:"topright"},initialize:function(t,e){for(i in L.Util.setOptions(this,e),this._layerControlInputs=[],this._layers=[],this._lastZIndex=0,this._handlingClick=!1,t)this._addLayer(t[i],i,!0)},onAdd:function(t){return this._initLayout(),this._update(),this._container},expand:function(){L.DomUtil.addClass(this._container,"leaflet-control-layers-expanded"),this._form.style.height=null;var t=this._map.getSize().y-(this._container.offsetTop+50);return t1,this._baseLayersList.style.display=t?"":"none"),this._separator.style.display=e&&t?"":"none",this},_addItem:function(t){var e,i=document.createElement("label");t.overlay?(e=document.createElement("input"),e.type="range",e.className="leaflet-control-layers-range",e.min=0,e.max=100,e.value=100):e=this._createRadioElement("leaflet-base-layers",checked),this._layerControlInputs.push(e),e.layerId=L.Util.stamp(t.layer),L.DomEvent.on(e,"click",this._onInputClick,this);var a=document.createElement("span");a.innerHTML=" "+t.name;var s=document.createElement("div"),l=document.createElement("div");i.appendChild(s),s.appendChild(a),i.appendChild(l),l.appendChild(e);var n=t.overlay?this._overlaysList:this._baseLayersList;return n.appendChild(i),i},_onInputClick:function(){var t,e,i=this._layerControlInputs;this._handlingClick=!0;for(var a=i.length-1;a>=0;a--)t=i[a],e=this._getLayer(t.layerId).layer,"undefined"==typeof e._url||e.setOpacity(t.value/100);this._handlingClick=!1,this._refocusOnMap()}}),L.control.opacity=function(t,e){return new L.Control.Opacity(t,e)}; \ No newline at end of file diff --git a/docs/plugin/Leaflet.Control.Opacity/src/L.Control.Opacity.css b/docs/plugin/Leaflet.Control.Opacity/src/L.Control.Opacity.css index 1d1b234..8c720db 100755 --- a/docs/plugin/Leaflet.Control.Opacity/src/L.Control.Opacity.css +++ b/docs/plugin/Leaflet.Control.Opacity/src/L.Control.Opacity.css @@ -29,4 +29,9 @@ input[type="range"]::-ms-thumb { border-radius: 12px; border: 0; background-image: linear-gradient(to bottom, #1253A4 0, #1253A4 100%); +} + +/* 題名レイアウト */ +.leaflet-control-layers-label { + margin: 0px 0px 8px 1px } \ No newline at end of file diff --git a/docs/plugin/Leaflet.Control.Opacity/src/L.Control.Opacity.js b/docs/plugin/Leaflet.Control.Opacity/src/L.Control.Opacity.js old mode 100644 new mode 100755 index 8f13544..edca56d --- a/docs/plugin/Leaflet.Control.Opacity/src/L.Control.Opacity.js +++ b/docs/plugin/Leaflet.Control.Opacity/src/L.Control.Opacity.js @@ -1,7 +1,8 @@ L.Control.Opacity = L.Control.extend({ options: { collapsed: false, - position: 'topright' + position: 'topright', + label: null }, initialize: function (overlays, options) { L.Util.setOptions(this, options); @@ -41,6 +42,11 @@ L.Control.Opacity = L.Control.extend({ container.setAttribute('aria-haspopup', true); L.DomEvent.disableClickPropagation(container); L.DomEvent.disableScrollPropagation(container); + if(this.options.label){ + var labelP = L.DomUtil.create('p', className + "-label"); + labelP.innerHTML = this.options.label; + container.appendChild(labelP); + } var form = this._form = L.DomUtil.create('form', className + '-list'); if (collapsed) { this._map.on('click', this.collapse, this); diff --git a/img/img_01.gif b/img/img_01.gif index b80d05c..e9b0e66 100644 Binary files a/img/img_01.gif and b/img/img_01.gif differ diff --git a/package.json b/package.json index 98eac1b..890d96f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "leaflet.control.opacity", - "version": "1.2.0", + "version": "1.3.0", "description": "Leaflet.Control.Opacity is a Leaflet plugin that makes multiple tile layers transparent. (Leaflet v1.x.x)", "main": "dist/L.Control.Opacity.js", "repository": { diff --git a/src/L.Control.Opacity.css b/src/L.Control.Opacity.css index 1d1b234..8c720db 100755 --- a/src/L.Control.Opacity.css +++ b/src/L.Control.Opacity.css @@ -29,4 +29,9 @@ input[type="range"]::-ms-thumb { border-radius: 12px; border: 0; background-image: linear-gradient(to bottom, #1253A4 0, #1253A4 100%); +} + +/* 題名レイアウト */ +.leaflet-control-layers-label { + margin: 0px 0px 8px 1px } \ No newline at end of file diff --git a/src/L.Control.Opacity.js b/src/L.Control.Opacity.js old mode 100644 new mode 100755 index df7b98c..edca56d --- a/src/L.Control.Opacity.js +++ b/src/L.Control.Opacity.js @@ -43,9 +43,9 @@ L.Control.Opacity = L.Control.extend({ L.DomEvent.disableClickPropagation(container); L.DomEvent.disableScrollPropagation(container); if(this.options.label){ - var labelSpan = L.DomUtil.create('span', className + "-label"); - labelSpan.innerHTML = this.options.label; - container.appendChild(labelSpan); + var labelP = L.DomUtil.create('p', className + "-label"); + labelP.innerHTML = this.options.label; + container.appendChild(labelP); } var form = this._form = L.DomUtil.create('form', className + '-list'); if (collapsed) {