【Leaflet】マップを固定する方法

Contents

1 はじめに
2 マップを固定する方法
3 実装例

はじめに

　マップを画像のようにサイトへと埋め込みたい場合、スクロールやズームするとかえって扱いづらくなってしまうことがあります。そこで今回は Leaflet を使った埋め込みマップについて、完全に固定する方法について説明したいと思います。

マップを固定する方法

　マップの dragging, touchZoom, scrollWheelZoom, doubleClickZoom, boxZoom, tap, keyboard, zoomControl を全て false に設定します。

var map = L.map('mapcontainer',{
  dragging: false, 
  touchZoom: false, 
  scrollWheelZoom: false, 
  doubleClickZoom: false, 
  boxZoom: false, 
  tap: false, 
  keyboard: false, 
  zoomControl: false
});

実装例

　全体のソースコードと実装例は以下の通りです。

<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.3.0/dist/leaflet.css' />
<script src='https://unpkg.com/leaflet@1.3.0/dist/leaflet.js'></script>

<script>
function init_map() {

  var 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('http://{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>

　実装例（画像のようにマップが完全に固定され、動かせないようになっています）