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-マーカー

マップ上の単一の場所をマークするために、リーフレットにはマーカーが用意されています。これらのマーカーは標準のシンボルを使用し、これらのシンボルはカスタマイズできます。この章では、マーカーを追加する方法と、マーカーをカスタマイズ、アニメーション化、および削除する方法について説明します。

シンプルマーカーの追加

Leaflet JavaScriptライブラリを使用してマーカーを地図に追加するには、以下の手順に従ってください-

ステップ1 *-<div>要素（文字列またはオブジェクト）とマップオプション（オプション）を渡すことで *Map オブジェクトを作成します。

ステップ2 *-目的のタイルのURLを渡すことで *Layer オブジェクトを作成します。

ステップ3 *- *Map クラスの* addLayer（）*メソッドを使用して、レイヤーオブジェクトをマップに追加します。

ステップ4 *-以下に示すように、マークする位置を表す *latlng オブジェクトを渡すことにより、 Marker クラスをインスタンス化します。

//Creating a marker
var marker = new L.Marker([17.385044, 78.486671]);

ステップ5 *- *Marker クラスの* addTo（）*メソッドを使用して、前の手順で作成したマーカーオブジェクトをマップに追加します。

//Adding marker to the map
marker.addTo(map);

例

次のコードは、ハイデラバード（インド）という都市にマーカーを設定します。

<!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);

        //Creating a marker
         var marker = L.marker([17.385044, 78.486671]);

        //Adding marker to the map
         marker.addTo(map);
      </script>
   </body>

</html>

それは次の出力を生成します-

シンプルマーカー

ポップアップをマーカーにバインド

メッセージを表示するシンプルなポップアップをマーカーにバインドするには、以下の手順に従ってください-

ステップ1 *-<div>要素（文字列またはオブジェクト）とマップオプション（オプション）を渡すことで *Map オブジェクトを作成します。

ステップ2 *-目的のタイルのURLを渡すことで *Layer オブジェクトを作成します。

ステップ3 *- *Map クラスの* addLayer（）*メソッドを使用して、レイヤーオブジェクトをマップに追加します。

ステップ4 *-マークする位置を表す *latlng オブジェクトを渡すことにより、 Marker クラスをインスタンス化します。

ステップ5 *-以下に示すように、 bindPopup（）*を使用してポップアップをマーカーに添付します。

//Adding pop-up to the marker
marker.bindPopup('Hi Welcome to finddevguides').openPopup();

ステップ6 *-最後に、 *Marker クラスの* addTo（）メソッドを使用して、前の手順で作成した *Marker オブジェクトをマップに追加します。

例

次のコードは、都市ハイデラバード（インド）にマーカーを設定し、ポップアップを追加します。

<!DOCTYPE html>
<html>
   <head>
      <title>Binding pop-Ups to marker</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: 15
         }
         var map = new L.map('map', mapOptions);//Creating a map object

        //Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         map.addLayer(layer);        //Adding layer to the map
         var marker = L.marker([17.438139, 78.395830]);   //Creating a Marker

        //Adding popup to the marker
         marker.bindPopup('This is finddevguides').openPopup();
         marker.addTo(map);//Adding marker to the map
      </script>
   </body>

</html>

次の出力を生成します

マーカーへのポップアップ

マーカーオプション

マーカーの作成中に、latlangオブジェクトに加えて marker options 変数を渡すこともできます。この変数を使用して、アイコン、ドラッグ可能、キーボード、タイトル、alt、zInsexOffset、不透明度、riseOnHover、riseOffset、ペイン、ドラッグ可能など、マーカーのさまざまなオプションに値を設定できます。

マップオプションを使用してマップを作成するには、以下に示す手順に従う必要があります-

ステップ1 *-<div>要素（文字列またはオブジェクト）とマップオプション（オプション）を渡すことで *Map オブジェクトを作成します。

ステップ2 *-目的のタイルのURLを渡すことで *Layer オブジェクトを作成します。

ステップ3 *- *Map クラスの* addLayer（）*メソッドを使用して、レイヤーオブジェクトをマップに追加します。

ステップ4 *-markerOptionsの変数を作成し、必要なオプションに値を指定します。

*markerOptions* オブジェクトを作成し（リテラルのように作成されます）、オプション *iconUrl* および *iconSize* の値を設定します。

//Options for the marker
var markerOptions = {
   title: "MyLocation",
   clickable: true,
   draggable: true
}

ステップ5 *-マークする位置を表す *latlng オブジェクトと前のステップで作成したオプションオブジェクトを渡すことにより、 Marker クラスをインスタンス化します。

//Creating a marker
var marker = L.marker([17.385044, 78.486671], markerOptions);

ステップ6 *-最後に、 *Marker クラスの* addTo（）メソッドを使用して、前の手順で作成した *Marker オブジェクトをマップに追加します。

