はじめに
Leafletとは、Web上の地図サービスが使えるJavaScriptライブラリです。
利用できる地図は、GoogleマップやYahoo地図といった有名どころだけではなく、国土地理院といった学術的にしか利用されなさそうなお堅い地図まで幅広く利用できます。人に待ち合わせ場所を知らせる場合、色々な方法で伝えることができます。自分がよく使う方法は次のやり方です。
①Googleマップで特定の位置を示したキャプチャを取り、ビットマップに張り付ける
②ビットマップに目的の場所をペンなどで印をつける
③ビットマップをPDFに変換する
このやり方でも悪くはないでしょう。しかし、JavaScriptでLeafletを使えば、手軽に特定の場所を示すことができるようになります。しかも、緯度・経度を変更するだけで、使いまわしができるようになるといったメリットもあります。
サンプルソースの解説
サンプルコードでは、JR米原駅を待ち合わせ場所として指定しました。
・divで地図を表示するエリアを作ります。styleをposition:absoluteにすると、ブラウザの画面全体に地図が表示できます。
・Lealetが使えるようにするために、headでLeafletのJavaScriptライブラリと、CSSのCDNのリンク先URLを指定します。
・bodyがブラウザにロードされたタイミングでini関数を実行して、地図が初期表示されるようにします。
・mpoint変数に、待ち合わせ場所の緯度、経度を配列で設定します。
・L.mapでLeafletのライブラリが使えるようにします。
・zoomControlをfalseにすることで、拡大縮小ボタンが非表示にできます。しかし、マウス操作では拡大縮小ができるようになっています。
・setViewの第2引数を16にしています。これは、地図の拡大縮小の範囲を表しています。値を小さくすれば縮小し、値を大きくすれば拡大します。待ち合わせ場所を示すには、16が一番妥当な値だと判断しています。
・tileLayerで引用する地図の種類を指定しています。サンプルでは、OpenStreetMapの地図を引用しています。OpenStreetMapとはオープンライセンスで運用されている地図のサイトです。
・attributionで著作権情報を右下に表示することができます。
・maxZoomで拡大可能な最大値を指定します。拡大率を大きくし過ぎると見栄えが悪くなります。18が妥当な値と判断して設定しました。
・L.markerで待ち合わせ場所をマーキングできます。マーキングした場所にカーソルを当てると、titleの内容が表示されます。
コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>待ち合わせ場所</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
crossorigin=""></script>
</head>
<body onload="init()">
<div id="mapid" style="position: absolute; top:0; left:0; right:0; bottom:0;"></div>
<script>
function init(){
//米原駅の緯度/経度
var mpoint = [35.314933, 136.290105];
var basho = "「JR米原駅」 待ち合わせ場所はここだよ！"
var map = L.map('mapid',{zoomControl:false}).setView(mpoint, 16);
var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a>',
maxZoom: 18});
osm.addTo(map);
//マーカーを地図に追加
L.marker(mpoint,{title: basho}).addTo(map);
}
</script>
</body>
</html>
表示
このような表示になります。
