Leafletjs-getting-started
LeafletJS-はじめに
Leaflet.jsとは
Leaflet.jsは、シンプルでインタラクティブな軽量のWebマップを展開できるオープンソースライブラリです。
- Leaflet JavaScriptライブラリでは、タイルレイヤー、WMS、マーカー、ポップアップ、ベクターレイヤー(ポリライン、ポリゴン、円など)、イメージオーバーレイ、GeoJSONなどのレイヤーを使用できます。
- マップのドラッグ、ズーム(ダブルクリックまたはホイールスクロール)、キーボードの使用、イベント処理の使用、およびマーカーのドラッグにより、リーフレットマップを操作できます。
- Leafletは、デスクトップ上のChrome、Firefox、Safari 5 +、Opera 12 +、IE 7-11などのブラウザ、およびSafari、Android、Chrome、モバイル向けFirefoxなどのブラウザをサポートしています。
Webページにマップをロードする手順
Webページにマップをロードするには、以下の手順に従ってください-
ステップ1:HTMLページを作成する
以下に示すように、 head および body タグで基本的なHTMLページを作成します-
<!DOCTYPE html>
<html>
<head>
</head>
<body>
...........
</body>
</html>
ステップ2:リーフレットCSSスクリプトをロードする
例にリーフレットCSSスクリプトを含めます-
<head>
<link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
</head>
ステップ3:リーフレットスクリプトをロードする
スクリプトタグを使用してリーフレットAPIをロードまたはインクルードします-
<head>
<script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>
ステップ4:コンテナを作成する
マップを保持するには、コンテナ要素を作成する必要があります。 通常、この目的には<div>タグ(汎用コンテナー)が使用されます。
コンテナ要素を作成し、その寸法を定義します-
<div id = "sample" style = "width:900px; height:580px;"></div>
ステップ5:マップオプション
リーフレットには、コントロールオプション、インタラクションオプション、マップ状態オプション、アニメーションオプションなどのタイプがあります。 これらに値を設定することにより、必要に応じてマップをカスタマイズできます。
*mapOptions* オブジェクトを作成し(リテラルのように作成されます)、オプションcenterとzoomの値を設定します。
- center -このオプションの値として、マップを中央に配置する場所を指定する LatLng オブジェクトを渡す必要があります。 (緯度と経度の値を [] 括弧内に指定するだけです)
- zoom -このオプションの値として、以下に示すように、マップのズームレベルを表す整数を渡す必要があります。
var mapOptions = {
center: [17.385044, 78.486671],
zoom: 10
}
ステップ6:マップオブジェクトを作成する
リーフレットAPIの Map クラスを使用して、ページ上にマップを作成できます。 Leaflet APIの呼び出された Map をインスタンス化することにより、マップオブジェクトを作成できます。 このクラスをインスタンス化しながら、あなたは2つのパラメータを渡す必要があります-
- このオプションのパラメーターとして、DOM idまたは<div>要素のインスタンスを表すString変数を渡す必要があります。 ここで、<div>要素はマップを保持するHTMLコンテナーです。
- マップオプションを持つオプションのオブジェクトリテラル。
<div>要素のidと前の手順で作成したmapOptionsオブジェクトを渡すことにより、Mapオブジェクトを作成します。
var map = new L.map('map', mapOptions);
ステップ7:レイヤーオブジェクトの作成
*TileLayer* クラスをインスタンス化することにより、さまざまなタイプのマップ(タイルレイヤー)をロードして表示できます。 インスタンス化する際に、文字列変数の形式で、サービスプロバイダーから目的のタイルレイヤー(マップ)を要求するURLテンプレートを渡す必要があります。
以下に示すように、タイルレイヤーオブジェクトを作成します。
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
ここでは、 openstreetmap を使用しました。
ステップ8:レイヤーをマップに追加する
最後に、以下に示すように* addlayer()*メソッドを使用して、前の手順で作成したレイヤーをマップオブジェクトに追加します。
map.addLayer(layer);
例
次の例は、ズーム値10でハイデラバード市の*オープンストリートマップ*をロードする方法を示しています。
<!DOCTYPE html>
<html>
<head>
<title>Leaflet sample</title>
<link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>
<body>
<div id = "map" style = "width: 900px; height: 580px"></div>
<script>
//Creating map options
var mapOptions = {
center: [17.385044, 78.486671],
zoom: 10
}
//Creating a map object
var map = new L.map('map', mapOptions);
//Creating a Layer object
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
//Adding layer to the map
map.addLayer(layer);
</script>
</body>
</html>
それは次の出力を生成します-
リーフレットマッププロバイダー
オープンストリートマップ*と同様に、Open Topo、Thunder Forest、Hydda、ESRI、Open Weather、NASA GIBSなど、さまざまなサービスプロバイダーのレイヤーを読み込むことができます。 そのためには、 *TileLayer オブジェクトの作成中にそれぞれのURLを渡す必要があります
var layer = new L.TileLayer('URL of the required map');
次の表に、Openstreetmapによって提供されるレイヤーのURLとそれぞれのサンプルマップを示します。
Map Type | URL and Output |
---|---|
Mapnik |
[[1]] |
Black And White |
[[2]] |
DE |
[[3]] |
France |
[[4]] |
Hot |
[[5]] |
BZH |
[[6]] |