例

次のコードは、都市ハイデラバード（インド）にマーカーを設定します。このマーカーは、タイトル MyLocation でクリックおよびドラッグできます。

<html>
   <head>
      <title>Marker Options Example</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);

        //Creating a Marker
         var markerOptions = {
            title: "MyLocation",
            clickable: true,
            draggable: true
         }
        //Creating a marker
         var marker = L.marker([17.385044, 78.486671], markerOptions);

        //Adding marker to the map
         marker.addTo(map);
      </script>
   </body>

</html>

次の出力を生成します

マーカーオプション

マーカーのカスタムアイコン

Leafletライブラリが提供するデフォルトのアイコンの代わりに、独自のアイコンを追加することもできます。次の手順を使用して、デフォルトアイコンの代わりにカスタムアイコンをマップに追加できます。

ステップ1 *-<div>要素（文字列またはオブジェクト）とマップオプション（オプション）を渡すことで *Map オブジェクトを作成します。

ステップ2 *-目的のタイルのURLを渡すことで *Layer オブジェクトを作成します。

ステップ3 *- *Map クラスの* addLayer（）*メソッドを使用して、レイヤーオブジェクトをマップに追加します。

ステップ4 *- *markerOptions の変数を作成し、必要なオプションに値を指定します-

iconUrl -このオプションの値として、アイコンとして使用する画像のパスを指定する String オブジェクトを渡す必要があります。
iconSize -このオプションを使用すると、アイコンのサイズを指定できます。

注-これらに加えて、iconSize、shadowSize、iconAnchor、shadowAnchor、popupAnchorなどの他のオプションに値を設定することもできます。

以下に示すように、上記のオプション変数を渡すことにより、* L.icon（）*を使用してカスタムアイコンを作成します。

//Icon options
var iconOptions = {
   iconUrl: 'logo.png',
   iconSize: [50, 50]
}

//Creating a custom icon
var customIcon = L.icon(iconOptions);

ステップ5 *-markerOptionsの変数を作成し、必要なオプションに値を指定します。これらに加えて、前の手順で作成したアイコン変数を値として渡すことにより、アイコンを指定します。

//Options for the marker
var markerOptions = {
   title: "MyLocation",
   clickable: true,
   draggable: true,
   icon: customIcon
}

ステップ6 *-マークする位置を表す *latlng オブジェクトと前のステップで作成したオプションオブジェクトを渡すことにより、 Marker クラスをインスタンス化します。

//Creating a marker
var marker = L.marker([17.438139, 78.395830], markerOptions);

ステップ7 *-最後に、 *Marker クラスの* addTo（）メソッドを使用して、前の手順で作成した *Marker オブジェクトをマップに追加します。

例

次のコードは、finddevguidesの場所にマーカーを設定します。ここでは、デフォルトのマーカーの代わりにfinddevguidesのロゴを使用しています。

<!DOCTYPE html>
<html>
   <head>
      <title>Marker Custom Icons Example</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.438139, 78.395830],
            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);

        //Icon options
         var iconOptions = {
            iconUrl: 'logo.png',
            iconSize: [50, 50]
         }
        //Creating a custom icon
         var customIcon = L.icon(iconOptions);

        //Creating Marker Options
         var markerOptions = {
            title: "MyLocation",
            clickable: true,
            draggable: true,
            icon: customIcon
         }
        //Creating a Marker
         var marker = L.marker([17.438139, 78.395830], markerOptions);

        //Adding popup to the marker
         marker.bindPopup('Hi welcome to finddevguides').openPopup();

        //Adding marker to the map
         marker.addTo(map);
      </script>
   </body>

</html>

次の出力を生成します

マーカーカスタムアイコン

LeafletJS-ベクターレイヤー

前の章では、リーフレットでマーカーを使用する方法を学びました。マーカーとともに、円、多角形、長方形、ポリラインなどのさまざまな形状を追加することもできます。この章では、Googleマップが提供する図形の使用方法について説明します。

ポリライン

Leaflet JavaScriptライブラリを使用して地図上にポリラインオーバーレイを描画するには、以下の手順に従ってください-

ステップ1 *-<div>要素（文字列またはオブジェクト）とマップオプション（オプション）を渡すことで *Map オブジェクトを作成します。

ステップ2 *-目的のタイルのURLを渡すことで *Layer オブジェクトを作成します。

ステップ3 *- *Map クラスの* addLayer（）*メソッドを使用して、レイヤーオブジェクトをマップに追加します。

ステップ4 *-以下に示すように、ポリラインを描画するポイントを保持する *latlangs 変数を作成します。

//Creating latlng object
var latlngs = [
   [17.385044, 78.486671],
   [16.506174, 80.648015],
   [17.000538, 81.804034],
   [17.686816, 83.218482]
];

