Static Images APIにおけるパディングとバウンディングボックス

Mapbox Static Images APIのビューポートをより詳細に制御できる新機能

Mapboxは最近、画像のトリミングを容易にし、ユーザーが画像の見た目をより細かく制御できるようにするために、Mapbox Static Images APIに2つの新しいオプションを追加しました。画像のパディングを細かく制御し、バウンディングボックスでビューポートを設定できるようになりました。

画像のパディング

Static Image APIリクエストで、paddingクエリパラメータを使用してパディングできるようになりました。このパラメータは、標準CSS仕様を使用して、開発者が1〜4個の整数値を指定して、各辺のパディングを個別に設定できるようにします:

上の画像は、ストックホルムで毎年開催される 10K ミッドナイトラン（スウェーデン語で真夜中のランニング）のルートを示しています。ルートの GeoJSON パスを オーバーレイ として設定し、Mapbox Static Images API の auto オプションを使用して、画像をオーバーレイに合わせて自動的にトリミングしました。デフォルトでは、最終的な画像が見栄えが良くなるように、若干のパディングが追加されています。

地図のコンテキストをより明確にするために、ストックホルムの中心に200ピクセルの上部パディングを適用して表示してみましょう。次のように、3つの数字（上部パディング、サイドパディング、下部パディングを示す）を使用します：&padding=200,20,20

または、右側のパディングを増やすことで、セーデルマルムの島地区を中央に配置したいとします。これを行うには、次のように4つの数字（上、右、下、左のパディングを示す）を使用します:  &padding=200,20,20,150

パディングをカスタマイズするオプションは、開発者の意見を取り入れて実現しました。一部のユーザーは、地理的なコンテキストを追加したり、UI要素を表示するスペースを確保したり、グラフィック要素の視覚的な空白を増やすために、オーバーレイでautoパラメーターを使用する場合に、パディング=0で可能な限り、トリミングされた画像を必要とします。

バウンディングボックス

多くの開発者から、参照フレームはバウンディングボックスであるという意見も寄せられました。朗報です。バウンディングボックス（bbox）を使用して、静止画像のビューポート全体を指定できるようになりました。bboxパラメータを使用すると、静止画像リクエストでレンダリングされる領域を正確に把握しやすくなり、APIリクエストのauto またはcenter/zoomパラメータの代わりに使用されます。

バウンディングボックスパラメータの使用を示すために、別の人気のあるランを見てみましょう。下の画像は、ボストンマラソンのルートをGeoJSONオーバーレイとして使用し、autoパラメータを使用したStatic Imageリクエストです。

この画像からは、マラソンがどこで開催されるのかという地理的なコンテキストがあまりわかりません。ボストンのラベルは画像から切り取られており、マラソンがどこから始まるのかわかりにくいです。特定のビューポートを念頭に置いているため、リクエスト内のautoをbounding box: [-71.6105,42.2206,-70.8373,42.4661]に置き換えることができます。

bboxを使用してビューポートを設定することで、このマラソンがボストンで開催されることを簡単に伝えることができます。上の画像は、画像の幅と高さに合わせてバウンディングボックスを収めるために、低いズームレベルでレンダリングされます。

bboxパラメーターは、パディングと組み合わせて使用​​することもできます。ビューポートに使用されるバウンディングボックスは、ルートオーバーレイの位置に依存しないため、バウンディングボックスに追加のパディングを追加して、ルートを画像の中央に配置することができます。ルートを中央に配置するために、リクエストに&padding=0,0,40,50を追加してみましょう。

これで、バウンディングボックス内の領域全体を含む静止画像ができました。ルートを中央に配置し、マラソンの開始場所に関する地理的なコンテキストを提供するために、追加のパディングが追加されています。 

はじめる

新しいbboxとpaddingパラメーターを使用すると、静止画像リクエストでレンダリングされるものをより詳細に制御できます。これらのオプションとAPI呼び出しの例の完全な仕様については、Static Images APIのドキュメントページを参照してください。#BuiltWithMapboxを使用して、TwitterでStatic Images APIをどのように使用しているかを共有してください。