Skip to content

Commit 448c5df

Browse files
amilkhclaude
amilkh
and
claude
committed
Add matched EN/JA READMEs refreshed from codebase
README.md regenerated from actual repo content; README.ja.md is a full Japanese translation kept section-by-section in sync with the English. Generated via Qwen3:32b + Gemini 3.1 Pro Preview. Pipeline: https://github.com/code4fukui/meta-ops Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 9f80daa commit 448c5df

17 files changed

Lines changed: 211 additions & 28 deletions

‎README.ja.md‎

Lines changed: 111 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,118 @@
11
# egmapjs
2-
leafletjs x 地理院地図(GSIMAP)
32

4-
## サンプル
5-
京都いしぶみマップ
6-
https://code4fukui.github.io/kyotoishibumi/
7-
JavaScriptプログラム
8-
https://github.com/code4fukui/kyotoishibumi/blob/main/index.html
3+
[国土地理院 (GSI)](https://maps.gsi.go.jp/development/ichiran.html) の地図タイルと [Leaflet.js](https://leafletjs.com/) を使用して、インタラクティブな地図を簡単に作成できる軽量なJavaScriptライブラリです。
94

10-
## 旧チュートリアル
11-
https://code4fukui.github.io/egmapjs/tutorial.html
5+
![egmapjs demo screenshot](https://code4fukui.github.io/egmapjs/egmap.jpg)
126

13-
<img src=https://code4fukui.github.io/egmapjs/egmap.jpg>
7+
## 特徴
148

15-
## ブログ
16-
簡単で無料で活用できる地図API、leafletjs x 地理院地図
17-
https://fukuno.jig.jp/2393
9+
- **シンプルで軽量**: わずか数行のコードで、インタラクティブな地図をすばやく埋め込むことができます。
10+
- **地理院地図**: 国土地理院が提供する、美しく詳細な地図タイルを利用しています。
11+
- **簡単なマーカー追加**: 1つのヘルパー関数で、カスタムアイコンやポップアップマーカーを追加できます。
12+
- **オープンデータ対応**: SPARQLエンドポイントからデータを取得して表示するためのヘルパー（`sparql.js`）が含まれています。
13+
- **モダンなJavaScript**: ESモジュール（`egmap.mjs`）としても利用可能です。
14+
15+
## クイックスタート
16+
17+
### 1. HTMLへの追加
18+
19+
まず、地図を表示するための `<div>` を作成します。次に、Leaflet と egmapjs の CSS および JavaScript ファイルを読み込みます。
20+
21+
```html
22+
<!-- 1. 地図コンテナを作成 -->
23+
<div id="mapid" style="height: 400px;"></div>
24+
25+
<!-- 2. Leaflet.js を読み込む -->
26+
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"/>
27+
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
28+
29+
<!-- 3. egmapjs を読み込む -->
30+
<script src="https://code4fukui.github.io/egmapjs/egmap.js"></script>
31+
```
32+
33+
### 2. 地図の初期化
34+
35+
JavaScriptを使用して地図を初期化し、表示位置を設定してマーカーを追加します。
36+
37+
```javascript
38+
// 'mapid' の div に地図を初期化
39+
const map = initMap('mapid');
40+
41+
// ズームレベルを16に設定し、鯖江駅を表示
42+
map.setZoom(16);
43+
map.panTo([35.943560, 136.188917]);
44+
45+
// 「Hana道場」のカスタムアイコンを追加
46+
map.addIcon(
47+
35.944571, // 緯度
48+
136.186228, // 経度
49+
"Hana道場", // ポップアップテキスト
50+
"icon/hanadojo.png", // アイコン画像のURL（任意）
51+
64 // アイコンの幅（任意）
52+
);
53+
```
54+
55+
## 高度な使い方
56+
57+
### SPARQLによるオープンデータの表示
58+
59+
同梱されている `sparql.js` ヘルパーを使用すると、オープンデータを地図上に簡単にプロットできます。
60+
61+
1. HTMLにスクリプトを読み込みます:
62+
```html
63+
<script src="https://code4fukui.github.io/egmapjs/sparql.js"></script>
64+
```
65+
66+
2. SPARQLクエリを記述し、`querySPARQL` を使用して結果を地図に追加します:
67+
```javascript
68+
// 公共WiFiスポットを検索するSPARQLクエリ
69+
const query = `
70+
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
71+
PREFIX geo: <http://www.w3.org/2003/01/geo/wgs84_pos#>
72+
SELECT ?name ?lat ?lng WHERE {
73+
?uri a <http://purl.org/jrrk#PublicWIFI>;
74+
rdfs:label ?name;
75+
geo:lat ?lat;
76+
geo:long ?lng.
77+
} LIMIT 100`;
78+
79+
querySPARQL(query, (data) => {
80+
const items = data.results.bindings;
81+
for (const item of items) {
82+
map.addIcon(item.lat.value, item.lng.value, item.name.value);
83+
}
84+
});
85+
```
86+
87+
### ESモジュールの使用
88+
89+
モダンなWeb開発向けに、ESモジュール版も利用可能です。
90+
91+
```javascript
92+
import { initMap, L } from "https://code4fukui.github.io/egmapjs/egmap.mjs";
93+
94+
const map = initMap('mapid');
95+
map.setView([35.94, 136.18], 15);
96+
map.addIcon(35.944, 136.186, "Hana道場");
97+
```
98+
99+
## デモとチュートリアル
100+
101+
egmapjsで実現できることを確認できる、充実したチュートリアルとライブデモを用意しています。
102+
103+
- **[すべてのチュートリアルを見る](https://code4fukui.github.io/egmapjs/tutorial.html)**: 基本的な地図、SPARQL、GPS、経路探索などを網羅しています。
104+
- **ライブデモ**:
105+
- [京都いしぶみマップ](https://code4fukui.github.io/kyotoishibumi/) ([ソースコード](https://github.com/code4fukui/kyotoishibumi/blob/main/index.html))
106+
- [舞鶴高専訪問マップ](https://code4fukui.github.io/egmapjs/samples/maizurukosen.html)
107+
108+
## データソースとクレジット
109+
110+
このライブラリは **[国土地理院 (GSI)](https://maps.gsi.go.jp/development/ichiran.html)** の地図タイルを使用しています。利用の際は適切なクレジット表記（出典の明記）を維持してください。
111+
112+
## 関連リソース
113+
114+
- [ブログ記事: 簡単で無料で活用できる地図API、leafletjs x 地理院地図](https://fukuno.jig.jp/2393)
18115

19116
## ライセンス
20-
本プロジェクトはCC BYライセンスで公開されています。
117+
118+
このプロジェクトは [Creative Commons Attribution 4.0 International License (CC BY 4.0)](https://creativecommons.org/licenses/by/4.0/) のもとでライセンスされています。

‎README.md‎

Lines changed: 100 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,36 +2,121 @@
22

33
> 日本語のREADMEはこちらです: [README.ja.md](README.ja.md)
44
5-
Leafletjs x Geospatial Information Authority of Japan (GSIMAP)
5+
A lightweight JavaScript library for easily creating interactive maps using [Leaflet.js](https://leafletjs.com/) and map tiles from the [Geospatial Information Authority of Japan (GSI)](https://maps.gsi.go.jp/development/ichiran.html).
6+
7+
8+
![egmapjs demo screenshot](https://code4fukui.github.io/egmapjs/egmap.jpg)
9+
610

711
## Features
8-
- Display maps using Leafletjs and GSIMAP
9-
- Add icons and markers to the map
10-
- Integrate with SPARQL API to display data on the map
1112

12-
## Requirements
13-
None. Works in modern web browsers.
13+
- **Simple & Lightweight**: Quickly embed interactive maps with just a few lines of code.
14+
- **GSI Maps**: Utilizes beautiful and detailed map tiles from the Geospatial Information Authority of Japan.
15+
- **Easy Markers**: Add custom icons and pop-up markers with a single helper function.
16+
- **Open Data Ready**: Includes a helper (`sparql.js`) to fetch and display data from SPARQL endpoints.
17+
- **Modern JavaScript**: Also available as an ES Module (`egmap.mjs`).
18+
19+
## Quick Start
1420

15-
## Usage
16-
Include the required JavaScript and CSS files in your HTML:
21+
### 1. Add to your HTML
22+
23+
First, create a `<div>` for your map. Then, include the CSS and JavaScript files for Leaflet and egmapjs.
1724

1825
```html
26+
<!-- 1. Create a map container -->
27+
<div id="mapid" style="height: 400px;"></div>
28+
29+
<!-- 2. Include Leaflet.js -->
1930
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"/>
2031
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
32+
33+
<!-- 3. Include egmapjs -->
2134
<script src="https://code4fukui.github.io/egmapjs/egmap.js"></script>
2235
```
2336

24-
Then, create a map in your JavaScript code:
37+
### 2. Initialize the Map
38+
39+
Use JavaScript to initialize the map, set its view, and add markers.
2540

2641
```javascript
27-
var map = initMap('mapid');
42+
// Initialize the map in the 'mapid' div
43+
const map = initMap('mapid');
44+
45+
// Set the view to Sabae Station with a zoom level of 16
2846
map.setZoom(16);
29-
map.panTo([35.943560, 136.188917]); // Sabae Station
30-
map.addIcon(35.944571, 136.186228, "Hana Dojo", "icon/hanadojo.png", 64);
47+
map.panTo([35.943560, 136.188917]);
48+
49+
// Add a custom icon for "Hana道場"
50+
map.addIcon(
51+
35.944571, // Latitude
52+
136.186228, // Longitude
53+
"Hana道場", // Popup text
54+
"icon/hanadojo.png", // Icon image URL (optional)
55+
64 // Icon width (optional)
56+
);
3157
```
3258

33-
## Data / API
34-
The project uses the GSIMAP (国土地理院地図) tile service provided by the Geospatial Information Authority of Japan.
59+
## Advanced Usage
60+
61+
### Displaying Open Data via SPARQL
62+
63+
You can easily plot open data on the map using the included `sparql.js` helper.
64+
65+
1. Include the script in your HTML:
66+
```html
67+
<script src="https://code4fukui.github.io/egmapjs/sparql.js"></script>
68+
```
69+
70+
2. Write a SPARQL query and use `querySPARQL` to add the results to the map:
71+
```javascript
72+
// SPARQL query to find public WiFi spots
73+
const query = `
74+
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
75+
PREFIX geo: <http://www.w3.org/2003/01/geo/wgs84_pos#>
76+
SELECT ?name ?lat ?lng WHERE {
77+
?uri a <http://purl.org/jrrk#PublicWIFI>;
78+
rdfs:label ?name;
79+
geo:lat ?lat;
80+
geo:long ?lng.
81+
} LIMIT 100`;
82+
83+
querySPARQL(query, (data) => {
84+
const items = data.results.bindings;
85+
for (const item of items) {
86+
map.addIcon(item.lat.value, item.lng.value, item.name.value);
87+
}
88+
});
89+
```
90+
91+
### Using ES Modules
92+
93+
For modern web development, you can use the ES Module version.
94+
95+
```javascript
96+
import { initMap, L } from "https://code4fukui.github.io/egmapjs/egmap.mjs";
97+
98+
const map = initMap('mapid');
99+
map.setView([35.94, 136.18], 15);
100+
map.addIcon(35.944, 136.186, "Hana道場");
101+
```
102+
103+
## Demos & Tutorials
104+
105+
Explore our comprehensive tutorials and live demos to see what's possible with egmapjs.
106+
107+
- **[View All Tutorials](https://code4fukui.github.io/egmapjs/tutorial.html)**: Covers basic maps, SPARQL, GPS, routing, and more.
108+
- **Live Demos**:
109+
- [Kyoto Ishibumi Map](https://code4fukui.github.io/kyotoishibumi/) ([Source Code](https://github.com/code4fukui/kyotoishibumi/blob/main/index.html))
110+
- [Maizuru High School Visit Map](https://code4fukui.github.io/egmapjs/samples/maizurukosen.html)
111+
112+
## Data Source & Attribution
113+
114+
This library uses map tiles from the **[Geospatial Information Authority of Japan (GSI)](https://maps.gsi.go.jp/development/ichiran.html)**. Please ensure proper attribution is maintained.
115+
116+
## Related Resources
117+
118+
- [Blog Post: 簡単で無料で活用できる地図API、leafletjs x 地理院地図](https://fukuno.jig.jp/2393) (in Japanese)
35119

36120
## License
37-
The project is released under the CC BY license.
121+
122+
This project is licensed under the [Creative Commons Attribution 4.0 International License (CC BY 4.0)](https://creativecommons.org/licenses/by/4.0/).

‎icon/building.png‎

-2.55 KB
Loading

‎icon/carparking.png‎

-2.29 KB
Loading

‎icon/carparking2.png‎

-10.6 KB
Loading

‎icon/firehydrant-d.png‎

-2.93 KB
Loading

‎icon/firehydrant.png‎

-3 KB
Loading

‎icon/megane.png‎

-2.64 KB
Loading

‎icon/walking.png‎

-2.89 KB
Loading

‎samples/ar-test.png‎

-29 KB
Loading

0 commit comments

Comments
 (0)