Skip to content

Commit 46b1510

Browse files
dayjournaldayjournal
authored
Merge pull request #8 from tom-konda/private_field_method
Prefer to use JavaScript native private field and method
2 parents 9b2d0e2 + a393a34 commit 46b1510

File tree

2 files changed

+52
-46
lines changed

2 files changed

+52
-46
lines changed

‎dist/maplibre-gl-opacity.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/maplibre-gl-opacity.js

+51-45
Original file line numberDiff line numberDiff line change
@@ -6,138 +6,144 @@ const defaultOptions = {
66
};
77

88
class OpacityControl {
9+
#map;
10+
#container;
11+
#baseLayersOption;
12+
#overLayersOption;
13+
#opacityControlOption;
14+
915
constructor(options) {
1016
// オプション設定
11-
this._baseLayersOption = options.baseLayers || defaultOptions.baseLayers;
12-
this._overLayersOption = options.overLayers || defaultOptions.overLayers;
13-
this._opacityControlOption = options.opacityControl || defaultOptions.opacityControl;
17+
this.#baseLayersOption = options.baseLayers || defaultOptions.baseLayers;
18+
this.#overLayersOption = options.overLayers || defaultOptions.overLayers;
19+
this.#opacityControlOption = options.opacityControl || defaultOptions.opacityControl;
1420
}
1521

1622
// ラジオボタン作成
17-
_radioButtonControlAdd(layerId) {
23+
#radioButtonControlAdd(layerId) {
1824
// 初期レイヤ定義
19-
const initLayer = Object.keys(this._baseLayersOption)[0];
25+
const initLayer = Object.keys(this.#baseLayersOption)[0];
2026
// ラジオボタン追加
2127
const radioButton = document.createElement('input');
2228
radioButton.setAttribute('type', 'radio');
2329
radioButton.id = layerId;
2430
// 初期レイヤのみ表示
2531
if (layerId === initLayer) {
2632
radioButton.checked = true;
27-
this._map.setLayoutProperty(layerId, 'visibility', 'visible');
33+
this.#map.setLayoutProperty(layerId, 'visibility', 'visible');
2834
} else {
29-
this._map.setLayoutProperty(layerId, 'visibility', 'none');
35+
this.#map.setLayoutProperty(layerId, 'visibility', 'none');
3036
}
31-
this._container.appendChild(radioButton);
37+
this.#container.appendChild(radioButton);
3238
// ラジオボタンイベント
3339
radioButton.addEventListener('change', (event) => {
3440
// 選択レイヤ表示
3541
event.target.checked = true;
36-
this._map.setLayoutProperty(layerId, 'visibility', 'visible');
42+
this.#map.setLayoutProperty(layerId, 'visibility', 'visible');
3743
// 選択レイヤ以外非表示
38-
Object.keys(this._baseLayersOption).map((layer) => {
44+
Object.keys(this.#baseLayersOption).map((layer) => {
3945
if (layer !== event.target.id) {
4046
document.getElementById(layer).checked = false;
41-
this._map.setLayoutProperty(layer, 'visibility', 'none');
47+
this.#map.setLayoutProperty(layer, 'visibility', 'none');
4248
}
4349
});
4450
});
4551
// レイヤ名追加
4652
const layerName = document.createElement('label');
4753
layerName.htmlFor = layerId;
48-
layerName.appendChild(document.createTextNode(this._baseLayersOption[layerId]));
49-
this._container.appendChild(layerName);
54+
layerName.appendChild(document.createTextNode(this.#baseLayersOption[layerId]));
55+
this.#container.appendChild(layerName);
5056
}
5157

5258
// チェックボックス作成
53-
_checkBoxControlAdd(layerId) {
59+
#checkBoxControlAdd(layerId) {
5460
// チェックボックス追加
5561
const checkBox = document.createElement('input');
5662
checkBox.setAttribute('type', 'checkbox');
5763
checkBox.id = layerId;
5864
// 全レイヤ非表示
59-
this._map.setLayoutProperty(layerId, 'visibility', 'none');
60-
this._container.appendChild(checkBox);
65+
this.#map.setLayoutProperty(layerId, 'visibility', 'none');
66+
this.#container.appendChild(checkBox);
6167
// チェックボックスイベント
6268
checkBox.addEventListener('change', (event) => {
6369
// レイヤの表示・非表示
6470
if (event.target.checked) {
65-
this._map.setLayoutProperty(layerId, 'visibility', 'visible');
71+
this.#map.setLayoutProperty(layerId, 'visibility', 'visible');
6672
} else {
67-
this._map.setLayoutProperty(layerId, 'visibility', 'none');
73+
this.#map.setLayoutProperty(layerId, 'visibility', 'none');
6874
}
6975
});
7076
// レイヤ名追加
7177
const layerName = document.createElement('label');
7278
layerName.htmlFor = layerId;
73-
layerName.appendChild(document.createTextNode(this._overLayersOption[layerId]));
74-
this._container.appendChild(layerName);
79+
layerName.appendChild(document.createTextNode(this.#overLayersOption[layerId]));
80+
this.#container.appendChild(layerName);
7581
}
7682

7783
// スライドバー作成
78-
_rangeControlAdd(layerId) {
84+
#rangeControlAdd(layerId) {
7985
// スライドバー追加
8086
const range = document.createElement('input');
8187
range.type = 'range';
8288
range.min = 0;
8389
range.max = 100;
8490
range.value = 100;
85-
this._container.appendChild(range);
91+
this.#container.appendChild(range);
8692
// スライドバースイベント
8793
range.addEventListener('input', (event) => {
8894
// 透過度設定
89-
this._map.setPaintProperty(layerId, 'raster-opacity', Number(event.target.value / 100));
95+
this.#map.setPaintProperty(layerId, 'raster-opacity', Number(event.target.value / 100));
9096
});
9197
}
9298

9399
// コントロール作成
94-
_opacityControlAdd() {
100+
#opacityControlAdd() {
95101
// コントロール設定
96-
this._container = document.createElement('div');
97-
this._container.className = 'maplibregl-ctrl maplibregl-ctrl-group';
98-
this._container.id = 'opacity-control';
102+
this.#container = document.createElement('div');
103+
this.#container.className = 'maplibregl-ctrl maplibregl-ctrl-group';
104+
this.#container.id = 'opacity-control';
99105
// 背景レイヤ設定
100-
if (this._baseLayersOption) {
101-
Object.keys(this._baseLayersOption).map((layer) => {
106+
if (this.#baseLayersOption) {
107+
Object.keys(this.#baseLayersOption).map((layer) => {
102108
const layerId = layer;
103109
const br = document.createElement('br');
104110
// ラジオボタン作成
105-
this._radioButtonControlAdd(layerId);
106-
this._container.appendChild(br);
111+
this.#radioButtonControlAdd(layerId);
112+
this.#container.appendChild(br);
107113
});
108114
}
109115
// 区切り線
110-
if (this._baseLayersOption && this._overLayersOption) {
116+
if (this.#baseLayersOption && this.#overLayersOption) {
111117
const hr = document.createElement('hr');
112-
this._container.appendChild(hr);
118+
this.#container.appendChild(hr);
113119
}
114120
// オーバーレイヤ設定
115-
if (this._overLayersOption) {
116-
Object.keys(this._overLayersOption).map((layer) => {
121+
if (this.#overLayersOption) {
122+
Object.keys(this.#overLayersOption).map((layer) => {
117123
const layerId = layer;
118124
const br = document.createElement('br');
119125
// チェックボックス作成
120-
this._checkBoxControlAdd(layerId);
121-
this._container.appendChild(br);
126+
this.#checkBoxControlAdd(layerId);
127+
this.#container.appendChild(br);
122128
// スライドバー作成
123-
if (this._opacityControlOption) {
124-
this._rangeControlAdd(layerId);
125-
this._container.appendChild(br);
129+
if (this.#opacityControlOption) {
130+
this.#rangeControlAdd(layerId);
131+
this.#container.appendChild(br);
126132
}
127133
});
128134
}
129135
}
130136

131137
onAdd(map) {
132-
this._map = map;
138+
this.#map = map;
133139
// コントロール作成
134-
this._opacityControlAdd();
135-
return this._container;
140+
this.#opacityControlAdd();
141+
return this.#container;
136142
}
137143

138144
onRemove() {
139-
this._container.parentNode.removeChild(this._container);
140-
this._map = null;
145+
this.#container.parentNode.removeChild(this.#container);
146+
this.#map = null;
141147
}
142148
}
143149

0 commit comments

Comments
 (0)