Leaflet 1.3 - 4-6 Layer Groups and Layers Control

4-6 Layer Groups and Layers Control

This tutorial will show you how to group several layers into one, and how to use the layers control to allow users to easily switch different layers on your map.

このチュートリアルは、いくつかのレイヤをグループに分類する方法と、マップ上でユーザに異なるレイヤを簡単に切り換えることを許可するためレイヤコントロールを使用する方法を説明します。


Layer Groups

Let’s suppose you have a bunch of layers you want to combine into a group to handle them as one in your code:

コードに一つとして扱うグループに結びつけたいひとまとまりのレイヤがあると考えます。

var littleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.'),
    denver    = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.'),
    aurora    = L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.'),
    golden    = L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.');

Instead of adding them directly to the map, you can do the following, using the LayerGroup class:

それらをマップに直接追加する代わりに、LayerGroup を使用して、次のようにすることができます。

var cities = L.layerGroup([littleton, denver, aurora, golden]);

Easy enough! Now you have a cities layer that combines your city markers into one layer you can add or remove from the map at once.

簡単ですね！これで、シティマーカをマップからすぐに追加または削除できる一つのレイヤに結び付けるシティレイヤになりました。


Layers Control

Leaflet has a nice little control that allows your users to control which layers they see on your map. In addition to showing you how to use it, we’ll also show you another handy use for layer groups.

Leaflet は、マップ上に見えるレイヤをコントロールすることをユーザに許可するのに良い軽量なコントロールがあります。その使い方を説明することに加えて、レイヤグループのもう一つの手軽な使用も説明します。

There are two types of layers: (1) base layers that are mutually exclusive (only one can be visible on your map at a time), e.g. tile layers, and (2) overlays, which are all the other stuff you put over the base layers. In this example, we want to have two base layers (a grayscale and a colored base map) to switch between, and an overlay to switch on and off: the city markers we created earlier.

２種類のレイヤがあります：(1) 相互に排他的（マップ上に継続的に現れているだけ）なベースレイヤ、例えばタイルレイヤ、と (2) オーバレイヤ、ベースレイヤ上に配置される他の要素すべて、です。この例では、切り替えれれる２つのベースレイヤ（グレースケールと色付けされた基本マップ）と、以前作成したシティマーカのオンとオフを切り替えられる１つのオーバレイを配置します。

Now let’s create those base layers and add the default ones to the map:

最初に、それらのベースレイヤを作成し、マップに初期値を追加します。

var grayscale = L.tileLayer(mapboxUrl, {id: 'MapID', attribution: mapboxAttribution}),
    streets   = L.tileLayer(mapboxUrl, {id: 'MapID', attribution: mapboxAttribution});

var map = L.map('map', {
 center: [39.73, -104.99],
 zoom: 10,
 layers: [grayscale, cities]
});

訳注：今回は、Mapbox の代わりに OpenStreetMap のタイルサーバを使用します。

var grayscale = L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', {
                   attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                   }),
    streets   = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                 attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                  });

Next, we’ll create two objects. One will contain our base layers and one will contain our overlays. These are just simple objects with key/value pairs. The key sets the text for the layer in the control (e.g. “Streets”), while the corresponding value is a reference to the layer (e.g. streets).

次に、２つのオブジェクトを作成します。１つはベースレイヤを含み、もう一つはオーバレイを含みます。これらは、key/value 対を使用した簡単なオブジェクトです。key は、コントロール内のレイヤに対するテキストを設定し（例えば、“Streets”）、もう一方、対応する value は、参照するレイヤです（例えば、 streets）。

var baseMaps = {
 "Grayscale": grayscale,
 "Streets": streets
};

var overlayMaps = {
 "Cities": cities
};

Now, all that’s left to do is to create a Layers Control and add it to the map. The first argument passed when creating the layers control is the base layers object. The second argument is the overlays object. Both arguments are optional: you can pass just a base layers object by omitting the second argument, or just an overlays objects by passing null as the first argument. In each case, the omitted layer type will not appear for the user to select.

ここで、後は、Layers Control（Leaflet API）を作成し、マップに追加するだけです。layers control を作成するとき渡される第１引数は、ベースレイヤオブジェクトです。第２引数は、オーバレイオブジェクトです。両方の引数はオプションです：第２引数を省略することによってベースレイヤオブジェクトだけを、または、第１引数のように null を渡すことによってオーバレイオブジェクトだけ渡すことができます。どちらの場合も、省略されたレイヤタイプは、ユーザが選択しても現れません。

L.control.layers(baseMaps, overlayMaps).addTo(map);

Note that we added grayscale and cities layers to the map but didn’t add streets. The layers control is smart enough to detect what layers we’ve already added and have corresponding checkboxes and radioboxes set.

グレースケールとシティレイヤをマップに追加しましたが、ストリートは追加しなかったことに注意してください。layers control は、すでに追加されていて対応するチェックボックスとラジオボックス（ボタン）セットがあるレイヤを検出するのに十分性能があります。

Also note that when using multiple base layers, only one of them should be added to the map at instantiation, but all of them should be present in the base layers object when creating the layers control.

同じように、複数のベースレイヤを使用するとき、それらの一つがインスタンス化でマップに追加されるべきですが、それらのすべては layers control を作成するとき、ベースレイヤに表示されるべきだということに注意してください。

Finally, you can style the keys when you define the objects for the layers. For example, this code will make the label for the grayscale map gray:

最後に、レイヤのオブジェクトを定義するとき、key をスタイルできます。例えば、グレースケールマップのラベルをグレーにします。

var baseMaps = {
 "<span style='color: gray'>Grayscale</span>": grayscale,
 "Streets": streets
};

Now let’s view the result on a separate page →

では、別ページの結果を見てみましょう。

全コード

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./leaflet13/leaflet.css" />
  <script src="./leaflet13/leaflet.js"></script>
  <title>Layer Groups and Layers Control</title>
 </head>
 <body>
  <div id="map" style="width: 600px; height: 400px;"></div>
  <script>

   //Layer Groups
   var littleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.'),
       denver    = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.'),
       aurora    = L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.'),
       golden    = L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.');

      var cities = L.layerGroup([littleton, denver, aurora, golden]);

   //Layers Control
   // var grayscale = L.tileLayer(mapboxUrl, {id: 'MapID', attribution: mapboxAttribution}),
   //     streets   = L.tileLayer(mapboxUrl, {id: 'MapID', attribution: mapboxAttribution});

  var grayscale = L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', {
                  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                  }),

      streets   = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                   attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                    });

   var map = L.map('map', {
    center: [39.73, -104.99],
    zoom: 10,
    layers: [grayscale, cities]
   });

   var baseMaps = {
    "<span style='color: gray'>Grayscale</span>": grayscale,
    "Streets": streets
   };

   var overlayMaps = {
    "Cities": cities
   };

   L.control.layers(baseMaps, overlayMaps).addTo(map);

  </script>
 </body>
</html>