Skip to content

Commit 8aad322

Browse files
niryuuniryuu
committed
Deploy
0 parents  commit 8aad322

48 files changed

Lines changed: 3797 additions & 0 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎backwardcompatibility.html‎

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<link rel="stylesheet" href="./style.css">
7+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
8+
<title>@geolonia/embed</title>
9+
</head>
10+
11+
<body>
12+
<h1>@geolonia/embed</h1>
13+
14+
後方互換性テストのためのサンプルコードです。
15+
16+
<h2>loadImage</h2>
17+
<div>MapLibre GL JS v4.4.1 の から、loadImage の呼び出し方が以下のように変更になりました。Embed API では後方互換性を保つため、v4.4.1 以前の書き方も引き続きサポートしています。</div>
18+
<a href="https://github.com/maplibre/maplibre-gl-js/pull/3422/" target="_blank">関連する ISSUE: Remove callback from loadImage</a>
19+
<br/>
20+
<code>
21+
<pre>
22+
// v4.4.1 以降
23+
map.loadImage(url)
24+
25+
// v4.4.1 以前
26+
map.loadImage(url, callback)</pre>
27+
</code>
28+
29+
<div class="example">
30+
<h2>v4.4.1 以降</h2>
31+
<div
32+
id="my-map1"
33+
class="geolonia"
34+
data-lat="35.681236"
35+
data-lng="139.767125"
36+
data-zoom="9"
37+
data-marker="off"
38+
></div>
39+
<pre>
40+
var map1 = new geolonia.Map('my-map1');
41+
map1.on('load', async () => {
42+
image = await map1.loadImage('https://upload.wikimedia.org/wikipedia/commons/7/7c/201408_cat.png');
43+
map1.addImage('cat', image.data);
44+
map1.addSource('point', {
45+
'type': 'geojson',
46+
'data': {
47+
'type': 'FeatureCollection',
48+
'features': [
49+
{
50+
'type': 'Feature',
51+
'geometry': {
52+
'type': 'Point',
53+
'coordinates': [139.767125, 35.681236]
54+
}
55+
}
56+
]
57+
}
58+
});
59+
map1.addLayer({
60+
'id': 'points',
61+
'type': 'symbol',
62+
'source': 'point',
63+
'layout': {
64+
'icon-image': 'cat',
65+
'icon-size': 0.25
66+
}
67+
});
68+
});
69+
</pre>
70+
</div>
71+
72+
<div class="example">
73+
<h2>v4.4.1 以前</h2>
74+
<div
75+
id="my-map2"
76+
class="geolonia"
77+
data-lat="35.681236"
78+
data-lng="139.767125"
79+
data-zoom="9"
80+
data-marker="off"
81+
></div>
82+
<pre>
83+
var map2 = new geolonia.Map('my-map2');
84+
map2.on('load', () => {
85+
map2.loadImage(
86+
'https://upload.wikimedia.org/wikipedia/commons/7/7c/201408_cat.png',
87+
(error, image) => {
88+
if (error) throw error;
89+
map2.addImage('cat', image);
90+
}
91+
);
92+
map2.addSource('point', {
93+
'type': 'geojson',
94+
'data': {
95+
'type': 'FeatureCollection',
96+
'features': [
97+
{
98+
'type': 'Feature',
99+
'geometry': {
100+
'type': 'Point',
101+
'coordinates': [139.767125, 35.681236]
102+
}
103+
}
104+
]
105+
}
106+
});
107+
map2.addLayer({
108+
'id': 'points',
109+
'type': 'symbol',
110+
'source': 'point',
111+
'layout': {
112+
'icon-image': 'cat',
113+
'icon-size': 0.25
114+
}
115+
});
116+
});
117+
</pre>
118+
</div>
119+
120+
<footer>
121+
&copy; <a href="https://geolonia.com">geolonia.com</a>
122+
</footer>
123+
124+
<script>
125+
var examples = document.querySelectorAll('.example');
126+
for (var i = 0; i < examples.length; i++) {
127+
var example = examples[i];
128+
var html = example.querySelector('.geolonia, #my-map').outerHTML;
129+
var pre = document.createElement('pre');
130+
pre.innerText = html.replace(/(<div.+?)(>)/g, "$1\n$2").replace(/ ([^ ]+=[^ ]+)/g, "\n $1");
131+
example.insertBefore(pre, example.querySelector('.geolonia'));
132+
}
133+
</script>
134+
135+
<a class="forkme" href="https://github.com/geolonia/embed"><img width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1"></a>
136+
137+
<script src="./embed?geolonia-api-key=YOUR-API-KEY"></script>
138+
<script>
139+
var map1 = new geolonia.Map('my-map1');
140+
map1.on('load', async () => {
141+
image = await map1.loadImage('https://upload.wikimedia.org/wikipedia/commons/7/7c/201408_cat.png');
142+
map1.addImage('cat', image.data);
143+
map1.addSource('point', {
144+
'type': 'geojson',
145+
'data': {
146+
'type': 'FeatureCollection',
147+
'features': [
148+
{
149+
'type': 'Feature',
150+
'geometry': {
151+
'type': 'Point',
152+
'coordinates': [139.767125, 35.681236]
153+
}
154+
}
155+
]
156+
}
157+
});
158+
map1.addLayer({
159+
'id': 'points',
160+
'type': 'symbol',
161+
'source': 'point',
162+
'layout': {
163+
'icon-image': 'cat',
164+
'icon-size': 0.25
165+
}
166+
});
167+
});
168+
169+
var map2 = new geolonia.Map('my-map2');
170+
map2.on('load', () => {
171+
map2.loadImage(
172+
'https://upload.wikimedia.org/wikipedia/commons/7/7c/201408_cat.png',
173+
(error, image) => {
174+
if (error) throw error;
175+
map2.addImage('cat', image);
176+
}
177+
);
178+
map2.addSource('point', {
179+
'type': 'geojson',
180+
'data': {
181+
'type': 'FeatureCollection',
182+
'features': [
183+
{
184+
'type': 'Feature',
185+
'geometry': {
186+
'type': 'Point',
187+
'coordinates': [139.767125, 35.681236]
188+
}
189+
}
190+
]
191+
}
192+
});
193+
map2.addLayer({
194+
'id': 'points',
195+
'type': 'symbol',
196+
'source': 'point',
197+
'layout': {
198+
'icon-image': 'cat',
199+
'icon-size': 0.25
200+
}
201+
});
202+
});
203+
</script>
204+
</body>
205+
206+
</html>