ステップ5 *- L.polyline（）*を使用してポリラインを作成します。ポリラインを描画するには、変数として位置を渡し、線の色を指定するオプションを渡します。

//Creating a poly line
var polyline = L.polyline(latlngs, {color: 'red'});

ステップ6 *- *Polyline クラスの* addTo（）*メソッドを使用して、ポリラインをマップに追加します。

//Adding to poly line to map
polyline.addTo(map);

例

以下は、ハイデラバード、ヴィジャヤワダ、ラジャマヘンドラダラム、およびヴィシャカパトナム（インド）の都市をカバーするポリラインを描くコードです。

DOCTYPE html>
<html>
   <head>
      <title>Leaflet Poly lines</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: [16.506174, 80.648015],
            zoom: 7
         }
        //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);

        //Creating latlng object
         var latlngs = [
            [17.385044, 78.486671],
            [16.506174, 80.648015],
            [17.000538, 81.804034],
            [17.686816, 83.218482]
         ];
        //Creating a poly line
         var polyline = L.polyline(latlngs, {color: 'red'});

        //Adding to poly line to map
         polyline.addTo(map);
      </script>
   </body>

</html>

次の出力を生成します

ポリライン

ポリゴン

Leaflet JavaScriptライブラリを使用して地図上にポリゴンオーバーレイを描画するには、以下の手順に従ってください-

ステップ1 *-<div>要素（文字列またはオブジェクト）とマップオプション（オプション）を渡すことで *Map オブジェクトを作成します。

ステップ2 *-目的のタイルのURLを渡すことで *Layer オブジェクトを作成します。

ステップ3 *- *Map クラスの* addLayer（）*メソッドを使用して、レイヤーオブジェクトをマップに追加します。

ステップ4 *- *latlangs 変数を作成して、ポリゴンを描画するポイントを保持します。

//Creating latlng object
var latlngs = [
   [17.385044, 78.486671],
   [16.506174, 80.648015],
   [17.686816, 83.218482]
];

ステップ5 *- L.polygon（）*を使用してポリゴンを作成します。位置/ポイントを変数として渡してポリゴンを描画し、オプションを使用してポリゴンの色を指定します。

//Creating a polygon
var polygon = L.polygon(latlngs, {color: 'red'});

ステップ6 *- *Polygon クラスの* addTo（）*メソッドを使用して、ポリゴンをマップに追加します。

//Adding to polygon to map
polygon.addTo(map);

例

以下は、都市ハイデラバード、ヴィジャヤワダ、およびヴィシャカパトナム（インド）をカバーするポリゴンを描画するコードです。

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet Polygons</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: [16.506174, 80.648015],
            zoom: 7
         }
        //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);

        //Creating latlng object
         var latlngs = [
            [17.385044, 78.486671],
            [16.506174, 80.648015],
            [17.686816, 83.218482]
         ];
        //Creating a polygon
         var polygon = L.polygon(latlngs, {color: 'red'});

        //Adding to polygon to map
         polygon.addTo(map);
      </script>
   </body>

</html>

それは次の出力を生成します-

ポリゴン

矩形

Leaflet JavaScriptライブラリを使用して長方形のオーバーレイを地図に描画するには、以下の手順を実行します

ステップ1 *-<div>要素（文字列またはオブジェクト）とマップオプション（オプション）を渡すことで *Map オブジェクトを作成します。

ステップ2 *-目的のタイルのURLを渡すことで *Layer オブジェクトを作成します。

ステップ3 *- *Map クラスの* addLayer（）*メソッドを使用して、レイヤーオブジェクトをマップに追加します。

ステップ4 *-latlangs変数を作成して、マップ上に長方形を描くポイントを保持します。

//Creating latlng object
var latlngs = [
   [17.342761, 78.552432],
   [16.396553, 80.727725]
];

ステップ5 *- L.rectangle（）関数を使用して長方形を作成します。位置/ポイントを変数として渡し、長方形を描画し、 *rectangleOptions を使用して長方形の色と重さを指定します。

//Creating rectOptions
var rectOptions = {color: 'Red', weight: 1}

//Creating a rectangle
var rectangle = L.rectangle(latlngs, rectOptions);

ステップ6 *- *Polygon クラスの* addTo（）*メソッドを使用して、長方形をマップに追加します。

//Adding to rectangle to map
rectangle.addTo(map);

例

以下は、Leaflet JavaScriptライブラリを使用して地図上に長方形を描くコードです。

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet Rectangle</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: [16.506174, 80.648015],
            zoom: 7
         }
         var map = new L.map('map', mapOptions);//Creating a map object

        //Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         map.addLayer(layer);//Adding layer to the map

        //Creating latlng object
         var latlngs = [
            [17.342761, 78.552432],
            [16.396553, 80.727725]
         ];
         var rectOptions = {color: 'Red', weight: 1}  //Creating rectOptions

        //Creating a rectangle
         var rectangle = L.rectangle(latlngs, rectOptions);
         rectangle.addTo(map);  //Adding to rectangle to map
      </script>
   </body>

