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


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

はじめに言っておきます。
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.5.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.5.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のみで地図を表示させることができるんです。

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

デモ

解説など

では各行の解説です。

まず、8行目、9行目では、Leaflet.jsを使用する為に必要なcss本体と、js本体をCDN経由で呼び出しています。(よりセキュリティを高めるなら、CDNの使用時にはintegrity属性を足すと良いでしょう)

次に、13~23行目のstyle部分ですが、見れば分かる通り、サンプル用に全画面表示できるようなプロパティを指定しています。

27行目の id を付与された div が、実際に地図が描画される領域となります。

31~40行目が、Leaflet.jsに関する設定です。ここの部分は、以下でさらに細かく見ていくとしましょう。

地図部分のjs解説

32行目では、地図の元となるデータ、いわゆる地図タイル(もしくは正方形タイル)と呼ばれるデータのURLを、変数’url’に格納しています。

(なお地図データは、今回のサンプルでは OpenStreetMap を使用させて頂きました。)

33行目では、L.map(‘targetMap’) と記述して、’targetMap’というIDに地図を描画させるための指定を行なっています。
続けて、 .setView([34.979672, 138.382738], 7); として、地図の初期表示地点とズームレベルを指定しています。

(この33行目で、’var mymap’ として、変数mymapに上記を代入しているのは、この下に続く地図表示のさまざまなオプションを適用するためです。)

地図表示の各種オプションなど

34行目からは、地図に対する各種オプションの記述になります。

まず、34行目にある url には、32行目で定義した地図タイルデータのURLが入ります。

続く maxZoom: 11, minZoom: 7, については、文字通り拡大縮小の最大/最小値を指定しています。

37行目の attribution: には著作権表示が入ります。これは、オープンソースのタイルデータを使用している場合、その提供元の指定する通り、必ず表示する様にしましょう。(指定すると通常、地図の右下に表示されます。)

39行目のように、 addTo(mymap); としてあげる事で、これらのオプションを先程33行目で定義した地図と紐づけることが可能になります。

以上の簡単な記述だけで、サンプルの様な地図表示ができてしまいます!

他にもある様々な拡張機能

このLeaflet.js、ただ単に地図表示ができるだけではないんです。

ピンをたてる、そのピンをクリックすると情報ウインドウが開く、といった事も簡単に実装できます。

また、全世界の有志によってプラグインも複数開発されているので、Leaflet.jsを起点に、様々なサービスでの利用が想定できますね。

まとめ

Leaflet.jsは、実際に FourSquare、Pinterest、Flickr 等々数多くの有名なサービスで実際に採用されている、優れたjsライブラリです。

ぜひ皆さんも試してみると、その素晴らしさがお分り頂けると思います!!

※この記事は随時、品質向上を目的として加筆、修正を行う可能性があります。