MapLibre GL JS - コントロール一覧

NavigationControl

ナビゲーションコントロール

ズームイン/アウト、地図の回転、傾斜のリセット機能を提供します。地図操作の基本となるコントロールです。

// 基本的な追加
map.addControl(new maplibregl.NavigationControl());

// 位置指定
map.addControl(
  new maplibregl.NavigationControl(), 
  'top-right'
);

ScaleControl

スケールコントロール

地図の縮尺（スケール）を表示します。距離の把握に便利です。

// 基本的な追加
map.addControl(new maplibregl.ScaleControl());

// オプション付き
map.addControl(new maplibregl.ScaleControl({
  maxWidth: 100,
  unit: 'metric' // 'imperial', 'nautical'も可能
}), 'bottom-left');

FullscreenControl

フルスクリーンコントロール

地図をフルスクリーン表示します。詳細な地図閲覧に最適です。

// フルスクリーンコントロールを追加
map.addControl(new maplibregl.FullscreenControl());

// 特定の要素をフルスクリーン対象に
map.addControl(new maplibregl.FullscreenControl({
  container: document.querySelector('#map-container')
}));

GeolocateControl

位置情報コントロール

ユーザーの現在地を取得して地図上に表示します。位置情報の許可が必要です。

// 基本的な位置情報コントロール
map.addControl(new maplibregl.GeolocateControl());

// 詳細オプション付き
map.addControl(new maplibregl.GeolocateControl({
  positionOptions: {
    enableHighAccuracy: true
  },
  trackUserLocation: true,
  showUserHeading: true
}));

カスタムコントロール

独自コントロール

カスタム機能を持つ独自のコントロールを作成できます。このサンプルは東京駅に移動するボタンです。

class CustomControl {
  onAdd(map) {
    this._map = map;
    this._container = document.createElement('div');
    this._container.className = 'maplibregl-ctrl maplibregl-ctrl-group';
    this._container.innerHTML = `
      <button type="button" title="東京駅へ">🏢</button>
    `;
    this._container.onclick = () => {
      map.flyTo({ center: [139.767, 35.681], zoom: 15 });
    };
    return this._container;
  }
  
  onRemove() {
    this._container.parentNode.removeChild(this._container);
    this._map = undefined;
  }
}

map.addControl(new CustomControl());

コントロール管理

配置と削除

コントロールの配置位置を指定したり、不要になったコントロールを削除できます。

// 配置位置の指定
'top-left'      // 左上
'top-right'     // 右上（デフォルト）
'bottom-left'   // 左下  
'bottom-right'  // 右下

// コントロールの削除
map.removeControl(navigationControl);

// 推奨の基本セット
map.addControl(new maplibregl.NavigationControl(), 'top-right');
map.addControl(new maplibregl.ScaleControl(), 'bottom-left');
map.addControl(new maplibregl.FullscreenControl(), 'top-left');
map.addControl(new maplibregl.GeolocateControl(), 'bottom-right');

MapLibre コントロール