勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

Leafletで「Leaflet-MiniMap」プラグインを導入し通常のマップと連動するミニマップを表示する方法

  JavaScript

Leafletでマップを表示した上で、そのマップと連動したミニマップを表示させたい。調べたところ「Leaflet-MiniMap」プラグインを導入することで実装できる模様。以下にサンプル及びソースコードをメモ。

 

Leaflet-MiniMap

GitHub

https://github.com/Norkart/Leaflet-MiniMap

CDN

CDNで使う場合は以下を記述する。

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-minimap/3.6.1/Control.MiniMap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-minimap/3.6.1/Control.MiniMap.min.css">

異なるバージョンを使用したい場合は以下から探す。

https://cdnjs.com/libraries/leaflet-minimap

 

サンプル

https://taitan916.info/sample/leaflet.js/plugin/Leaflet-MiniMap/

右下にミニマップが表示され、通常のマップと連動している点が確認できる。

 

実装方法

ソースコード

<div id="map"></div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-minimap/3.6.1/Control.MiniMap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-minimap/3.6.1/Control.MiniMap.min.css">


<script>
let map;
map = L.map('map');

//中心の経度緯度
const center = ['35.681236', '139.767125'];

//ズームレベル
const zoom = 12;

//マップの中心地とズームレベルを指定
map.setView(center, zoom);

const tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
    attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
    maxZoom: 19
});
tileLayer.addTo(map);

//マーカー生成
const mapData = [
    { 'lat' : '35.689607', 'lng' : '139.700571', 'body' : '新宿駅',}, 
    { 'lat' : '35.681236', 'lng' : '139.767125', 'body' : '東京駅',}, 
    { 'lat' : '35.628471', 'lng' : '139.73876', 'body' : '品川駅',}, 
    { 'lat' : '35.658581', 'lng' : '139.745433', 'body' : '東京タワー',}, 
    { 'lat' : '35.660238', 'lng' : '139.730077', 'body' : '六本木ヒルズ',}, 
    { 'lat' : '35.714765', 'lng' : '139.796655', 'body' : '浅草寺',}, 
    { 'lat' : '35.636564', 'lng' : '139.763144', 'body' : 'レインボーブリッジ',}, 
];
for( key in mapData ){
    makeMarker(mapData[key]);
}

//ミニマップ表示
const osm2 = new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {minZoom: 0, maxZoom: 15, attribution: 'Map data &copy; OpenStreetMap contributors' });
const miniMap = new L.Control.MiniMap(osm2, { toggleDisplay: true, position: 'bottomright' }).addTo(map);

function makeMarker( mapData ){
    const marker =  L.marker([mapData.lat, mapData.lng])
    .bindPopup(mapData.body)
    .addTo(map);
    return marker;
}
</script>

オプションについて

設定可能なオプション項目はこちらのページを参照すること。

 - JavaScript

  関連記事

Leafletにアイコン(ボタン)を設置できる「Leaflet.EasyButton」プラグインの利用方法

先日「leaflet-tag-filter-button」プラグインのCDN呼び ...

leaflet.jsとOSMで現在地を取得しマップ上にマーカーを表示する方法

leaflet.jsとOpenStreetMapで現在位置の経度緯度を取得しマッ ...

Leafletでマーカーをグループ化し、チェックボックスの状態により表示非表示を切り替える方法

LeafletとOpenStreetMapでマップ上にマーカーを複数設置した上で ...

Leafletにて操作内容を履歴に残し「進む」「戻る」ボタンで履歴を実行できる「Leaflet.NavBar」の利用方法

Leafletにてマップ移動やズーム等、ユーザーの操作内容を履歴に残して、「進む ...

Leafletのマップ状況をブラウザに保存し、再表示時に復元する「Leaflet.RestoreView」の利用方法

Leafletのマップ状況をブラウザ(cookie等)に保存し、ページリロード時 ...