DEV Community

Cover image for postmaps.js: maxDataZoom
Hidenori FUJIMURA
Hidenori FUJIMURA

Posted on

5 3

postmaps.js: maxDataZoom

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

デモサイト

情報源

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

    let maxDataZoom = o.maxDataZoom || 14;
Enter fullscreen mode Exit fullscreen mode

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
    }
  })
},
Enter fullscreen mode Exit fullscreen mode

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)]
    }
  })
}
Enter fullscreen mode Exit fullscreen mode

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

謝辞・出典

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

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

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more