縮尺バーScaleBarExperimental

いまの縮尺を「20 km」の文字と、その長さの線で見せる物差しです。

プレビュー

1px あたり 625 m · 線の長さ 80px

拡大していくと、線は上限（既定 96px）まで伸びます。表示する距離が一段変わる瞬間に、線は短く戻ります。戻るときは 0.2 秒かけて縮みます。

状態とバリエーション

きりのいい長さ

表示する距離は 1・2・5 × 10ⁿ のきりのいい値にそろえます。そろえた分のずれは、線の長さを変えて合わせます。

まだ分からない

metersPerPixel が null のあいだは「—」だけを出し、線は出しません。推測した線は、無い線より悪いためです。

線の長さの上限

targetWidth で線の長さの上限を変えます。狭い画面では短く、広い画面では長く。

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
metersPerPixelnumber | null-画面の中心で 1px が何メートルか。まだ無ければ null。
targetWidthnumber96線の長さの上限（px）。刻みが 1・2・5 なので、線はこの 40〜100% の長さになります。
minWidthnumber24線をこれより短くしない下限（px）。
labelstring"Scale"読み上げの頭に付ける語。label="縮尺" なら「縮尺: 20 km」と読まれます。

使い方

import { ScaleBar } from "@gunjo/ui";

// 画面の中心で、1px が何メートルか。地図のライブラリが知っています。
// 地球儀なら「地球の半径 6,371km ÷ 描いている半径(px)」です。
const EARTH_RADIUS_M = 6_371_000;
const GLOBE_RADIUS_PX = 320_000;

export function MapScale() {
  return (
    <div className="relative h-80 overflow-hidden rounded-lg bg-muted">
      <div className="absolute bottom-3 left-3">
        <ScaleBar metersPerPixel={EARTH_RADIUS_M / GLOBE_RADIUS_PX} label="縮尺" />
      </div>
    </div>
  );
}

設計の判断

  • 丸めの計算は、純粋な関数 niceScale() として外から呼べます。サーバー側でも、テストでも、画面を描き直すたびにでも使えます。
  • 文字は、地図の上に重ねる文字専用の小さなサイズ（text-canvas-2xs、9.5px）です。ふつうの文字サイズ（12px 以上）では、地図を隠してしまいます。
  • 文字の周りに、ページの背景色で縁取りを付けています。海の上でも街の上でも読めるようにするためです。
  • 線の長さが変わるとき、なめらかに動かします。端末で「動きを減らす」設定をオンにしている人には、すぐに切り替わります。

関連コンポーネント

  • MapControlButton

    同じ地図の上に置く、拡大・縮小のボタン。

  • Meter

    全体のうちどれだけか。距離の物差しではない。

  • Slider

    値を選ぶ入力。縮尺バーは見せるだけ。

いつ・なぜ使うか（UIXHERO）

「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。

状態の可視化 (Visibility of System Status)