├── .gitignore
├── .prettierrc
├── LICENSE
├── README.md
├── dist
├── L.Control.Opacity.css
├── L.Control.Opacity.d.ts
└── L.Control.Opacity.js
├── docs
├── css
│ └── style.css
├── index.html
├── js
│ └── app.js
└── plugin
│ └── Leaflet.Control.Opacity
│ ├── dist
│ ├── L.Control.Opacity.css
│ └── L.Control.Opacity.js
│ └── src
│ ├── L.Control.Opacity.css
│ └── L.Control.Opacity.js
├── img
└── img_01.gif
├── package.json
└── src
├── L.Control.Opacity.css
└── L.Control.Opacity.js
/.gitignore:
--------------------------------------------------------------------------------
1 |
2 | dist/.DS_Store
3 | src/.DS_Store
4 | docs/plugin/Leaflet.Control.Opacity/.DS_Store
5 | docs/plugin/Leaflet.Control.Opacity/dist/.DS_Store
6 | docs/plugin/Leaflet.Control.Opacity/src/.DS_Store
7 | .idea/dictionaries/MIERUNE_PC.xml
8 | .idea/Leaflet.Control.Opacity.iml
9 | .idea/misc.xml
10 | .idea/modules.xml
11 | .idea/vcs.xml
12 | .idea/workspace.xml
13 | docs/plugin/.DS_Store
14 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "printWidth": 100,
3 | "trailingComma": "es5",
4 | "tabWidth": 4,
5 | "semi": true,
6 | "singleQuote": true,
7 | "endOfLine": "lf"
8 | }
9 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018-2021 Yasunori Kirimoto
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Leaflet.Control.Opacity
2 |
3 | Leaflet.Control.Opacity is a Leaflet plugin that makes multiple tile layers transparent. (Leaflet v1.x.x)
4 | [Leaflet Plugins](https://leafletjs.com/plugins.html#tileimage-display)
5 | [npm](https://www.npmjs.com/package/leaflet.control.opacity)
6 |
7 |
8 |
9 | Browser Support
10 | - Chrome
11 | - Firefox
12 | - Safari
13 |
14 |
15 |
16 | ## Usage
17 |
18 | 
19 |
20 |
21 |
22 | ### Demo
23 |
24 | [demo](https://dayjournal.github.io/Leaflet.Control.Opacity)
25 |
26 |
27 |
28 | ### Option
29 |
30 | ```javascript
31 | //If true, the control will be collapsed into an icon and expanded on mouse hover or touch.
32 | collapsed: false or true
33 |
34 | //The position of the control (one of the map corners).
35 | position: 'topleft' or 'topright' or 'bottomleft' or 'bottomright'
36 |
37 | //Label display of title (e.g. "Layers Opacity")
38 | label: string or null
39 | ```
40 |
41 |
42 |
43 | ### Example
44 |
45 | ./docs
46 |
47 | index.html
48 | ```html
49 |
50 |
51 |
52 |
53 | Leaflet.Control.Opacity example
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 | ```
69 |
70 | style.css
71 | ```css
72 | html,
73 | body {
74 | height: 100%;
75 | padding: 0;
76 | margin: 0;
77 | }
78 |
79 | #map {
80 | z-index: 0;
81 | height: 100%;
82 | }
83 | ```
84 |
85 | app.js
86 | ```javascript
87 | //MIERUNE Color
88 | const m_color = new L.tileLayer('https://tile.mierune.co.jp/mierune/{z}/{x}/{y}.png', {
89 | attribution:
90 | "Maptiles by MIERUNE, under CC BY. Data by OpenStreetMap contributors, under ODbL.",
91 | });
92 |
93 | //MIERUNE MONO
94 | const m_mono = new L.tileLayer('https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png', {
95 | attribution:
96 | "Maptiles by MIERUNE, under CC BY. Data by OpenStreetMap contributors, under ODbL.",
97 | });
98 |
99 | //OSM
100 | const o_std = new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
101 | attribution: '© OpenStreetMap contributors',
102 | });
103 |
104 | //GSI Pale
105 | const t_pale = new L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
106 | attribution:
107 | "国土地理院",
108 | });
109 |
110 | //GSI Ort
111 | const t_ort = new L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
112 | attribution:
113 | "国土地理院",
114 | });
115 |
116 | //MAP
117 | const map = L.map('map', {
118 | center: [35.6831925, 139.7511307],
119 | zoom: 13,
120 | zoomControl: true,
121 | layers: [m_mono],
122 | });
123 |
124 | //BaseLayer
125 | const Map_BaseLayer = {
126 | 'MIERUNE Color': m_color,
127 | 'MIERUNE MONO': m_mono,
128 | };
129 |
130 | //AddLayer
131 | const Map_AddLayer = {
132 | 'OSM': o_std,
133 | 'GSI Pale': t_pale,
134 | 'GSI Ort': t_ort,
135 | };
136 |
137 | //LayerControl
138 | L.control
139 | .layers(Map_BaseLayer, Map_AddLayer, {
140 | collapsed: false,
141 | })
142 | .addTo(map);
143 |
144 | //OpacityControl
145 | L.control
146 | .opacity(Map_AddLayer, {
147 | label: 'Layers Opacity',
148 | })
149 | .addTo(map);
150 | ```
151 |
152 |
153 |
154 | ### Example - npm
155 |
156 | Start Leaflet easily. [Leaflet v1.x.x, webpack]
157 | [leaflet-starter](https://github.com/dayjournal/leaflet-starter)
158 |
159 | Install package
160 | ```bash
161 | npm install leaflet.control.opacity
162 | ```
163 |
164 | main.js
165 | ```javascript
166 | // CSS import
167 | import "leaflet/dist/leaflet.css";
168 | import "leaflet.control.opacity/dist/L.Control.Opacity.css";
169 | import "./css/style.css";
170 |
171 | // JS import
172 | import 'leaflet.control.opacity';
173 | import './js/app.js';
174 | ```
175 |
176 | app.js
177 | ```javascript
178 | //MIERUNE Color
179 | const m_color = new L.tileLayer('https://tile.mierune.co.jp/mierune/{z}/{x}/{y}.png', {
180 | attribution:
181 | "Maptiles by MIERUNE, under CC BY. Data by OpenStreetMap contributors, under ODbL.",
182 | });
183 |
184 | //MIERUNE MONO
185 | const m_mono = new L.tileLayer('https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png', {
186 | attribution:
187 | "Maptiles by MIERUNE, under CC BY. Data by OpenStreetMap contributors, under ODbL.",
188 | });
189 |
190 | //OSM
191 | const o_std = new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
192 | attribution: '© OpenStreetMap contributors',
193 | });
194 |
195 | //GSI Pale
196 | const t_pale = new L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
197 | attribution:
198 | "国土地理院",
199 | });
200 |
201 | //GSI Ort
202 | const t_ort = new L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
203 | attribution:
204 | "国土地理院",
205 | });
206 |
207 | //MAP
208 | const map = L.map('map', {
209 | center: [35.6831925, 139.7511307],
210 | zoom: 13,
211 | zoomControl: true,
212 | layers: [m_mono],
213 | });
214 |
215 | //BaseLayer
216 | const Map_BaseLayer = {
217 | 'MIERUNE Color': m_color,
218 | 'MIERUNE MONO': m_mono,
219 | };
220 |
221 | //AddLayer
222 | const Map_AddLayer = {
223 | 'OSM': o_std,
224 | 'GSI Pale': t_pale,
225 | 'GSI Ort': t_ort,
226 | };
227 |
228 | //LayerControl
229 | L.control
230 | .layers(Map_BaseLayer, Map_AddLayer, {
231 | collapsed: false,
232 | })
233 | .addTo(map);
234 |
235 | //OpacityControl
236 | L.control
237 | .opacity(Map_AddLayer, {
238 | label: 'Layers Opacity',
239 | })
240 | .addTo(map);
241 | ```
242 |
243 |
244 |
245 | ## License
246 | MIT
247 |
248 | Copyright (c) 2018-2021 Yasunori Kirimoto
249 |
250 |
251 |
252 | ---
253 |
254 |
255 |
256 | ### Japanese
257 |
258 |
259 |
260 | # Leaflet.Control.Opacity
261 |
262 | Leaflet.Control.Opacityは、複数のタイルレイヤーを透過するLeafletのプラグインです。 (Leaflet v1.x.x)
263 | [Leaflet Plugins](https://leafletjs.com/plugins.html#tileimage-display)
264 | [npm](https://www.npmjs.com/package/leaflet.control.opacity)
265 |
266 |
267 |
268 | 対応ブラウザ
269 | - Chrome
270 | - Firefox
271 | - Safari
272 |
273 |
274 |
275 | ## 使用方法
276 |
277 | 
278 |
279 |
280 |
281 | ### デモ
282 |
283 | [デモ](https://dayjournal.github.io/Leaflet.Control.Opacity)
284 |
285 |
286 |
287 | ### オプション
288 |
289 | ```javascript
290 | //コントロールの折りたたみ設定。(デフォルト:折りたたみ無し)
291 | collapsed: false or true
292 |
293 | //コントロールの配置設定。(デフォルト:右上配置)
294 | position: 'topleft' or 'topright' or 'bottomleft' or 'bottomright'
295 |
296 | //タイトルのラベル表示（例:Layers Opacity）
297 | label: string or null
298 | ```
299 |
300 |
301 |
302 | ### 例
303 |
304 | ./docs
305 |
306 | index.html
307 | ```html
308 |
309 |
310 |
311 |
312 | Leaflet.Control.Opacity example
313 |
314 |
315 |
316 |
317 |
318 |
319 |
320 |
321 |
322 |
323 |
324 |
325 |
326 |
327 | ```
328 |
329 | style.css
330 | ```css
331 | html,
332 | body {
333 | height: 100%;
334 | padding: 0;
335 | margin: 0;
336 | }
337 |
338 | #map {
339 | z-index: 0;
340 | height: 100%;
341 | }
342 | ```
343 |
344 | app.js
345 | ```javascript
346 | //MIERUNE Color
347 | const m_color = new L.tileLayer('https://tile.mierune.co.jp/mierune/{z}/{x}/{y}.png', {
348 | attribution:
349 | "Maptiles by MIERUNE, under CC BY. Data by OpenStreetMap contributors, under ODbL.",
350 | });
351 |
352 | //MIERUNE MONO
353 | const m_mono = new L.tileLayer('https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png', {
354 | attribution:
355 | "Maptiles by MIERUNE, under CC BY. Data by OpenStreetMap contributors, under ODbL.",
356 | });
357 |
358 | //OSM
359 | const o_std = new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
360 | attribution: '© OpenStreetMap contributors',
361 | });
362 |
363 | //GSI Pale
364 | const t_pale = new L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
365 | attribution:
366 | "国土地理院",
367 | });
368 |
369 | //GSI Ort
370 | const t_ort = new L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
371 | attribution:
372 | "国土地理院",
373 | });
374 |
375 | //MAP
376 | const map = L.map('map', {
377 | center: [35.6831925, 139.7511307],
378 | zoom: 13,
379 | zoomControl: true,
380 | layers: [m_mono],
381 | });
382 |
383 | //BaseLayer
384 | const Map_BaseLayer = {
385 | 'MIERUNE Color': m_color,
386 | 'MIERUNE MONO': m_mono,
387 | };
388 |
389 | //AddLayer
390 | const Map_AddLayer = {
391 | 'OSM': o_std,
392 | 'GSI Pale': t_pale,
393 | 'GSI Ort': t_ort,
394 | };
395 |
396 | //LayerControl
397 | L.control
398 | .layers(Map_BaseLayer, Map_AddLayer, {
399 | collapsed: false,
400 | })
401 | .addTo(map);
402 |
403 | //OpacityControl
404 | L.control
405 | .opacity(Map_AddLayer, {
406 | label: 'Layers Opacity',
407 | })
408 | .addTo(map);
409 | ```
410 |
411 |
412 |
413 | ### 例 - npm
414 |
415 | Leafletを手軽に始める [Leaflet v1.x.x, webpack]
416 | [leaflet-starter](https://github.com/dayjournal/leaflet-starter)
417 |
418 | パッケージインストール
419 | ```bash
420 | npm install leaflet.control.opacity
421 | ```
422 |
423 | main.js
424 | ```javascript
425 | // CSS import
426 | import "leaflet/dist/leaflet.css";
427 | import "leaflet.control.opacity/dist/L.Control.Opacity.css";
428 | import "./css/style.css";
429 |
430 | // JS import
431 | import 'leaflet.control.opacity';
432 | import './js/app.js';
433 | ```
434 |
435 | app.js
436 | ```javascript
437 | //MIERUNE Color
438 | const m_color = new L.tileLayer('https://tile.mierune.co.jp/mierune/{z}/{x}/{y}.png', {
439 | attribution:
440 | "Maptiles by MIERUNE, under CC BY. Data by OpenStreetMap contributors, under ODbL.",
441 | });
442 |
443 | //MIERUNE MONO
444 | const m_mono = new L.tileLayer('https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png', {
445 | attribution:
446 | "Maptiles by MIERUNE, under CC BY. Data by OpenStreetMap contributors, under ODbL.",
447 | });
448 |
449 | //OSM
450 | const o_std = new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
451 | attribution: '© OpenStreetMap contributors',
452 | });
453 |
454 | //GSI Pale
455 | const t_pale = new L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
456 | attribution:
457 | "国土地理院",
458 | });
459 |
460 | //GSI Ort
461 | const t_ort = new L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
462 | attribution:
463 | "国土地理院",
464 | });
465 |
466 | //MAP
467 | const map = L.map('map', {
468 | center: [35.6831925, 139.7511307],
469 | zoom: 13,
470 | zoomControl: true,
471 | layers: [m_mono],
472 | });
473 |
474 | //BaseLayer
475 | const Map_BaseLayer = {
476 | 'MIERUNE Color': m_color,
477 | 'MIERUNE MONO': m_mono,
478 | };
479 |
480 | //AddLayer
481 | const Map_AddLayer = {
482 | 'OSM': o_std,
483 | 'GSI Pale': t_pale,
484 | 'GSI Ort': t_ort,
485 | };
486 |
487 | //LayerControl
488 | L.control
489 | .layers(Map_BaseLayer, Map_AddLayer, {
490 | collapsed: false,
491 | })
492 | .addTo(map);
493 |
494 | //OpacityControl
495 | L.control
496 | .opacity(Map_AddLayer, {
497 | label: 'Layers Opacity',
498 | })
499 | .addTo(map);
500 | ```
501 |
502 |
503 |
504 | ## ライセンス
505 | MIT
506 |
507 | Copyright (c) 2018-2021 Yasunori Kirimoto
508 |
509 |
--------------------------------------------------------------------------------
/dist/L.Control.Opacity.css:
--------------------------------------------------------------------------------
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:none}input[type='range']::-ms-track{border:inherit;color:transparent;background:transparent}input[type='range']::-ms-fill-lower,input[type='range']::-ms-fill-upper{background:transparent}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}
--------------------------------------------------------------------------------
/dist/L.Control.Opacity.d.ts:
--------------------------------------------------------------------------------
1 | import * as Leaflet from "leaflet";
2 |
3 | declare module "leaflet" {
4 | interface OpacityOptions extends Leaflet.ControlOptions {
5 | collapsed?: boolean
6 | label?: string | null
7 | }
8 | namespace Control {
9 | class Opacity extends Leaflet.Control {
10 | constructor(
11 | options?: OpacityOptions
12 | )
13 | }
14 | }
15 | namespace control {
16 | function opacity(overlays: { [key: string]: L.Layer }, options: OpacityOptions): L.Control.Opacity
17 | }
18 | }
--------------------------------------------------------------------------------
/dist/L.Control.Opacity.js:
--------------------------------------------------------------------------------
1 | L.Control.Opacity=L.Control.extend({options:{collapsed:!1,position:"topright",label:null},initialize:function(t,e){for(const i in L.Util.setOptions(this,e),this._layerControlInputs=[],this._layers=[],this._lastZIndex=0,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 t{t=t.target.value;const e=this._getLayer(i.layerId).layer;void 0===e._url||e.setOpacity(Number(t/100))});const s=document.createElement("span");s.innerHTML=" "+t.name;const a=document.createElement("div"),o=document.createElement("div");e.appendChild(a),a.appendChild(s),e.appendChild(o),o.appendChild(i);const l=t.overlay?this._overlaysList:this._baseLayersList;l.appendChild(e)}}),L.control.opacity=function(t,e){return new L.Control.Opacity(t,e)};
--------------------------------------------------------------------------------
/docs/css/style.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | height: 100%;
4 | padding: 0;
5 | margin: 0;
6 | }
7 |
8 | #map {
9 | z-index: 0;
10 | height: 100%;
11 | }
12 |
--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Leaflet.Control.Opacity example
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/docs/js/app.js:
--------------------------------------------------------------------------------
1 | //MIERUNE Color
2 | const m_color = new L.tileLayer('https://tile.mierune.co.jp/mierune/{z}/{x}/{y}.png', {
3 | attribution:
4 | "Maptiles by MIERUNE, under CC BY. Data by OpenStreetMap contributors, under ODbL.",
5 | });
6 |
7 | //MIERUNE MONO
8 | const m_mono = new L.tileLayer('https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png', {
9 | attribution:
10 | "Maptiles by MIERUNE, under CC BY. Data by OpenStreetMap contributors, under ODbL.",
11 | });
12 |
13 | //OSM
14 | const o_std = new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
15 | attribution: '© OpenStreetMap contributors',
16 | });
17 |
18 | //GSI Pale
19 | const t_pale = new L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
20 | attribution:
21 | "国土地理院",
22 | });
23 |
24 | //GSI Ort
25 | const t_ort = new L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
26 | attribution:
27 | "国土地理院",
28 | });
29 |
30 | //MAP
31 | const map = L.map('map', {
32 | center: [35.6831925, 139.7511307],
33 | zoom: 13,
34 | zoomControl: true,
35 | layers: [m_mono],
36 | });
37 |
38 | //BaseLayer
39 | const Map_BaseLayer = {
40 | 'MIERUNE Color': m_color,
41 | 'MIERUNE MONO': m_mono,
42 | };
43 |
44 | //AddLayer
45 | const Map_AddLayer = {
46 | 'OSM': o_std,
47 | 'GSI Pale': t_pale,
48 | 'GSI Ort': t_ort,
49 | };
50 |
51 | //LayerControl
52 | L.control
53 | .layers(Map_BaseLayer, Map_AddLayer, {
54 | collapsed: false,
55 | })
56 | .addTo(map);
57 |
58 | //OpacityControl
59 | L.control
60 | .opacity(Map_AddLayer, {
61 | label: 'Layers Opacity',
62 | })
63 | .addTo(map);
64 |
--------------------------------------------------------------------------------
/docs/plugin/Leaflet.Control.Opacity/dist/L.Control.Opacity.css:
--------------------------------------------------------------------------------
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:none}input[type='range']::-ms-track{border:inherit;color:transparent;background:transparent}input[type='range']::-ms-fill-lower,input[type='range']::-ms-fill-upper{background:transparent}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}
--------------------------------------------------------------------------------
/docs/plugin/Leaflet.Control.Opacity/dist/L.Control.Opacity.js:
--------------------------------------------------------------------------------
1 | L.Control.Opacity=L.Control.extend({options:{collapsed:!1,position:"topright",label:null},initialize:function(t,e){for(const i in L.Util.setOptions(this,e),this._layerControlInputs=[],this._layers=[],this._lastZIndex=0,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 t{t=t.target.value;const e=this._getLayer(i.layerId).layer;void 0===e._url||e.setOpacity(Number(t/100))});const s=document.createElement("span");s.innerHTML=" "+t.name;const a=document.createElement("div"),o=document.createElement("div");e.appendChild(a),a.appendChild(s),e.appendChild(o),o.appendChild(i);const l=t.overlay?this._overlaysList:this._baseLayersList;l.appendChild(e)}}),L.control.opacity=function(t,e){return new L.Control.Opacity(t,e)};
--------------------------------------------------------------------------------
/docs/plugin/Leaflet.Control.Opacity/src/L.Control.Opacity.css:
--------------------------------------------------------------------------------
1 | /* レンジデザイン設定 */
2 | input[type='range'] {
3 | -webkit-appearance: none;
4 | -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
5 | width: 110px;
6 | height: 10px;
7 | margin: 0;
8 | border: none;
9 | padding: 1px 2px;
10 | border-radius: 30px;
11 | background: #f1f0ee;
12 | outline: none;
13 | }
14 | input[type='range']::-ms-track {
15 | border: inherit;
16 | color: transparent;
17 | background: transparent;
18 | }
19 | input[type='range']::-ms-fill-lower,
20 | input[type='range']::-ms-fill-upper {
21 | background: transparent;
22 | }
23 | input[type='range']::-ms-tooltip {
24 | display: none;
25 | }
26 | input[type='range']::-ms-thumb {
27 | width: 15px;
28 | height: 18px;
29 | border-radius: 12px;
30 | border: 0;
31 | background-image: linear-gradient(to bottom, #1253a4 0, #1253a4 100%);
32 | }
33 |
34 | /* 題名レイアウト */
35 | .leaflet-control-layers-label {
36 | margin: 0px 0px 8px 1px;
37 | }
38 |
--------------------------------------------------------------------------------
/docs/plugin/Leaflet.Control.Opacity/src/L.Control.Opacity.js:
--------------------------------------------------------------------------------
1 | L.Control.Opacity = L.Control.extend({
2 | options: {
3 | collapsed: false,
4 | position: 'topright',
5 | label: null,
6 | },
7 | initialize: function (overlays, options) {
8 | L.Util.setOptions(this, options);
9 | this._layerControlInputs = [];
10 | this._layers = [];
11 | this._lastZIndex = 0;
12 | for (const i in overlays) {
13 | this._addLayer(overlays[i], i, true);
14 | }
15 | },
16 | onAdd: function (map) {
17 | this._initLayout();
18 | this._update();
19 | return this._container;
20 | },
21 | expand: function () {
22 | L.DomUtil.addClass(this._container, 'leaflet-control-layers-expanded');
23 | this._form.style.height = null;
24 | const acceptableHeight = this._map.getSize().y - (this._container.offsetTop + 50);
25 | if (acceptableHeight < this._form.clientHeight) {
26 | L.DomUtil.addClass(this._form, 'leaflet-control-layers-scrollbar');
27 | this._form.style.height = acceptableHeight + 'px';
28 | } else {
29 | L.DomUtil.removeClass(this._form, 'leaflet-control-layers-scrollbar');
30 | }
31 | return this;
32 | },
33 | collapse: function () {
34 | L.DomUtil.removeClass(this._container, 'leaflet-control-layers-expanded');
35 | return this;
36 | },
37 | _initLayout: function () {
38 | const className = 'leaflet-control-layers',
39 | container = (this._container = L.DomUtil.create('div', className)),
40 | collapsed = this.options.collapsed;
41 | container.setAttribute('aria-haspopup', true);
42 | L.DomEvent.disableClickPropagation(container);
43 | L.DomEvent.disableScrollPropagation(container);
44 | if (this.options.label) {
45 | const labelP = L.DomUtil.create('p', className + '-label');
46 | labelP.innerHTML = this.options.label;
47 | container.appendChild(labelP);
48 | }
49 | const form = (this._form = L.DomUtil.create('form', className + '-list'));
50 | if (collapsed) {
51 | this._map.on('click zoom move', this.collapse, this);
52 | if (!L.Browser.android) {
53 | L.DomEvent.on(
54 | container,
55 | {
56 | mouseenter: this.expand,
57 | mouseleave: this.collapse,
58 | },
59 | this
60 | );
61 | }
62 | }
63 | const link = (this._layersLink = L.DomUtil.create('a', className + '-toggle', container));
64 | link.href = '#';
65 | link.title = 'Layers';
66 | if (L.Browser.touch) {
67 | L.DomEvent.on(link, 'click', L.DomEvent.stop);
68 | L.DomEvent.on(link, 'click', this.expand, this);
69 | } else {
70 | L.DomEvent.on(link, 'focus', this.expand, this);
71 | }
72 | if (!collapsed) {
73 | this.expand();
74 | }
75 | this._baseLayersList = L.DomUtil.create('div', className + '-base', form);
76 | this._separator = L.DomUtil.create('div', className + '-separator', form);
77 | this._overlaysList = L.DomUtil.create('div', className + '-overlays', form);
78 | container.appendChild(form);
79 | },
80 | _getLayer: function (id) {
81 | for (let i = 0; i < this._layers.length; i++) {
82 | if (this._layers[i] && L.Util.stamp(this._layers[i].layer) === id) {
83 | return this._layers[i];
84 | }
85 | }
86 | },
87 | _addLayer: function (layer, name, overlay) {
88 | this._layers.push({
89 | layer: layer,
90 | name: name,
91 | overlay: overlay,
92 | });
93 | },
94 | _update: function () {
95 | if (!this._container) {
96 | return this;
97 | }
98 | L.DomUtil.empty(this._baseLayersList);
99 | L.DomUtil.empty(this._overlaysList);
100 | this._layerControlInputs = [];
101 | let baseLayersPresent,
102 | overlaysPresent,
103 | i,
104 | obj,
105 | baseLayersCount = 0;
106 | for (i = 0; i < this._layers.length; i++) {
107 | obj = this._layers[i];
108 | this._addItem(obj);
109 | overlaysPresent = overlaysPresent || obj.overlay;
110 | baseLayersPresent = baseLayersPresent || !obj.overlay;
111 | baseLayersCount += !obj.overlay ? 1 : 0;
112 | }
113 | if (this.options.hideSingleBase) {
114 | baseLayersPresent = baseLayersPresent && baseLayersCount > 1;
115 | this._baseLayersList.style.display = baseLayersPresent ? '' : 'none';
116 | }
117 | this._separator.style.display = overlaysPresent && baseLayersPresent ? '' : 'none';
118 | },
119 | // ラベル・スライダー追加
120 | _addItem: function (obj) {
121 | const label = document.createElement('label');
122 | const input = document.createElement('input');
123 | if (obj.overlay) {
124 | // スライドバー追加
125 | input.type = 'range';
126 | input.className = 'leaflet-control-layers-range';
127 | input.min = 0;
128 | input.max = 100;
129 | input.value = obj.layer.options.opacity * 100;
130 | } else {
131 | input = this._createRadioElement('leaflet-base-layers', checked);
132 | }
133 | this._layerControlInputs.push(input);
134 | input.layerId = L.Util.stamp(obj.layer);
135 | // スライドバーイベント
136 | input.addEventListener('input', (event) => {
137 | const rgValue = event.target.value;
138 | const layer = this._getLayer(input.layerId).layer;
139 | // 背景ラスタのみ対象
140 | if (typeof layer._url === 'undefined') {
141 | } else {
142 | // 透過度設定
143 | layer.setOpacity(Number(rgValue / 100));
144 | }
145 | });
146 | const name = document.createElement('span');
147 | name.innerHTML = ' ' + obj.name;
148 | const holder = document.createElement('div');
149 | const holder2 = document.createElement('div');
150 | label.appendChild(holder);
151 | holder.appendChild(name);
152 | label.appendChild(holder2);
153 | holder2.appendChild(input);
154 | const container = obj.overlay ? this._overlaysList : this._baseLayersList;
155 | container.appendChild(label);
156 | },
157 | });
158 |
159 | L.control.opacity = function (overlays, options) {
160 | return new L.Control.Opacity(overlays, options);
161 | };
162 |
--------------------------------------------------------------------------------
/img/img_01.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dayjournal/Leaflet.Control.Opacity/1554ebea3496a1aa638945cca6e4ad182ecfc7ae/img/img_01.gif
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "leaflet.control.opacity",
3 | "version": "1.5.0",
4 | "description": "Leaflet.Control.Opacity is a Leaflet plugin that makes multiple tile layers transparent. (Leaflet v1.x.x)",
5 | "main": "dist/L.Control.Opacity.js",
6 | "types": "dist/L.Control.Opacity.d.ts",
7 | "repository": {
8 | "type": "git",
9 | "url": "git+https://github.com/dayjournal/Leaflet.Control.Opacity.git"
10 | },
11 | "keywords": [
12 | "Leaflet",
13 | "Opacity",
14 | "tile",
15 | "plugin"
16 | ],
17 | "author": "Yasunori Kirimoto",
18 | "license": "MIT",
19 | "bugs": {
20 | "url": "https://github.com/dayjournal/Leaflet.Control.Opacity/issues"
21 | },
22 | "homepage": "https://github.com/dayjournal/Leaflet.Control.Opacity#readme"
23 | }
24 |
--------------------------------------------------------------------------------
/src/L.Control.Opacity.css:
--------------------------------------------------------------------------------
1 | /* レンジデザイン設定 */
2 | input[type='range'] {
3 | -webkit-appearance: none;
4 | -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
5 | width: 110px;
6 | height: 10px;
7 | margin: 0;
8 | border: none;
9 | padding: 1px 2px;
10 | border-radius: 30px;
11 | background: #f1f0ee;
12 | outline: none;
13 | }
14 | input[type='range']::-ms-track {
15 | border: inherit;
16 | color: transparent;
17 | background: transparent;
18 | }
19 | input[type='range']::-ms-fill-lower,
20 | input[type='range']::-ms-fill-upper {
21 | background: transparent;
22 | }
23 | input[type='range']::-ms-tooltip {
24 | display: none;
25 | }
26 | input[type='range']::-ms-thumb {
27 | width: 15px;
28 | height: 18px;
29 | border-radius: 12px;
30 | border: 0;
31 | background-image: linear-gradient(to bottom, #1253a4 0, #1253a4 100%);
32 | }
33 |
34 | /* 題名レイアウト */
35 | .leaflet-control-layers-label {
36 | margin: 0px 0px 8px 1px;
37 | }
38 |
--------------------------------------------------------------------------------
/src/L.Control.Opacity.js:
--------------------------------------------------------------------------------
1 | L.Control.Opacity = L.Control.extend({
2 | options: {
3 | collapsed: false,
4 | position: 'topright',
5 | label: null,
6 | },
7 | initialize: function (overlays, options) {
8 | L.Util.setOptions(this, options);
9 | this._layerControlInputs = [];
10 | this._layers = [];
11 | this._lastZIndex = 0;
12 | for (const i in overlays) {
13 | this._addLayer(overlays[i], i, true);
14 | }
15 | },
16 | onAdd: function (map) {
17 | this._initLayout();
18 | this._update();
19 | return this._container;
20 | },
21 | expand: function () {
22 | L.DomUtil.addClass(this._container, 'leaflet-control-layers-expanded');
23 | this._form.style.height = null;
24 | const acceptableHeight = this._map.getSize().y - (this._container.offsetTop + 50);
25 | if (acceptableHeight < this._form.clientHeight) {
26 | L.DomUtil.addClass(this._form, 'leaflet-control-layers-scrollbar');
27 | this._form.style.height = acceptableHeight + 'px';
28 | } else {
29 | L.DomUtil.removeClass(this._form, 'leaflet-control-layers-scrollbar');
30 | }
31 | return this;
32 | },
33 | collapse: function () {
34 | L.DomUtil.removeClass(this._container, 'leaflet-control-layers-expanded');
35 | return this;
36 | },
37 | _initLayout: function () {
38 | const className = 'leaflet-control-layers',
39 | container = (this._container = L.DomUtil.create('div', className)),
40 | collapsed = this.options.collapsed;
41 | container.setAttribute('aria-haspopup', true);
42 | L.DomEvent.disableClickPropagation(container);
43 | L.DomEvent.disableScrollPropagation(container);
44 | if (this.options.label) {
45 | const labelP = L.DomUtil.create('p', className + '-label');
46 | labelP.innerHTML = this.options.label;
47 | container.appendChild(labelP);
48 | }
49 | const form = (this._form = L.DomUtil.create('form', className + '-list'));
50 | if (collapsed) {
51 | this._map.on('click zoom move', this.collapse, this);
52 | if (!L.Browser.android) {
53 | L.DomEvent.on(
54 | container,
55 | {
56 | mouseenter: this.expand,
57 | mouseleave: this.collapse,
58 | },
59 | this
60 | );
61 | }
62 | }
63 | const link = (this._layersLink = L.DomUtil.create('a', className + '-toggle', container));
64 | link.href = '#';
65 | link.title = 'Layers';
66 | if (L.Browser.touch) {
67 | L.DomEvent.on(link, 'click', L.DomEvent.stop);
68 | L.DomEvent.on(link, 'click', this.expand, this);
69 | } else {
70 | L.DomEvent.on(link, 'focus', this.expand, this);
71 | }
72 | if (!collapsed) {
73 | this.expand();
74 | }
75 | this._baseLayersList = L.DomUtil.create('div', className + '-base', form);
76 | this._separator = L.DomUtil.create('div', className + '-separator', form);
77 | this._overlaysList = L.DomUtil.create('div', className + '-overlays', form);
78 | container.appendChild(form);
79 | },
80 | _getLayer: function (id) {
81 | for (let i = 0; i < this._layers.length; i++) {
82 | if (this._layers[i] && L.Util.stamp(this._layers[i].layer) === id) {
83 | return this._layers[i];
84 | }
85 | }
86 | },
87 | _addLayer: function (layer, name, overlay) {
88 | this._layers.push({
89 | layer: layer,
90 | name: name,
91 | overlay: overlay,
92 | });
93 | },
94 | _update: function () {
95 | if (!this._container) {
96 | return this;
97 | }
98 | L.DomUtil.empty(this._baseLayersList);
99 | L.DomUtil.empty(this._overlaysList);
100 | this._layerControlInputs = [];
101 | let baseLayersPresent,
102 | overlaysPresent,
103 | i,
104 | obj,
105 | baseLayersCount = 0;
106 | for (i = 0; i < this._layers.length; i++) {
107 | obj = this._layers[i];
108 | this._addItem(obj);
109 | overlaysPresent = overlaysPresent || obj.overlay;
110 | baseLayersPresent = baseLayersPresent || !obj.overlay;
111 | baseLayersCount += !obj.overlay ? 1 : 0;
112 | }
113 | if (this.options.hideSingleBase) {
114 | baseLayersPresent = baseLayersPresent && baseLayersCount > 1;
115 | this._baseLayersList.style.display = baseLayersPresent ? '' : 'none';
116 | }
117 | this._separator.style.display = overlaysPresent && baseLayersPresent ? '' : 'none';
118 | },
119 | // ラベル・スライダー追加
120 | _addItem: function (obj) {
121 | const label = document.createElement('label');
122 | const input = document.createElement('input');
123 | if (obj.overlay) {
124 | // スライドバー追加
125 | input.type = 'range';
126 | input.className = 'leaflet-control-layers-range';
127 | input.min = 0;
128 | input.max = 100;
129 | input.value = obj.layer.options.opacity * 100;
130 | } else {
131 | input = this._createRadioElement('leaflet-base-layers', checked);
132 | }
133 | this._layerControlInputs.push(input);
134 | input.layerId = L.Util.stamp(obj.layer);
135 | // スライドバーイベント
136 | input.addEventListener('input', (event) => {
137 | const rgValue = event.target.value;
138 | const layer = this._getLayer(input.layerId).layer;
139 | // 背景ラスタのみ対象
140 | if (typeof layer._url === 'undefined') {
141 | } else {
142 | // 透過度設定
143 | layer.setOpacity(Number(rgValue / 100));
144 | }
145 | });
146 | const name = document.createElement('span');
147 | name.innerHTML = ' ' + obj.name;
148 | const holder = document.createElement('div');
149 | const holder2 = document.createElement('div');
150 | label.appendChild(holder);
151 | holder.appendChild(name);
152 | label.appendChild(holder2);
153 | holder2.appendChild(input);
154 | const container = obj.overlay ? this._overlaysList : this._baseLayersList;
155 | container.appendChild(label);
156 | },
157 | });
158 |
159 | L.control.opacity = function (overlays, options) {
160 | return new L.Control.Opacity(overlays, options);
161 | };
162 |
--------------------------------------------------------------------------------