</html>

それは次の出力を生成します-

長方形

サークル

Leaflet JavaScriptライブラリを使用して地図上に円のオーバーレイを描画するには、以下の手順に従います。

ステップ1 *-<div>要素（文字列またはオブジェクト）とマップオプション（オプション）を渡すことで *Map オブジェクトを作成します。

ステップ2 *-目的のタイルのURLを渡すことで *Layer オブジェクトを作成します。

ステップ3 *- *Map クラスの* addLayer（）*メソッドを使用して、レイヤーオブジェクトをマップに追加します。

ステップ4 *-以下に示すように、円の中心を保持するlatlangs変数を作成します。

//Center of the circle
var circleCenter = [17.385044, 78.486671];

ステップ5 *-変数circleOptionsを作成して、以下に示すように、オプションcolor、fillColor、およびfillOpacityに値を指定します。

//Circle options
var circleOptions = {
   color: 'red',
   fillColor: '#f03',
   fillOpacity: 0
}

ステップ6 *- L.circle（）*を使用して円を作成します。円の中心、半径、および円のオプションをこの関数に渡します。

//Creating a circle
var circle = L.circle(circleCenter, 50000, circleOptions);

ステップ7 *- *Polyline クラスの* addTo（）*メソッドを使用して、上記で作成した円をマップに追加します。

//Adding circle to the map
circle.addTo(map);

例

以下は、都市ハイデラバードの座標を半径とする円を描くコードです。

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet Circle</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: 7
         }
         var map = new L.map('map', mapOptions);//Creating a map object

        //Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         map.addLayer(layer);       //Adding layer to the map
         var circleCenter = [17.385044, 78.486671];    //Center of the circle

        //Circle options
         var circleOptions = {
            color: 'red',
            fillColor: '#f03',
            fillOpacity: 0
         }
        //Creating a circle
         var circle = L.circle(circleCenter, 50000, circleOptions);
         circle.addTo(map);    //Adding circle to the map
      </script>
   </body>

</html>>

それは次の出力を生成します-

サークル

LeafletJS-マルチポリラインとポリゴン

前の章では、円、多角形、長方形、ポリラインなどのさまざまな形状を追加する方法を学びました。この章では、マルチポリゴン、マルチレクタングル、ポリラインを追加する方法について説明します。

マルチポリライン

Leaflet JavaScriptライブラリを使用して地図にマルチポリラインオーバーレイを描くには、以下の手順に従ってください-

ステップ1 *-<div>要素（文字列またはオブジェクト）とマップオプション（オプション）を渡すことで *Map オブジェクトを作成します。

ステップ2 *-目的のタイルのURLを渡すことで *Layer オブジェクトを作成します。

ステップ3 *- *Map クラスの* addLayer（）*メソッドを使用して、レイヤーオブジェクトをマップに追加します。

ステップ4 *-マルチポリラインを描画するポイントを保持するために、latlangs変数を作成します。

