Leaflet.jsで高機能な地図表示を行う方法

この記事の主旨と、大前提のお話

はじめに言っておきたい事があります。
Leaflet.js について語る前に、 Google Maps Platform に敬意を表したいという事です。
Google Maps Platform は素晴らしいサービスです。確かに2018年以降、課金金額形態に大きな変更があったものの、
そのオプションの豊富さ、拡張のしやすさ、どれを取ってもやはりとても優れているサービスであることは間違いありません。

ただし我々Webデザイン界隈の現場では、どうしても、自前で、地図機能を実装したい。しなければならない。
そんなオーダーに直面する機会も少なくはありません。

本日は、そんなオーダーに応えられるような
地図機能を自前で実装可能な、オープンソースのjsライブラリ「Leaflet.js」についてご紹介します。

Leaflet.jsとは?

まずは、公式サイトをご紹介します。
https://leafletjs.com/

先述の通り、Leaflet.js はオープンソースの地図表示用jsライブラリです。
最新版リリースはこの記事を書いている2019年5月の時点で v1.5.1 で、現在進行形でアップデートが続けられているのも、とても素晴らしい点です。
また各種プラグインの開発も活発で、拡張性も高く、プラスオンの要望にも柔軟に応えることが可能です。

使い方

では使い方です。とてもシンプルかつ、とても簡単です。

(サンプルなので、html内にコード全部直書きなのは適宜、外部化する等してください)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>MAP sample</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
</head>
<body>
<!-- css -->
<style>
html,body{
  height: 100%;
  margin: 0;
}
#targetMap{
  height:100%;
  width:100%;
  z-index:0;
}
</style>
<!-- // css -->

<!-- html -->
<div id="targetMap"></div>
<!-- // html -->

<!-- js -->
<script>
var url = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
var mymap = L.map('targetMap').setView([34.979672, 138.382738], 7);
L.tileLayer(url, {
maxZoom: 11,
minZoom: 7,
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(mymap);
</script>
<!-- // js -->
</body>
</html>

いかがでしょうか。上記の通り、特に難しい事はありません。最小のhtml、最小のcss、わずかなjsのみで地図を表示させることができるんです。

（サンプルを下記に用意しました。ドラッグによる地図移動、マウスホイールでの拡大/縮小、スマートフォンでのスワイプ移動、ピンチイン/アウトにも対応しています）

デモ