postmaps.js: maxDataZoom

postmaps.js でオーバーズームを正しく効かせるために、ベクトルタイル側の maxzoom を知らせるためには、maxDataZoom を設定すれば良いことがわかりました。

デモサイト

情報源

ソースコードを GitHub で検索して見つけました。検索文字列は 14 です。protomaps のサービスが maxzoom を 14 にしていると知っていたからです。

    let maxDataZoom = o.maxDataZoom || 14;

https://github.com/protomaps/protomaps.js/blob/c30bec880a7228ae53de9f5c88f9c789579f7f71/src/view.ts#L228

動的なスタイル設定

protomaps.js では、width や color に (z, f) を引数とする関数を渡せるので、それを使って色々ためしています。

道路の太さをランダムで設定

{
  dataLayer: 'road',
  symbolizer: new protomaps.LineSymbolizer({
    color: 'gray',
    width: (z, f) => {
      return Math.random() * 4
    }
  })
},

https://github.com/optgeo/proton/blob/main/docs/index.html#L50-L58

ポリゴンの塗色をランダムで設定

{
  dataLayer: 'building',
  symbolizer: new protomaps.PolygonSymbolizer({
    fill: (z, f) => {
      return ['yellow', 'blue'][Math.floor(Math.random() * 2)]
    }
  })
}

https://github.com/optgeo/proton/blob/main/docs/index.html#L59-L66

謝辞・出典

protomaps.js をオープンソースで開発している皆様に敬意と共感を持っています。

地理院地図 Vector タイルのドキュメントは https://github.com/gsi-cyberjapan/gsimaps-vector-experiment にあります。