チュートリアル:マップの表示

チュートリアル1

Leaflet APIを利用する準備をしよう.
難易度:★
ミッション 説明
1 leaflet.zipをダウンロードする.
2 index.htmlを作成する.
3 main.cssを作成する.

下記サイトからleaflet.zipをダウンロードしてください.
Download – Leaflet – a JavaScript library for interactive maps

ダウンロードしたleaflet.zipを解凍してください.

本チュートリアルでは,以下のディレクトリ構成でプロジェクトを作成します.このディレクトリ構成になるように,解凍したファイルのうち,leaflet.cssleaflet.jsimages/leaflet_quest/ディレクトリに移動してください.

leaflet_quest/ディレクトリ直下にindex.htmlを作成し,下記を記述します.

css/ディレクトリにmain.cssを作成し,下記を記述します.

再度,ディレクトリ構成を確認すると,下記のようになっているはずです.

これでLeaflet APIを利用する準備が終わりました.

チュートリアル2

龍谷大学瀬田学舎([34.964168, 135.940028])周辺のマップを表示しよう.
難易度:★
ミッション 説明
1 Mapオブジェクトを生成する.
2 Map.setView()メソッドを使う.
3 TileLayerオブジェクトを生成する.
4 マップタイルはOpenStreetMapを使う.
5 TileLayer.addTo()メソッドを使う.

チュートリアル用にleaflet_quest/js/ディレクトリにtutorial.jsを作成します.龍谷大学周辺のマップを表示してみましょう.作成したtutorial.jsに下記を記述してください.

Map.setView()メソッドには,マップの中心として表示したい座標(緯度・経度)とズームレベルを引数に指定します.ここでは,龍谷大学の緯度・経度である[34.964168, 135.940028]を第1引数に指定し,ズームレベルを17として第2引数に指定しています.

つづいて,マップにタイルレイヤを追加します.ここでは,OpenStreetMapのタイルレイヤを追加します.tutorial.jsに下記を追加してください.

最後に,index.htmlからtutorial.jsを呼び出すようにします.index.htmlに下記を追加してください.

index.htmlをブラウザで表示してみてください.龍谷大学周辺のマップが表示されました.これで,最小限のマップのセットアップが完了しました.


参考

  1. Quick Start Guide – Leaflet – a JavaScript library for interactive maps