地図装飾(マージナリア)デモ

📊 使用データ & 機能

  • ScaleBarLayer: 投影法から実距離を計算するスケールバー
  • TitleLayer: タイトル・サブタイトル・出典表記のピクセル座標配置
  • NorthArrowLayer: 配置位置の真北方向へ自動回転する方位記号
  • 配置位置・最大幅・単位(km/mi)の設定
  • キリの良い距離(1/2/5×10^n)への自動丸め

地図表示

実装サンプル

地図装飾レイヤーの使用例

// スケールバー: 配置位置での実距離を投影法から計算する
const scaleBar = new Thematika.ScaleBarLayer({
    position: { left: 20, bottom: 20 },  // ピクセル座標で配置
    maxWidth: 200,                        // この幅以下でキリの良い距離に丸める
    units: 'km',                          // 'km' | 'mi'
    segments: 4                           // 交互塗りの分割数
});
map.addLayer('scalebar', scaleBar);

// タイトルとサブタイトル(左上)
const title = new Thematika.TitleLayer({
    title: '日本の都道府県',
    subtitle: '国土数値情報をもとに作成',
    position: 'top-left'                 // キーワードまたは {top, left} px指定
});
map.addLayer('title', title);

// 出典表記(右下に小さく)
const credit = new Thematika.TitleLayer({
    title: '© National Land Numerical Information',
    position: 'bottom-right',
    fontSize: 10,
    color: '#64748b'
});
map.addLayer('credit', credit);

// 方位記号(配置位置での真北方向へ自動回転)
const northArrow = new Thematika.NorthArrowLayer({
    position: { top: 20, right: 20 },
    size: 44
});
map.addLayer('north', northArrow);