Zenn
🔰

Leafletでかんたん地図表示

2021/08/26に公開
JavaScript
初心者
初心者向け
Leaflet
tech

Leafletとは

Leafletは、JavaScriptを使って簡単に地図を表示できる、大人気ライブラリです。
記述方もシンプルでわかりやすいのでオススメです!!

Leaflet

MapBoxアカウントから、トークンを取得する

Leafletは、MapBoxというWebサービスと連動しています。
(地図データはここから借りているのですね)

MapBox

次の手順に従って、専用のトークンを取得します。

1, MapBoxアカウントを作る

先ずはアカウントを作ります。
"Sign up"ボタンを押して、アカウントを作りましょう。

2, ログインページから、キーを取得する

ログインに成功すると、次の様な画面になっていると思います。

ログインをしたら、"Create a token"を押して、トークンを作ります。
ちょうど次の位置に表示されている物がトークンになります。

このトークンを使って、地図を表示します。

HTMLファイルを用意する

さっそく実装していきます。
HTMLファイルを用意して、下記コードを記述します。

index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Leflet</title>
	<!-- CSS -->
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
	integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
	<link rel="stylesheet" href="./main.css"/>
	<!-- JavaScript -->
	<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
	integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
	crossorigin=""></script>
	<script src="./main.js"></script>
</head>
<body>
	<h1>Leflet</h1>
	<div id="mapid"></div>
</body>
</html>

Leafletでは、CSSが1つ、JavaScriptが1つの、合計2つの読み込みが必要になります。
これらファイルのロードには、CDN(Contents Deliverly Network)を使っています。
(URLから直接ダウンロードする事で、プロジェクトがコンパクトになりますね)

bodyタグのIDに、"mapid"が付与されている箇所に注目してください。
Leafletでは、指定したIDが一致するタグに対して地図を表示します。

CSSファイルを用意する

HTMLファイルを用意して、下記コードを記述します。

custom.css
#mapid{
	margin: 0px; padding: 0px;
	width: 480px; height: 320px;
	background-color: gray;
}

ここでは、"width"と"height"を使って地図のサイズを指定しています。

JavaScriptファイルを用意する

JavaScriptファイルを用意して、下記コードを記述します。

Leafletライブラリを読み込むと、Leafletオブジェクト"L"が扱える様になります。

簡単に地図を出すコードは、次の通りです。

main.js(抜粋)
// マップを作る
let map = L.map("mapid").setView(緯度経度, 16);

// マップの設定
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
	attribution: 著作権表記,
	accessToken: アクセストークン,
	id: マップの種類
}).addTo(map);

"map関数"の引数には、表示対象のタグに付けたIDを、
"setView関数"の第1引数には、"緯度経度"の情報を、第2引数には地図のズームレベルを指定します。

"tileLayer関数"の第2引数に注目してください。
"attribution"には、コピーライトを記述します。(この文章は変更してはいけません)
"accessToken"には、"MapBox"で取得したトークンを指定します。
"id"には、利用する地図データの種類を指定しています。(衛星写真を使うこともできますよ)

これだけのコードで、簡単に地図を出す事ができます。(やりました!!)

マーカーを立ててポップアップを出す

次はマーカーを立ててみましょう。
ついでにポップアップも出してみます。

main.js(抜粋)
// マーカーを出す
L.marker(緯度経度).addTo(map).bindPopup(メッセージ).openPopup();

簡単にマーカーとポップアップが出せます。(やりました!!)

円を描く

様々な図形を描画することも簡単です。

main.js(抜粋)
// 円を描く
let circle = L.circle(緯度経度, {
	color: 線の色, fillColor: 塗りの色,
	fillOpacity: 透明度, radius: 半径
}).addTo(map);

円を描くには、"circle関数"を実行します。
パラメーターには、線の色、塗りの色、透明度、半径を指定しています。

円を描く事ができました。(やりました!!)

クリックした場所を調べる

クリックした場所にポップアップを表示してみましょう。

main.js(抜粋)
// クリックイベント
let popup = L.popup();
map.on("click", (e)=>{
	console.log(e.latlng);
	let str = e.latlng.lat + ", " + e.latlng.lng;
	popup.setLatLng(e.latlng).setContent(str).openOn(map);
});

"on関数"を使う事で、クリックイベントを捉える事ができます。
ここでは、ポップアップに緯度経度の情報を入れてみます。

クリックでポップアップが出てきました。(やりました!!)

全体のコード

最後に、全体のコードを載せておきますね。
(アクセストークンは、皆さんが用意したものを使ってくださいね)

main.js
const ATTRIBUTION = '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors';
const ACCESS_TOKEN = "アクセストークン";

window.onload = (event)=>{
	console.log("onload!!");

	// 緯度経度データ
	const ogaki = [35.366978775556916, 136.61782096901123];

	// マップを作る
	let map = L.map("mapid").setView(ogaki, 16);

	// マップの設定
	L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
		attribution: ATTRIBUTION,// 著作権表記
		accessToken: ACCESS_TOKEN,// アクセストークン
		id: "mapbox/streets-v11",// マップの種類
	}).addTo(map);

	// マーカーを出す
	L.marker(ogaki).addTo(map)
	.bindPopup("Hello OpenStreetMap!!").openPopup();

	// 円を描く
	let circle = L.circle(ogaki, {
		color: "red", fillColor: "#f03",
		fillOpacity: 0.2, radius: 100
	}).addTo(map);

	// クリックイベント
	let popup = L.popup();
	map.on("click", (e)=>{
		console.log(e.latlng);
		let str = e.latlng.lat + ", " + e.latlng.lng;
		popup.setLatLng(e.latlng).setContent(str).openOn(map);
	});
}

最後に

いかがでしたか？
Leafletを使うと、いとも簡単に地図が表示できる事がわかったと思います。
今回は、円を描いてみましたが、四角を描いたり多角形を描くことも簡単にできますよ。
ここまで読んでいただき有難うございました。

Discussion