Leaflet 1.3 - 4-10 Working with map panes

4-10 Working with map panes

How the default map panes work to display overlays on top of tiles, and how to override that.

デフォルトのマップペインが、タイルの前面にあるオーバレイを表示するために動作する方法とそれを上書きする方法。


What are panes?
ペインとは？

In Leaflet, map panes group layers together implicitly, without the developer knowing about it. This grouping allows web browsers to work with several layers at once in a more efficient way than working with layers individually.

Leaflet では、マップペインはレイヤを暗黙的に一纏めにし、それについて知っている開発者はいません。このグルーピングはウェブブラウザに、個々にレイヤを動作するより、もっと効果的な方法で一度にいくつかのレイヤを動作することを許可します。

Map panes use the z-index CSS property to always show some layers on top of others. The default order is:

マップペインは、いくつかのレイヤを他の前面にいつも表示するために、z-index CSS プロパティを使用します。

● TileLayers and GridLayers
● Paths, like lines, polylines, circles, or GeoJSON layers.
● Marker shadows
● Marker icons
● Popups

This is why, in Leaflet maps, popups always show “on top” of other layers, markers always show on top of tile layers, etc.

これは、Leaflet でポップアップがいつも他のレイヤの前面に表示し、マーカがいつもタイルレイヤの前面に表示されるなど、の理由です。

A new feature of Leaflet 1.0.0 (not present in 0.7.x) is custom map panes, which allows for customization of this order.

（今の 0.7.x ではなく）Leaflet 1.0.0 の新しい機能は、カスタムマップペインで、この命令のカスタマイズ（ユーザ改変）を許可します。


The default is not always right
デフォルトは常に正しくない

In some particular cases, the default order is not the right one for the map. We can demonstrate this with the Carto basemaps and labels:

いくつかの個々のケースで、デフォルトの順序がマップに対する正しいものではありません。これを Carto basemaps とラベルで説明できます：

Basemap tile with no labels
Transparent labels-only tile
Labels on top of basemap

If we create a Leaflet map with these two tile layers, any marker or polygon will show on top of both, but having the labels on top looks much nicer. How can we do that?

Leaflet マップをこれら２つのレイヤで作成する場合、いくつかのマーカまたはポリゴンが両方の前面に表示しますが、ラベルを前面に持ってくると見た目が良くなります。


Custom pane

We can use the defaults for the basemap tiles and some overlays like GeoJSON layers, but we have to define a custom pane for the labels, so they show on top of the GeoJSON data.

ベースマップタイルと GeoJSON レイヤのようないくつかのオーバレイのデフォルトを使用できますが、ラベルのカスタムペインを定義しなければならず、その結果 GeoJSON レイヤの前面に表示されます。

Custom map panes are created on a per-map basis, so first create an instance of L.Map and the pane:

カスタムマップペインは、マップごとの基準で作成され、それで最初に L.Map のインスタンスとペインを作成します。

var map = L.map('map');
map.createPane('labels');

The next step is setting the z-index of the pane. Looking at the defaults, a value of 650 will make the TileLayer with the labels show on top of markers but below pop-ups. By using getPane(), we have a reference to the HTMLElement representing the pane, and change its z-index:

次のステップは、ペインの z-index を設定します。デフォルトを見てみると、650 の値はマーカの前面ですがポップアップの後面に表示するラベルで TileLayer を生成します。getPane() を使うことによって、ペインを表示する HTMLElement を参照し、その z-index を変更します：

map.getPane('labels').style.zIndex = 650;

One of the problems of having image tiles on top of other map layers is that the tiles will capture clicks and touches. If a user clicks anywhere on the map, the web browser will assume she clicked on the labels tiles, and not on the GeoJSON or on the markers. This can be solved using the pointer-events CSS property:

他のマップレイヤの前面にイメージタイルを保持することの問題の一つは、タイルがクリックおよびタッチをキャプチャすることです。ユーザがマップ上のどこかでクリックした場合、GeoJSON 上またはマーカ上ではなく、ウェブブラウザはユーザがラベルタイルをクリックしたと仮定します。これは、pointer-events CSS プロパティを使用することで解決されます：

map.getPane('labels').style.pointerEvents = 'none';

With the pane now ready, we can add the layers, paying attention to use the pane option on the labels tiles:

これでペインを使う準備ができ、ラベルタイル上の pane オプションを使用することに注意を払いながら、レイヤを追加できます：

var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
 attribution: '©OpenStreetMap, ©CartoDB'
}).addTo(map);

var positronLabels = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png', {
 attribution: '©OpenStreetMap, ©CartoDB',
 pane: 'labels'
}).addTo(map);

var geojson = L.geoJson(GeoJsonData, geoJsonOptions).addTo(map);

Finally, add some interaction to each feature on the GeoJSON layer:

最後に、GeoJSON 上の各々のフィーチャにいくつかのインタラクションを追加します：

geojson.eachLayer(function (layer) {
 layer.bindPopup(layer.feature.properties.name);
});

map.fitBounds(geojson.getBounds());

Now the example map is complete!

これで、example map は完成です！

今回は、GeoJSON データが取得できなかったためマップの確認ができませんでした。コード全体はexample map で確認してください。