‎controls.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<link rel="stylesheet" href="./style.css">
7+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
8+
<title>@geolonia/embed</title>
9+
</head>
10+
11+
<body>
12+
<h1>@geolonia/embed | control options</h1>
13+
14+
Examples for Embed API for Geolonia.
15+
16+
<div class="example">
17+
<h2>Default control positions</h2>
18+
<div
19+
style="height: 300px"
20+
class="geolonia"
21+
data-navigation-control="on"
22+
data-geolocate-control="on"
23+
data-fullscreen-control="on"
24+
data-scale-control="on"
25+
></div>
26+
</div>
27+
28+
<div class="example">
29+
<h2>Customized control positions</h2>
30+
<div
31+
style="height: 300px"
32+
class="geolonia"
33+
data-navigation-control="bottom-left"
34+
data-geolocate-control="top-left"
35+
data-fullscreen-control="bottom-left"
36+
data-scale-control="bottom-right"
37+
data-geolonia-control="top-right"
38+
></div>
39+
</div>
40+
41+
<a class="forkme" href="https://github.com/geolonia/embed"><img width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1"></a>
42+
<script>
43+
var examples = document.querySelectorAll('.example');
44+
for (var i = 0; i < examples.length; i++) {
45+
var example = examples[i];
46+
var html = example.querySelector('.geolonia, #my-map').outerHTML;
47+
var pre = document.createElement('pre');
48+
pre.innerText = html.replace(/(<div.+?)(>)/g, "$1\n$2").replace(/ ([^ ]+=[^ ]+)/g, "\n $1");
49+
example.insertBefore(pre, example.querySelector('.geolonia'));
50+
}
51+
</script>
52+
<script src="./embed?geolonia-api-key=YOUR-API-KEY"></script>
53+
</body>
54+
55+
</html>

‎ctr-style.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<link rel="stylesheet" href="./style.css">
7+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
8+
<title>@geolonia/embed</title>
9+
</head>
10+
11+
<body class="with-user-css">
12+
<h1>@geolonia/embed | Demo with user css</h1>
13+
14+
Examples for Embed API for Geolonia with user css.
15+
16+
<div class="example">
17+
<h2>Default Map</h2>
18+
<div class="geolonia" data-lat="34.704395" data-lng="135.494771" data-zoom="14">グランフロント</div>
19+
</div>
20+
21+
<div class="example">
22+
<h2>Map with User CSS</h2>
23+
<div id="mock_user_css">
24+
<div class="geolonia" data-lat="34.704395" data-lng="135.494771" data-zoom="14">グランフロント</div>
25+
</div>
26+
</div>
27+
28+
<div class="example mobile-width">
29+
<h2>Map with mobile width</h2>
30+
<div class="geolonia" data-lat="34.704395" data-lng="135.494771" data-zoom="14">グランフロント</div>
31+
</div>
32+
33+
<div class="example mobile-width">
34+
<h2>Map with mobile width and User CSS</h2>
35+
<div id="mock_user_css">
36+
<div class="geolonia" data-lat="34.704395" data-lng="135.494771" data-zoom="14">グランフロント</div>
37+
</div>
38+
</div>
39+
40+
41+
<footer>
42+
&copy; <a href="https://geolonia.com">geolonia.com</a>
43+
</footer>
44+
45+
<a class="forkme" href="https://github.com/geolonia/embed"><img width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1"></a>
46+
47+
<script src="./embed?geolonia-api-key=YOUR-API-KEY"></script>
48+
</body>
49+
50+
</html>

0 commit comments

Comments
 (0)