Skip to content

Commit 20fc01b

Browse files
dayjournaldayjournal
committed
🎉 InitialCommit
- 🎉 InitialCommit
1 parent 030231c commit 20fc01b

14 files changed

+814
-0
lines changed

‎.gitignore

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
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

‎README.md

+335
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,335 @@
1+
# Leaflet.Control.Opacity
2+
3+
Leaflet.Control.Opacity is a Leaflet plugin that makes multiple tile layers transparent. (Leaflet v1.x.x)
4+
5+
<br>
6+
7+
Browser Support
8+
- Chrome
9+
- Firefox
10+
- Safari
11+
- IE 11
12+
13+
<br>
14+
15+
## Usage
16+
17+
![Leaflet.Control.Opacity](./img/img_01.gif)
18+
19+
<br>
20+
21+
### Demo
22+
23+
[demo](https://dayjournal.github.io/Leaflet.Control.Opacity)
24+
25+
<br>
26+
27+
### Option
28+
29+
```javascript
30+
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+
```
38+
39+
<br>
40+
41+
### Example
42+
43+
./docs
44+
45+
index.html
46+
```html
47+
48+
<!DOCTYPE html>
49+
<html lang="ja">
50+
51+
<head>
52+
<meta charset="UTF-8">
53+
<title>Leaflet.Control.Opacity example</title>
54+
55+
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
56+
<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet"/>
57+
58+
<script src="./plugin/Leaflet.Control.Opacity/dist/L.Control.Opacity.js"></script>
59+
<link href="./plugin/Leaflet.Control.Opacity/dist/L.Control.Opacity.css" rel="stylesheet" />
60+
61+
<link href="./css/stylesheet.css" rel="stylesheet" />
62+
63+
</head>
64+
<body>
65+
66+
<div id="map"></div>
67+
<script src="./js/script.js"></script>
68+
69+
</body>
70+
</html>
71+
72+
```
73+
74+
stylesheet.css
75+
```css
76+
77+
html, body {
78+
height: 100%;
79+
padding: 0;
80+
margin: 0;
81+
}
82+
83+
#map {
84+
z-index: 0;
85+
height: 100%;
86+
}
87+
88+
```
89+
90+
script.js
91+
```javascript
92+
93+
94+
//MIERUNE Color
95+
var m_color = new L.tileLayer("https://tile.mierune.co.jp/mierune/{z}/{x}/{y}.png", {
96+
attribution: "Maptiles by <a href='http://mierune.co.jp/' target='_blank'>MIERUNE</a>, under CC BY. Data by <a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors, under ODbL."
97+
});
98+
99+
//MIERUNE MONO
100+
var m_mono = new L.tileLayer("https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png", {
101+
attribution: "Maptiles by <a href='http://mierune.co.jp/' target='_blank'>MIERUNE</a>, under CC BY. Data by <a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors, under ODbL."
102+
});
103+
104+
//OSM
105+
var o_std = new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
106+
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
107+
});
108+
109+
//GSI Pale
110+
var t_pale = new L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
111+
attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>",
112+
});
113+
114+
//GSI Ort
115+
var t_ort = new L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
116+
attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>",
117+
});
118+
119+
//MAP
120+
var map = L.map('map', {
121+
center: [35.6831925, 139.7511307],
122+
zoom: 13,
123+
zoomControl: true,
124+
layers: [m_mono]
125+
});
126+
127+
//BaseLayer
128+
var Map_BaseLayer = {
129+
"MIERUNE Color": m_color,
130+
"MIERUNE MONO": m_mono
131+
};
132+
133+
//AddLayer
134+
var Map_AddLayer = {
135+
"OSM": o_std,
136+
"GSI Pale": t_pale,
137+
"GSI Ort": t_ort
138+
};
139+
140+
//LayerControl
141+
L.control.layers(
142+
Map_BaseLayer,
143+
Map_AddLayer,
144+
{
145+
collapsed: false
146+
}
147+
).addTo(map);
148+
149+
//OpacityControl
150+
L.control.opacity(
151+
Map_AddLayer
152+
).addTo(map);
153+
154+
```
155+
156+
<br/>
157+
158+
## License
159+
MIT
160+
161+
Copyright (c) 2018 Yasunori Kirimoto
162+
163+
<br/>
164+
165+
---
166+
167+
<br/>
168+
169+
### Japanese
170+
171+
<br/>
172+
173+
# Leaflet.Control.Opacity
174+
175+
Leaflet.Control.Opacityは、複数のタイルレイヤーを透過するLeafletのプラグインです。 (Leaflet v1.x.x)
176+
177+
<br>
178+
179+
対応ブラウザ
180+
- Chrome
181+
- Firefox
182+
- Safari
183+
- IE 11
184+
185+
<br>
186+
187+
## 使用方法
188+
189+
![Leaflet.Control.Opacity](./img/img_01.gif)
190+
191+
<br>
192+
193+
### デモ
194+
195+
[デモ](https://dayjournal.github.io/Leaflet.Control.Opacity)
196+
197+
<br>
198+
199+
### オプション
200+
201+
```javascript
202+
203+
//コントロールの折りたたみ設定。(デフォルト:折りたたみ無し)
204+
collapsed: false or true
205+
206+
//コントロールの配置設定。(デフォルト:右上配置)
207+
position: 'topleft' or 'topright' or 'bottomleft' or 'bottomright'
208+
209+
```
210+
211+
<br>
212+
213+
### 例
214+
215+
./docs
216+
217+
index.html
218+
```html
219+
220+
<!DOCTYPE html>
221+
<html lang="ja">
222+
223+
<head>
224+
<meta charset="UTF-8">
225+
<title>Leaflet.Control.Opacity example</title>
226+
227+
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
228+
<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet"/>
229+
230+
<script src="./plugin/Leaflet.Control.Opacity/dist/L.Control.Opacity.js"></script>
231+
<link href="./plugin/Leaflet.Control.Opacity/dist/L.Control.Opacity.css" rel="stylesheet" />
232+
233+
<link href="./css/stylesheet.css" rel="stylesheet" />
234+
235+
</head>
236+
<body>
237+
238+
<div id="map"></div>
239+
<script src="./js/script.js"></script>
240+
241+
</body>
242+
</html>
243+
244+
```
245+
246+
stylesheet.css
247+
```css
248+
249+
html, body {
250+
height: 100%;
251+
padding: 0;
252+
margin: 0;
253+
}
254+
255+
#map {
256+
z-index: 0;
257+
height: 100%;
258+
}
259+
260+
```
261+
262+
script.js
263+
```javascript
264+
265+
266+
//MIERUNE Color
267+
var m_color = new L.tileLayer("https://tile.mierune.co.jp/mierune/{z}/{x}/{y}.png", {
268+
attribution: "Maptiles by <a href='http://mierune.co.jp/' target='_blank'>MIERUNE</a>, under CC BY. Data by <a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors, under ODbL."
269+
});
270+
271+
//MIERUNE MONO
272+
var m_mono = new L.tileLayer("https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png", {
273+
attribution: "Maptiles by <a href='http://mierune.co.jp/' target='_blank'>MIERUNE</a>, under CC BY. Data by <a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors, under ODbL."
274+
});
275+
276+
//OSM
277+
var o_std = new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
278+
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
279+
});
280+
281+
//GSI Pale
282+
var t_pale = new L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
283+
attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>",
284+
});
285+
286+
//GSI Ort
287+
var t_ort = new L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
288+
attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>",
289+
});
290+
291+
//MAP
292+
var map = L.map('map', {
293+
center: [35.6831925, 139.7511307],
294+
zoom: 13,
295+
zoomControl: true,
296+
layers: [m_mono]
297+
});
298+
299+
//BaseLayer
300+
var Map_BaseLayer = {
301+
"MIERUNE Color": m_color,
302+
"MIERUNE MONO": m_mono
303+
};
304+
305+
//AddLayer
306+
var Map_AddLayer = {
307+
"OSM": o_std,
308+
"GSI Pale": t_pale,
309+
"GSI Ort": t_ort
310+
};
311+
312+
//LayerControl
313+
L.control.layers(
314+
Map_BaseLayer,
315+
Map_AddLayer,
316+
{
317+
collapsed: false
318+
}
319+
).addTo(map);
320+
321+
//OpacityControl
322+
L.control.opacity(
323+
Map_AddLayer
324+
).addTo(map);
325+
326+
```
327+
328+
<br/>
329+
330+
## ライセンス
331+
MIT
332+
333+
Copyright (c) 2018 Yasunori Kirimoto
334+
335+
<br/>

‎dist/L.Control.Opacity.css

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

‎dist/L.Control.Opacity.js

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

‎docs/css/stylesheet.css

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
html, body {
2+
height: 100%;
3+
padding: 0;
4+
margin: 0;
5+
}
6+
7+
#map {
8+
z-index: 0;
9+
height: 100%;
10+
}

‎docs/index.html

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Leaflet.Control.Opacity example</title>
7+
8+
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
9+
<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet"/>
10+
11+
<script src="./plugin/Leaflet.Control.Opacity/dist/L.Control.Opacity.js"></script>
12+
<link href="./plugin/Leaflet.Control.Opacity/dist/L.Control.Opacity.css" rel="stylesheet"/>
13+
14+
<link href="./css/stylesheet.css" rel="stylesheet"/>
15+
16+
</head>
17+
<body>
18+
19+
<div id="map"></div>
20+
<script src="./js/script.js"></script>
21+
22+
</body>
23+
</html>

0 commit comments

Comments
 (0)