Leafletとは
- オープンソースのJavaScript地図ライブラリ
- 軽量だが、必要な地図機能を網羅している
- デスクトップとモバイルの主要なプラットフォームで動作する
導入
- HTMLのheadタグ内にLeafletのcssとJavaScriptを指定する
- 執筆当時の最新バージョンは1.8.0だった
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
crossorigin=""></script>
背景地図表示
HTML, CSS, JavaScriptファイルを作成する
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>背景地図表示</title>
<link href="style.css" rel="stylesheet">
<!-- Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>
</head>
<body>
<div id="map"></div>
<script src="main.js"></script>
</body>
</html>
- headタグ内にLeafletのcssとJavaScriptを指定する
- cssの後にJavaScriptを読み込むこと！
- 地図を配置したい場所に、あるidのdiv要素を配置する
- 今回は、idがmapのdiv要素に地図を埋め込む
style.css
html, body{
height: 100%;
}
#map{
height: 100%;
}
- 高さを指定しないと地図が表示されないので注意
main.js
let lat = 35.7100069; // 緯度
let lng = 139.8108103; // 経度
let zoom = 16; // ズームレベル
let map = L.map("map"); // 地図の生成
map.setView([lat, lng], zoom); // 緯度経度、ズームレベルを設定する
// タイルレイヤを生成し、地図に追加する
// 今回はOpenStreetMapを表示する
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
// 著作物の表示
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}
).addTo(map);
- id=mapの要素に対して、mapオブジェクトを作成する
- 中心の緯度経度とズームレベルを設定する
- タイルレイヤとしてOpenStreetMapを指定して、地図に表示する
東京スカイツリー周辺の地図を表示できました～
アイコン表示
JavaScriptファイルをいじっていきます。
main.js
let lat = 35.7100069; // 緯度
let lng= 139.8108103; // 経度
let zoom = 16; // ズームレベル
let map = L.map("map"); // 地図の生成
map.setView([lat, lng], zoom); // 緯度経度、ズームレベルを設定する
// タイルレイヤを生成し、地図に追加する
// 今回はOpenStreetMapを表示する
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
// 著作権の表示
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}
).addTo(map);
// アイコンを表示する
// lat, lngの順で指定する
var marker = L.marker([35.709058, 139.8136911]).addTo(map);
- markerオブジェクトを作成する
- 位置情報は緯度、経度の順で指定する
たった一行のコード追加で押上駅にアイコンを表示できました～
これだけだとさみしいのでポップアップも表示してみましょう
main.js
let lat = 35.7100069; // 緯度
let lng= 139.8108103; // 経度
let zoom = 16; // ズームレベル
let map = L.map("map"); // 地図の生成
map.setView([lat, lng], zoom); // 緯度経度、ズームレベルを設定する
// タイルレイヤを生成し、地図に追加する
// 今回はOpenStreetMapを表示する
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
// 著作権の表示
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}
).addTo(map);
// アイコンを表示する
// lat, lngの順で指定する
var marker = L.marker([35.709058, 139.8136911]).addTo(map);
// ポップアップを表示する
marker.bindPopup("押上駅");
アイコンをぽちっとクリックするとポップアップが表示されるようになりました～
最初からポップアップを表示したい場合は、marker.bindPopup("押上駅").openPopup();のように、openPopup()をつけてやればいいです。