//Creating latlng object
var latlang = [
   [[Step 5 *− Create a multi-polyline using the* L.multiPolyline()* function. Pass the locations as variable to draw a multi-polyline and an option to specify the color and weight of the lines.

[source,result,notranslate]

var multiPolyLineOptions = {color： 'red'};

var multipolyline = L.multiPolyline（latlang、multiPolyLineOptions）;

*Step 6 *− Add multi-polyline to the map using the* addTo() *method of the* Multipolyline* class.

[source,result,notranslate]

multipolyline.addTo（map）;

==== Example

Following is the code to draw a multi-polyline covering the cities Hyderabad, Vijayawada, and Vishakhapatnam; and Kurnool, Bengaluru, and Chennai.

[source,prettyprint,notranslate]

<！DOCTYPE html> <html> <head> <title>リーフレットマルチポリライン</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>//マップオプションの作成var mapOptions = {center：[16.506174、80.648015]、zoom：7}//マップオブジェクトの作成var map = new L.map （ 'map'、mapOptions）;//Layerオブジェクトの作成var layer = new L.TileLayer（ 'http：//{s} .tile.openstreetmap.org/{z}/{x}/{y} .png'）;//マップにレイヤーを追加map.addLayer（layer）;//latlngオブジェクトの作成var latlang = [[[Creating poly line options var multiPolyLineOptions = {color： 'red'};//マルチポリラインの作成var multipolyline = L.multiPolyline（latlang、multiPolyLineOptions）;//マルチポリラインをマップに追加multipolyline.addTo（map）; </script> </body> </html>

It generates the following output −

image:/leafletjs/multi_polyline_map.jpg[Multi-Polyline Map]

=== Multi Polygon

To draw a multi-polygon overlay on a map using Leaflet JavaScript library, follow the steps given below −

*Step 1 *− Create a* Map* object by passing a <__div__> element (String or object) and map options (optional).

*Step 2 *− Create a* Layer* object by passing the URL of the desired tile.

*Step 3 *− Add the layer object to the map using the* addLayer() *method of the* Map* class.

*Step 4 *− Create a latlangs variable to hold the points to draw the multi polygon.

[source,result,notranslate]

var latlang = [[[Step 5* -* L.multiPolygon（）*関数を使用してマルチポリゴンを作成します。場所を変数として渡し、マルチポリゴンを描画し、オプションで線の色と太さを指定します。

//Creating multi polygon options
var multiPolygonOptions = {color:'red'};

//Creating multi polygon
var multipolygon = L.multiPolygon(latlang , multiPolygonOptions);

ステップ6 *- *MultiPolygon クラスの* addTo（）*メソッドを使用して、マルチポリゴンをマップに追加します。

//Adding multi polygon to map
multipolygon.addTo(map);

例

以下は、ハイデラバード、ヴィジャヤワダ、ヴィシャカパトナムの各都市に触れるマルチポリゴンを描くコードです。クルヌール、ベンガルール、チェンナイ。

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet Multi Polygons</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: [16.506174, 80.648015],
            zoom: 7
         }
        //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);

        //Creating latlng object
         var latlang = [
            [[Creating multi polygon options
         var multiPolygonOptions = {color:'red', weight:8};

        //Creating multi polygons
         var multipolygon = L.multiPolygon(latlang , multiPolygonOptions);

        //Adding multi polygon to map
         multipolygon.addTo(map);
      </script>
   </body>

</html>

それは次の出力を生成します-

マルチポリゴンマップ

LeafletJS-レイヤーグループ

レイヤーグループ

レイヤーグループを使用すると、複数のレイヤーをマップに追加し、それらを単一のレイヤーとして管理できます。

以下の手順に従って、 LayerGroup を作成し、マップに追加します。

ステップ1 *-<div>要素（文字列またはオブジェクト）とマップオプション（オプション）を渡すことで *Map オブジェクトを作成します。

ステップ2 *-目的のタイルのURLを渡すことで *Layer オブジェクトを作成します。

ステップ3 *- *Map クラスの* addLayer（）*メソッドを使用して、レイヤーオブジェクトをマップに追加します。

ステップ4 *-以下に示すように、それぞれのクラスをインスタンス化して、必要なマーカー、ポリゴン、円などの要素（レイヤー）を作成します。

//Creating markers
var hydMarker = new L.Marker([17.385044, 78.486671]);
var vskpMarker = new L.Marker([17.686816, 83.218482]);
var vjwdMarker = new L.Marker([16.506174, 80.648015]);

//Creating latlng object
var latlngs = [
   [17.385044, 78.486671],
   [16.506174, 80.648015],
   [17.686816, 83.218482]
];
//Creating a polygon
var polygon = L.polygon(latlngs, {color: 'red'});

ステップ5 *- l.layerGroup（）*を使用してレイヤーグループを作成します。以下に示すように、上記で作成したマーカー、ポリゴンなどを渡します。

//Creating layer group
var layerGroup = L.layerGroup([hydMarker, vskpMarker, vjwdMarker, polygon]);

ステップ6 *- addTo（）*メソッドを使用して、前のステップで作成したレイヤーグループを追加します。

//Adding layer group to map
layerGroup.addTo(map);

例

次のコードは、3つのマーカーとポリゴンを保持するレイヤーグループを作成し、マップに追加します。

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet Layer Group</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: 7
         }
         var map = new L.map('map', mapOptions);//Creating a map object

        //Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         map.addLayer(layer);     //Adding layer to the map

        //Creating markers
         var hydMarker = new L.Marker([17.385044, 78.486671]);
         var vskpMarker = new L.Marker([17.686816, 83.218482]);
         var vjwdMarker = new L.Marker([16.506174, 80.648015]);

        //Creating latlng object
         var latlngs = [
            [17.385044, 78.486671],
            [16.506174, 80.648015],
            [17.686816, 83.218482]
         ];
        //Creating a polygon
         var polygon = L.polygon(latlngs, {color: 'red'});

        //Creating layer group
         var layerGroup = L.layerGroup([hydMarker, vskpMarker, vjwdMarker, polygon]);
         layerGroup.addTo(map);   //Adding layer group to map
      </script>
   </body>

</html>

それは次の出力を生成します-

レイヤーグループマップ

レイヤー（要素）の追加

addLayer（）*メソッドを使用して、フィーチャグループにレイヤーを追加できます。このメソッドには、追加する要素を渡す必要があります。

ハイデラバード市を中心に円を追加できます。

//Creating a circle
var circle = L.circle([16.506174, 80.648015], 50000, {color: 'red', fillColor:
   '#f03', fillOpacity: 0} );

//Adding circle to the layer group
layerGroup.addLayer(circle);

次の出力が生成されます。 −

レイヤーグループマップの追加

レイヤー（要素）の削除

removeLayer（）*メソッドを使用して、フィーチャグループからレイヤーを削除できます。このメソッドには、削除する要素を渡す必要があります。

以下に示すように、ヴィジャヤワダという都市のマーカーを削除できます。

//Removing layer from map
layerGroup.removeLayer(vjwdMarker);

それは次の出力を生成します-

レイヤーマップの削除

機能グループ

*LayerGroup* に似ていますが、マウスイベントを許可し、ポップアップをバインドできます。 * setStyle（）*メソッドを使用して、グループ全体にスタイルを設定することもできます。

以下の手順に従って、フィーチャグループを作成し、マップに追加します。

ステップ1 *-<div>要素（文字列またはオブジェクト）とマップオプション（オプション）を渡すことで *Map オブジェクトを作成します。

ステップ2 *-目的のタイルのURLを渡すことで *Layer オブジェクトを作成します。

ステップ3 *- *Map クラスの* addLayer（）*メソッドを使用して、レイヤーオブジェクトをマップに追加します。

ステップ4 *-以下に示すように、それぞれのクラスをインスタンス化して、必要なマーカー、ポリゴン、円などの要素（レイヤー）を作成します。

//Creating markers
var hydMarker = new L.Marker([17.385044, 78.486671]);
var vskpMarker = new L.Marker([17.686816, 83.218482]);
var vjwdMarker = new L.Marker([16.506174, 80.648015]);

//Creating latlng object
var latlngs = [
   [17.385044, 78.486671],
   [16.506174, 80.648015],
   [17.686816, 83.218482]
];
//Creating a polygon
var polygon = L.polygon(latlngs, {color: 'red'});>

ステップ5 *- l.featureGroup（）*を使用して機能グループを作成します。以下に示すように、上記で作成したマーカー、ポリゴンなどを渡します。

//Creating feature group
var featureGroup = L.featureGroup([hydMarker, vskpMarker, vjwdMarker, polygon]);

ステップ6 *-フィーチャグループにスタイルを設定すると、グループ内の各要素（レイヤー）にスタイルが適用されます。 * setStyle（）*メソッドを使用してこれを行うことができ、このメソッドに、色や不透明度などのオプションに値を渡す必要があります。

上記の手順で作成した機能グループにスタイルを設定します。

//Setting style to the feature group
featureGroup.setStyle({color:'blue',opacity:.5});

ステップ7 *-以下に示すように、 bindPopup（）*メソッドを使用してポップアップをバインドします。

//Binding popup to the feature group
featureGroup.bindPopup("Feature Group");

ステップ8 *- addTo（）*メソッドを使用して、前のステップで作成した機能グループを追加します。

//Adding layer group to map
featureGroup.addTo(map);

例

次のコードは、3つのマーカーとポリゴンを保持するフィーチャグループを作成し、それをマップに追加します。

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet Feature Group</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: 7
         }
         var map = new L.map('map', mapOptions);//Creating a map object

        //Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         map.addLayer(layer);     //Adding layer to the map

        //Creating markers
         var hydMarker = new L.Marker([17.385044, 78.486671]);
         var vskpMarker = new L.Marker([17.686816, 83.218482]);
         var vjwdMarker = new L.Marker([16.506174, 80.648015]);

        //Creating latlng object
         var latlngs = [
            [17.385044, 78.486671],
            [16.506174, 80.648015],
            [17.686816, 83.218482]
         ];
         var polygon = L.polygon(latlngs, {color: 'red'});//Creating a polygon

        //Creating feature group
         var featureGroup = L.featureGroup([hydMarker, vskpMarker, vjwdMarker, polygon]);
         featureGroup.setStyle({color:'blue',opacity:.5});
         featureGroup.bindPopup("Feature Group");
         featureGroup.addTo(map);     //Adding layer group to map
      </script>
   </body>

</html>

それは次の出力を生成します-

レイヤーグループマップの追加

LeafletJS-イベント処理

Leaflet JavaScriptプログラムは、ユーザーが生成したさまざまなイベントに応答できます。この章では、リーフレットを操作しながらイベント処理を実行する方法を示すいくつかの例を提供します。

イベント処理

以下の手順に従って、イベントをマップに追加します。

ステップ1 *-<div>要素（文字列またはオブジェクト）とマップオプション（オプション）を渡すことで *Map オブジェクトを作成します。

ステップ2 *-目的のタイルのURLを渡すことで *Layer オブジェクトを作成します。

ステップ3 *- *Map クラスの* addLayer（）*メソッドを使用して、レイヤーオブジェクトをマップに追加します。

ステップ4 *-以下に示すように、マップにハンドラーを追加します。

map.on("click", function(e){
   new L.Marker([e.latlng.lat, e.latlng.lng]).addTo(map);
})

例

次のコードは、リーフレットを使用した処理も示しています。実行時に、マップをクリックすると、その特定の場所にマーカーが作成されます。

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet Polygons</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: [16.506174, 80.648015],
            zoom: 7
         }
         var map = new L.map('map', mapOptions);   //Creating a map object

        //Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         map.addLayer(layer);//Adding layer to the map

         map.on("click", function(e){
            new L.Marker([e.latlng.lat, e.latlng.lng]).addTo(map);
         })
      </script>
   </body>

</html>

それは次の出力を生成します-

イベント処理

LeafletJS-オーバーレイ

マップオーバーレイの代わりに、リーフレットアプリケーションで画像、ビデオオーバーレイを使用することもできます。この章では、このようなオーバーレイの使用方法を説明します。

画像オーバーレイ

画像オーバーレイを使用するには、以下の手順に従ってください。

ステップ1 *-<div>要素（文字列またはオブジェクト）とマップオプション（オプション）を渡すことで *Map オブジェクトを作成します。

ステップ2 *-目的のタイルのURLを渡すことで *Layer オブジェクトを作成します。

ステップ3 *- *Map クラスの* addLayer（）*メソッドを使用して、レイヤーオブジェクトをマップに追加します。

ステップ4 *- L.imageOverlay（）*を使用して画像オーバーレイを作成します。以下に示すように、画像のURLと画像の境界を表すオブジェクトを渡します。

//Creating Image overlay
var imageUrl = 'tpPoster.jpg';
var imageBounds = [[var overlay = L.imageOverlay(imageUrl, imageBounds);

ステップ5 *-以下に示すように、 *imageOverlay クラスの* addTo（）*メソッドを使用して、マップにオーバーレイを追加します。

//Adding overlay to the map
overlay.addTo(map);

例

次のコードは、画像オーバーレイの使用方法を示しています。

<!DOCTYPE html>
<html>
   <head>
      <title>Image Overlay Example</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.342761, 78.552432],
            zoom: 8
         }
         var map = new L.map('map', mapOptions);//Creating a map object

        //Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         map.addLayer(layer); //Adding layer to the map

        //Creating Image overlay
         var imageUrl = 'tpPoster.jpg';
         var imageBounds = [[var overlay = L.imageOverlay(imageUrl, imageBounds);
         overlay.addTo(map);
      </script>
   </body>

</html>

それは次の出力を生成します-

オーバーレイ

LeafletJS-コントロール

リーフレットは、ズーム、属性、スケールなどのさまざまなコントロールを提供します。

ズーム-デフォルトでは、このコントロールはマップの左上隅にあります。これには2つのボタン "+" および "–" があり、これらを使用してマップをズームインまたはズームアウトできます。マップオプションの zoomControl オプションを false に設定すると、デフォルトのズームコントロールを削除できます。
属性-デフォルトでは、このコントロールはマップの右下隅にあります。小さなテキストボックスに属性データが表示されます。デフォルトでは、テキストが表示されます。マップオプションの attributionControl オプションを false に設定すると、デフォルトの属性コントロールを削除できます。
スケール-デフォルトでは、このコントロールはマップの左下隅にあります。画面の現在の中心を表示します。

この章では、Leaflet JavaScriptライブラリを使用して、これら3つのコントロールをすべて作成し、マップに追加する方法を説明します。

Zoom

Leaflet JavaScriptライブラリを使用して独自のズームコントロールをマップに追加するには、以下の手順に従ってください-

ステップ1 *-要素（文字列またはオブジェクト）とマップオプション（オプション）を渡すことで *Map オブジェクトを作成します。

ステップ2 *-目的のタイルのURLを渡すことで *Layer オブジェクトを作成します。

ステップ3 *- *Map クラスの* addLayer（）*メソッドを使用して、レイヤーオブジェクトをマップに追加します。

ステップ4 *-zoomOptions変数を作成し、デフォルトのオプション（+および-）の代わりに、ズームインおよびズームアウトオプションの独自のテキスト値を定義します。

次に、以下に示すように、zoomOptions変数を* L.control.zoom（）*に渡してズームコントロールを作成します。

//zoom control options
var zoomOptions = {
   zoomInText: '1',
   zoomOutText: '0',
};
//Creating zoom control
var zoom = L.control.zoom(zoomOptions);

ステップ5 *- addTo（）*メソッドを使用して、前のステップで作成したズームコントロールオブジェクトをマップに追加します。

//Adding zoom control to the map
zoom.addTo(map);

例

デフォルトの代わりに、独自のズームコントロールをマップに追加するコードを次に示します。ここでは、1を押すとマップがズームインし、0を押すとマップがズームアウトします。

<!DOCTYPE html>
<html>
   <head>
      <title>Zoom Example</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,
            zoomControl: false
         }
         var map = new L.map('map', mapOptions);//Creating a map object

        //Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         map.addLayer(layer);  //Adding layer to the map

        //zoom control options
         var zoomOptions = {
            zoomInText: '1',
            zoomOutText: '0',
         };
         var zoom = L.control.zoom(zoomOptions);  //Creating zoom control
         zoom.addTo(map);  //Adding zoom control to the map
      </script>
   </body>

</html>

それは次の出力を生成します-

ズームマップ

帰属

Leaflet JavaScriptライブラリを使用して独自の属性をマップに追加するには、以下の手順に従います-

ステップ1 *-<div>要素（文字列またはオブジェクト）とマップオプション（オプション）を渡すことで *Map オブジェクトを作成します。

ステップ2 *-目的のタイルのURLを渡すことで *Layer オブジェクトを作成します。

ステップ3 *- *Map クラスの* addLayer（）*メソッドを使用して、レイヤーオブジェクトをマップに追加します。

ステップ4 *- *attrOptions 変数を作成し、デフォルト値（リーフレット）の代わりに独自のプレフィックス値を定義します。

次に、以下に示すように、 attrOptions 変数を* L.control.attribution（）*に渡すことにより、属性コントロールを作成します。

//Attribution options
var attrOptions = {
   prefix: 'attribution sample'
};

//Creating an attribution
var attr = L.control.attribution(attrOptions);

ステップ5 *- addTo（）メソッドを使用して、前のステップで作成した *attribution control オブジェクトをマップに追加します。

//Adding attribution to the map
attr.addTo(map);

例

次のコードは、デフォルトではなく独自の属性コントロールをマップに追加します。ここでは、代わりにテキスト_attribution sample_が表示されます。

<!DOCTYPE html>
<html>
   <head>
      <title>Attribution Example</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,
            attributionControl: false
         }
         var map = new L.map('map', mapOptions);//Creating a map object

        //Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         map.addLayer(layer);   //Adding layer to the map

        //Attribution options
         var attrOptions = {
            prefix: 'attribution sample'
         };

        //Creating an attribution
         var attr = L.control.attribution(attrOptions);
         attr.addTo(map); //Adding attribution to the map
      </script>
   </body>

</html>>

それは次の出力を生成します-

属性マップ

規模

Leaflet JavaScriptライブラリを使用して独自のスケールコントロールをマップに追加するには、以下の手順に従ってください-

ステップ1 *-<div>要素（文字列またはオブジェクト）とマップオプション（オプション）を渡すことで *Map オブジェクトを作成します。

ステップ2 *-目的のタイルのURLを渡すことで *Layer オブジェクトを作成します。

ステップ3 *- *Map クラスの* addLayer（）メソッドを使用して、 *layer オブジェクトをマップに追加します。

ステップ4 *-以下に示すように L.control.scale（）*を使用して渡すことにより、スケールコントロールを作成します。

//Creating scale control
var scale = L.control.scale();

ステップ5 *-以下に示すように、 addTo（）メソッドを使用して、前のステップで作成した *scale control オブジェクトをマップに追加します。

//Adding scale control to the map
scale.addTo(map);

例

次のコードは、地図に縮尺制御を追加します。

<!DOCTYPE html>
<html>
   <head>
      <title>Scale Example</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');
         map.addLayer(layer);//Adding layer to the map
         var scale = L.control.scale();//Creating scale control
         scale.addTo(map);//Adding scale control to the map
      </script>
   </body>

</html>

それは次の出力を生成します-

縮尺マップ

Leafletjs-quick-guide

LeafletJS-はじめに

Leaflet.jsとは

Webページにマップをロードする手順

ステップ1：HTMLページを作成する

ステップ2：リーフレットCSSスクリプトをロードする

ステップ3：リーフレットスクリプトをロードする

ステップ4：コンテナを作成する

ステップ5：マップオプション

ステップ6：マップオブジェクトを作成する

ステップ7：レイヤーオブジェクトの作成

ステップ8：レイヤーをマップに追加する

例

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

LeafletJS-マーカー

シンプルマーカーの追加

例

ポップアップをマーカーにバインド

例

マーカーオプション

例

マーカーのカスタムアイコン

例

LeafletJS-ベクターレイヤー

ポリライン

例

ポリゴン

例

矩形

例

サークル

例

LeafletJS-マルチポリラインとポリゴン

マルチポリライン

例

LeafletJS-レイヤーグループ

レイヤーグループ

例

レイヤー（要素）の追加

レイヤー（要素）の削除

機能グループ

例

LeafletJS-イベント処理

イベント処理

例

LeafletJS-オーバーレイ

画像オーバーレイ

例

LeafletJS-コントロール

Zoom

例

帰属

例

規模

例