最終更新日：2019-08-29
Leaflet APIを利用する準備をしよう．
| ミッション | 説明 |
|---|---|
| 1 | leaflet.zipをダウンロードする． |
| 2 | index.htmlを作成する． |
| 3 | main.cssを作成する． |
チュートリアル
下記サイトからleaflet.zipをダウンロードしてください．
Download – Leaflet – a JavaScript library for interactive maps
ダウンロードしたleaflet.zipを解凍してください．
本チュートリアルでは，以下のディレクトリ構成でプロジェクトを作成します．このディレクトリ構成になるように，解凍したファイルのうち，leaflet.css，leaflet.js，images/をleaflet_quest/ディレクトリに移動してください．
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$ tree leaflet_quest/ leaflet_quest/ ├── css │ ├── images │ │ ├── layers-2x.png │ │ ├── layers.png │ │ ├── marker-icon-2x.png │ │ ├── marker-icon.png │ │ └── marker-shadow.png │ └── leaflet.css └── js └── leaflet.js |
leaflet_quest/ディレクトリ直下にindex.htmlを作成し，下記を記述します．
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
css/ディレクトリにmain.cssを作成し，下記を記述します．
|
1 2 3 4 5 6 7 8 9 |
html, body { height: 100%; margin: 0; } #mapid { width: 100%; height: 100%; } |
再度，ディレクトリ構成を確認すると，下記のようになっているはずです．
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$ tree leaflet_quest/ leaflet_quest/ ├── css │ ├── images │ │ ├── layers-2x.png │ │ ├── layers.png │ │ ├── marker-icon-2x.png │ │ ├── marker-icon.png │ │ └── marker-shadow.png │ ├── leaflet.css │ └── main.css ├── index.html └── js └── leaflet.js |
これでLeaflet APIを利用する準備が終わりました．
龍谷大学瀬田学舎（[34.964168, 135.940028]）周辺のマップを表示しよう．
| ミッション | 説明 |
|---|---|
| 1 | Mapオブジェクトを生成する． |
| 2 | Map.setView()メソッドを使う． |
| 3 | TileLayerオブジェクトを生成する． |
| 4 | マップタイルはOpenStreetMapを使う． |
| 5 | TileLayer.addTo()メソッドを使う． |
チュートリアル
チュートリアル用にleaflet_quest/js/ディレクトリにmain.jsを作成します．龍谷大学周辺のマップを表示してみましょう．作成したmain.jsに下記を記述してください．
|
1 |
var mymap = L.map('mapid').setView([34.964168, 135.940028], 17); |
Map.setView()メソッドには，マップの中心として表示したい座標（緯度・経度）とズームレベルを引数に指定します．ここでは，龍谷大学の緯度・経度である[34.964168, 135.940028]を第1引数に指定し，ズームレベルを17として第2引数に指定しています．
つづいて，マップにタイルレイヤを追加します．ここでは，OpenStreetMapのタイルレイヤを追加します．main.jsに下記を追加してください．
|
1 2 3 4 5 6 |
L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map data © OpenStreetMap', maxZoom: 18 } ).addTo(mymap); |
最後に，index.htmlからmain.jsを呼び出すようにします．index.htmlに下記を追加してください．
|
1 2 3 4 5 6 |
...（略）... ...（略）... |
index.htmlをブラウザで表示してみてください．龍谷大学周辺のマップが表示されました．これで，最小限のマップのセットアップが完了しました．