# Leaflet.Control.Opacity
Leaflet.Control.Opacity is a Leaflet plugin that makes multiple tile layers transparent. (Leaflet v1.x.x)
[Leaflet Plugins](https://leafletjs.com/plugins.html#tileimage-display)
[npm](https://www.npmjs.com/package/leaflet.control.opacity)
Browser Support
- Chrome
- Firefox
- Safari
## Usage
### Demo
[demo](https://dayjournal.github.io/Leaflet.Control.Opacity)
### Option
```javascript
//If true, the control will be collapsed into an icon and expanded on mouse hover or touch.
collapsed: false or true
//The position of the control (one of the map corners).
position: 'topleft' or 'topright' or 'bottomleft' or 'bottomright'
//Label display of title (e.g. "Layers Opacity")
label: string or null
```
### Example
./docs
index.html
```html
Leaflet.Control.Opacity example
```
style.css
```css
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
#map {
z-index: 0;
height: 100%;
}
```
app.js
```javascript
//MIERUNE Color
const m_color = new L.tileLayer('https://tile.mierune.co.jp/mierune/{z}/{x}/{y}.png', {
attribution:
"Maptiles by MIERUNE, under CC BY. Data by OpenStreetMap contributors, under ODbL.",
});
//MIERUNE MONO
const m_mono = new L.tileLayer('https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png', {
attribution:
"Maptiles by MIERUNE, under CC BY. Data by OpenStreetMap contributors, under ODbL.",
});
//OSM
const o_std = new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors',
});
//GSI Pale
const t_pale = new L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
attribution:
"国土地理院",
});
//GSI Ort
const t_ort = new L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
attribution:
"国土地理院",
});
//MAP
const map = L.map('map', {
center: [35.6831925, 139.7511307],
zoom: 13,
zoomControl: true,
layers: [m_mono],
});
//BaseLayer
const Map_BaseLayer = {
'MIERUNE Color': m_color,
'MIERUNE MONO': m_mono,
};
//AddLayer
const Map_AddLayer = {
'OSM': o_std,
'GSI Pale': t_pale,
'GSI Ort': t_ort,
};
//LayerControl
L.control
.layers(Map_BaseLayer, Map_AddLayer, {
collapsed: false,
})
.addTo(map);
//OpacityControl
L.control
.opacity(Map_AddLayer, {
label: 'Layers Opacity',
})
.addTo(map);
```
### Example - npm
Start Leaflet easily. [Leaflet v1.x.x, webpack]
[leaflet-starter](https://github.com/dayjournal/leaflet-starter)
Install package
```bash
npm install leaflet.control.opacity
```
main.js
```javascript
// CSS import
import "leaflet/dist/leaflet.css";
import "leaflet.control.opacity/dist/L.Control.Opacity.css";
import "./css/style.css";
// JS import
import 'leaflet.control.opacity';
import './js/app.js';
```
app.js
```javascript
//MIERUNE Color
const m_color = new L.tileLayer('https://tile.mierune.co.jp/mierune/{z}/{x}/{y}.png', {
attribution:
"Maptiles by MIERUNE, under CC BY. Data by OpenStreetMap contributors, under ODbL.",
});
//MIERUNE MONO
const m_mono = new L.tileLayer('https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png', {
attribution:
"Maptiles by MIERUNE, under CC BY. Data by OpenStreetMap contributors, under ODbL.",
});
//OSM
const o_std = new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors',
});
//GSI Pale
const t_pale = new L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
attribution:
"国土地理院",
});
//GSI Ort
const t_ort = new L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
attribution:
"国土地理院",
});
//MAP
const map = L.map('map', {
center: [35.6831925, 139.7511307],
zoom: 13,
zoomControl: true,
layers: [m_mono],
});
//BaseLayer
const Map_BaseLayer = {
'MIERUNE Color': m_color,
'MIERUNE MONO': m_mono,
};
//AddLayer
const Map_AddLayer = {
'OSM': o_std,
'GSI Pale': t_pale,
'GSI Ort': t_ort,
};
//LayerControl
L.control
.layers(Map_BaseLayer, Map_AddLayer, {
collapsed: false,
})
.addTo(map);
//OpacityControl
L.control
.opacity(Map_AddLayer, {
label: 'Layers Opacity',
})
.addTo(map);
```
## License
MIT
Copyright (c) 2018-2021 Yasunori Kirimoto
---
### Japanese
# Leaflet.Control.Opacity
Leaflet.Control.Opacityは、複数のタイルレイヤーを透過するLeafletのプラグインです。 (Leaflet v1.x.x)
[Leaflet Plugins](https://leafletjs.com/plugins.html#tileimage-display)
[npm](https://www.npmjs.com/package/leaflet.control.opacity)
対応ブラウザ
- Chrome
- Firefox
- Safari
## 使用方法
### デモ
[デモ](https://dayjournal.github.io/Leaflet.Control.Opacity)
### オプション
```javascript
//コントロールの折りたたみ設定。(デフォルト:折りたたみ無し)
collapsed: false or true
//コントロールの配置設定。(デフォルト:右上配置)
position: 'topleft' or 'topright' or 'bottomleft' or 'bottomright'
//タイトルのラベル表示（例:Layers Opacity）
label: string or null
```
### 例
./docs
index.html
```html
Leaflet.Control.Opacity example
```
style.css
```css
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
#map {
z-index: 0;
height: 100%;
}
```
app.js
```javascript
//MIERUNE Color
const m_color = new L.tileLayer('https://tile.mierune.co.jp/mierune/{z}/{x}/{y}.png', {
attribution:
"Maptiles by MIERUNE, under CC BY. Data by OpenStreetMap contributors, under ODbL.",
});
//MIERUNE MONO
const m_mono = new L.tileLayer('https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png', {
attribution:
"Maptiles by MIERUNE, under CC BY. Data by OpenStreetMap contributors, under ODbL.",
});
//OSM
const o_std = new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors',
});
//GSI Pale
const t_pale = new L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
attribution:
"国土地理院",
});
//GSI Ort
const t_ort = new L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
attribution:
"国土地理院",
});
//MAP
const map = L.map('map', {
center: [35.6831925, 139.7511307],
zoom: 13,
zoomControl: true,
layers: [m_mono],
});
//BaseLayer
const Map_BaseLayer = {
'MIERUNE Color': m_color,
'MIERUNE MONO': m_mono,
};
//AddLayer
const Map_AddLayer = {
'OSM': o_std,
'GSI Pale': t_pale,
'GSI Ort': t_ort,
};
//LayerControl
L.control
.layers(Map_BaseLayer, Map_AddLayer, {
collapsed: false,
})
.addTo(map);
//OpacityControl
L.control
.opacity(Map_AddLayer, {
label: 'Layers Opacity',
})
.addTo(map);
```
### 例 - npm
Leafletを手軽に始める [Leaflet v1.x.x, webpack]
[leaflet-starter](https://github.com/dayjournal/leaflet-starter)
パッケージインストール
```bash
npm install leaflet.control.opacity
```
main.js
```javascript
// CSS import
import "leaflet/dist/leaflet.css";
import "leaflet.control.opacity/dist/L.Control.Opacity.css";
import "./css/style.css";
// JS import
import 'leaflet.control.opacity';
import './js/app.js';
```
app.js
```javascript
//MIERUNE Color
const m_color = new L.tileLayer('https://tile.mierune.co.jp/mierune/{z}/{x}/{y}.png', {
attribution:
"Maptiles by MIERUNE, under CC BY. Data by OpenStreetMap contributors, under ODbL.",
});
//MIERUNE MONO
const m_mono = new L.tileLayer('https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png', {
attribution:
"Maptiles by MIERUNE, under CC BY. Data by OpenStreetMap contributors, under ODbL.",
});
//OSM
const o_std = new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors',
});
//GSI Pale
const t_pale = new L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
attribution:
"国土地理院",
});
//GSI Ort
const t_ort = new L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
attribution:
"国土地理院",
});
//MAP
const map = L.map('map', {
center: [35.6831925, 139.7511307],
zoom: 13,
zoomControl: true,
layers: [m_mono],
});
//BaseLayer
const Map_BaseLayer = {
'MIERUNE Color': m_color,
'MIERUNE MONO': m_mono,
};
//AddLayer
const Map_AddLayer = {
'OSM': o_std,
'GSI Pale': t_pale,
'GSI Ort': t_ort,
};
//LayerControl
L.control
.layers(Map_BaseLayer, Map_AddLayer, {
collapsed: false,
})
.addTo(map);
//OpacityControl
L.control
.opacity(Map_AddLayer, {
label: 'Layers Opacity',
})
.addTo(map);
```
## ライセンス
MIT
Copyright (c) 2018-2021 Yasunori Kirimoto