CSS
geo

Tangram で重ね合わせを行うには

More than 1 year has passed since last update.

Mapzen, Tangram, Tilezen

ニューヨークを本拠にする Mapzen さんは、Leaflet でバイナリベクトルタイルを読むためのソフトウェアである Tangram の提供者として有名です。Tangram は表示の設定を scene.yaml という YAML ファイルで行い、柔軟な設定を心地よいコードで行える特徴があります。Mapzen さんはソフトウェアの提供だけではなく、タイルの提供も行っており、(ベクトル)タイル提供のためのソフトウェアの一群を Tilezenで提供しています。

Tangram でベクトルを重ねるなら z-index を 500 よりも上に

Tangram を使って地図を表示し、地図の上に GeoJSON や CenterCross を載せようとしたときに、載せたはずのデータがうまく表示されないということはないでしょうか。その場合には、z-index を 500 よりも上に上げれば大丈夫なのです。ちょうど [ここで z-index: 1000 としている]ように、CSS レベルで z-index を思い切り大きくしてください。そうすることで、ベクトルタイルの地図の上にあなたのデータが無事に表示されます。

client side order range

この、z-index は、どのように設計されているのでしょうか。それは、gh:tilezen/vector-datasource で client side order range として次のように定義されています。

z-index 利用法
0-9 under everything
190-199 under water (landuse)
290-299 under roads = classic underlay
490-499 over all line and polygon features = classic raster map overlay

基本地図のベクトルタイルのために、これだけのレイヤ数を予約してあるというのは、興味深いですね。