【Leaflet】マップを固定する方法
Contents
はじめに
マップを画像のようにサイトへ埋め込みたい場合、スクロールやズームができるとかえって扱いづらくなってしまうことがあります。そこで今回は Leaflet を使った埋め込みマップについて、固定する方法について説明したいと思います。
なお、この記事は「【Leaflet入門】地図を表示する方法と基本的な使い方」の続きです。
マップを固定する方法
マップを定義するときに dragging, touchZoom, scrollWheelZoom, doubleClickZoom, boxZoom, tap, keyboard, zoomControl を全て false に設定します。
const map = L.map('mapcontainer',{
dragging: false,
touchZoom: false,
scrollWheelZoom: false,
doubleClickZoom: false,
boxZoom: false,
tap: false,
keyboard: false,
zoomControl: false
});全体のソースコードと実装例は以下の通りです。
<!DOCTYPE html>
<html>
<head>
<title>htmlMap</title>
<meta http-equiv='content-type' charset='utf-8'>
<meta name='viewport' content='width=device-width'>
</head>
<body>
<!-- 埋め込みマップのdivタグ。マップサイズはwidth（幅）とheight（高さ）で決まる -->
<div id='mapcontainer' style='width:100%; height:300px; z-index:0;'></div>
<!-- 以下LeafletのJavaScriptとCSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script>
function init_map() {
const map = L.map('mapcontainer',{
dragging: false,
touchZoom: false,
scrollWheelZoom: false,
doubleClickZoom: false,
boxZoom: false,
tap: false,
keyboard: false,
zoomControl: false
});
//初期の中心位置とズームレベルを設定
map.setView([43.659, 142.141], 6);
//マップタイルを読み込み、引用元を記載する
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{attribution: "<a href='http://osm.org/copyright'> ©OpenStreetMap </a>"}
).addTo(map);
}
//ダウンロード時に初期化する
window.addEventListener('DOMContentLoaded', init_map());
</script>
</body>
</html>実装例
なお、途中でマップを固定するには以下で実現できます。enable() で元の状態に戻ります。
map.dragging.disable();
map.scrollWheelZoom.disable();
map.doubleClickZoom.disable();
map.boxZoom.disable();
map.keyboard.disable();
map.zoomControl.disable();
map.touchZoom.disable();
if(map.tap) map.tap.disable();
関連記事
GUI で Leaflet の HTML/JavaScript を生成するツールはこちら。コード書くのがめんどくさいな～って人は使ってみてください。WordPress の場合、生成されたコードをカスタム HTML に貼り付ければ動きます。マップを固定する機能もついています。
Leaflet、MapLibre、OpenLayers の比較はこちら。
MapLibre についてはこちら。
ちょっと宣伝
当サイトは Web 地図を積極的に用いた海外旅ブログまとめサイトとなっています。トップページに地図がありますが、地名を押すと画像が開き、画像を押すと関連記事一覧（クリック数順）が開きます。記事数が多い国ほど赤く、地名もその国で記事が多い都市の文字が大きくなるようにしています。ぜひ覗いてみてください。
当サイトで海外旅ブログを執筆することも可能です（もちろん無料です）！ また既にブログをお持ちの方も、当サイトからリンクを貼ることができるようになっています。パントレ開発部までお気軽にお問い合わせください。
このページが皆様のプログラミングの一助となりますことをお祈りいたします
パントレ開発部