💡 題名ラベルオプション追加

- 💡 UI修正
- 💡 各ファイル修正
- 📝 README 修正
- 📝 package.json 更新

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
+
 ```
 
 <br>
@@ -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);
 
 ```

docs/js/script.js

@@ -47,14 +47,17 @@ var Map_AddLayer = {
 
 //LayerControl
 L.control.layers(
-    Map_BaseLayer, 
-    Map_AddLayer, 
+    Map_BaseLayer,
+    Map_AddLayer,
     {
     collapsed: false
     }
 ).addTo(map);
 
 //OpacityControl
 L.control.opacity(
-    Map_AddLayer
+    Map_AddLayer,
+    {
+    label: "Layers Opacity"
+    }
 ).addTo(map);

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
 }

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);

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": {

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
 }

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) {