🗺️

Leafletの使い方 #1 地図を表示する

2022/11/03に公開約2,400字

「Webサイトに地図を表示する」ときに一番最初に思い浮かぶのはGoogleマップでしょう。マーカーや線を引けたりする、Googleマイマップという選択肢もあります。

しかし、それらは自由度が比較的低く、やりたいことができないなんてこともあります。
Google Maps APIという、有料で使える高機能のものもありますが、地図を表示するのにお金はかけたくありません。

そこで登場するのが、Leafletです。

Leafletとは

Leafletとは、無料で使える、地図関連のJavascriptライブラリです。
ウクライナのキーウに住むソフトウェアエンジニアのVolodymyr Agafonkinさんによって、今から11年前に作られました。

無料にも関わらず、機能はGoogleにも負けず、地図に求める「マーカーの表示」「ラインの表示」から、プラグインを使えば「現在地の表示」なんかも出来たりします。

次のセクションで基本的な使い方を紹介します。

Leafletの基本的な使い方

CSSとJSを読み込む

まずはLeafletのCSSとJavascriptファイルを読み込みます。
今回の記事では、CDNを使って読み込みたいと思います。

地図を表示したいページのHTMLに以下を追加。

index.html
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.2/dist/leaflet.css" integrity="sha256-sA+zWATbFveLLNqWO2gtiw3HL/lh1giY/Inf1BJ0z14=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.2/dist/leaflet.js" integrity="sha256-o9N1jGDZrf5tS+Ft4gbIK7mYMipq9lqpVJ91xHSyKhg=" crossorigin=""></script>

なお、ファイルをダウンロードして使いたい場合は、Leafletの公式サイトからダウンロードできます。

地図を表示する基本的なコード

HTMLの地図を表示したい場所に以下を追加。
後でこの id="map" の場所にJSに応じて地図が表示されるようになります。

index.html
<div id="map" style="position:absolute;top:0;left:0;right:0;bottom:0;"></div>

今回の例では、位置を全方向0へすることで、画面いっぱいに地図が広がるようにしています。

続いて、Javascriptで表示内容を設定。

main.js
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

1つずつ解説します。

今回の例では、まず、地図を表示する対象としてid="map"を指定。

var map = L.map('map'

続いて、初期位置と初期ズームレベルを設定

.setView([51.505, -0.09], 13);

地図タイルの画像URLを指定し、読み込み。同時に、最大ズームレベル(maxZoom)とコピーライトを記述。
最後に.addTo(map);で、地図へ追加します。

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

上記コードのデモはこちら
http://kei425h.starfree.jp/demo/leaflet/leaflet-demo-1.html

と、こんな感じで地図を表示することができました。

次回(#2)は、「地図とポップアップを表示する方法」です。
下記からご覧ください。
https://zenn.dev/kei425/articles/13577e68f71ff2

最後まで読んでいただきありがとうございました。

Discussion

ログインするとコメントできます