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 Street Map

リーフレットマッププロバイダー

オープンストリートマップ*と同様に、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]] DE
France	[[4]] フランス
Hot	[[5]] ホット
BZH	[[6]] BZH

Leafletjs-getting-started