ブログを書いていると、たまに地図が必要になってきます。普通はGoogleマップを使ってますが、マーカーを複数、設定するときなどはログインしないといけません。またAPIを使うにしても登録をしないといけない。
ログインや登録なしに簡単に使える地図はないかといろいろ調べてみたら、有名な無料ソフトのOSM(OpenStreetMap)と『Leaflet』を使うと簡単に最低限の事ができるので今回試してみました。したいことは
①複数のマーカーを設置
②マーカー毎に説明文
③直線で折れ線を結ぶ
自分で簡易地図を描くより簡単なので重宝しています。LeafletのJavaScriptのライブラリを使えこなせばもっと可能性は広がりますが、私はこれで十分です(笑)
「Jul 18, 2018 — Leaflet 1.3.3 has been released!」
このJavaScriptは最近、更新されているようです。私には以前と何が改善したかわかりませんが最新版で試してみました。
外部JavaScriptを使うためのリンクです。以前の「0.0.7」では短かったのに、結構、長いURLです。
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js" integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q=="crossorigin=""></script>
CSSでレスポンシブルに対応するために地図の大きさを調整します。PCでは「2:1」の横長画面ですが、スマホなどでは「1:1」の正方形の画面になります。
<style>
#mapid {
width: 640px;
height: 320px;
border: 1px solid black;
margin:0 auto 0 auto;"
}
@media screen and (max-width: 768px){
#mapid {
width: 320px;
}
}
</style>
地図を表示させるために設置するHTML内のコードです。
<div id="mapid" ></div>
ここからはJavaScriptです。前半は地図を描くデータです。自分で設定するのは数字の値です。
setView([地図の中心のGPSデータ],初期値の倍率)です。GPSデータの作り方は後ほど。
maxZoomの数値は初期値の倍率数値より多く設定しますが、問題なければ「18」
マーカーや直線はGPSデータで位置を設定し後はオプションで最低限の事が設定できるようにしています。マーカーはプラグインで変更できるようですが、今回はシンプルに対応するので初期値のままです。
<script>
var map = L.map('mapid').setView([35.664035, 139.698212], 14);
var tiles = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors' });
map.addLayer(tiles);
L.marker([35.664035, 139.698212]).bindPopup("文字１").addTo(map);
L.marker([35.658182, 139.702043]).bindPopup("文字２").addTo(map);
L.polyline([[35.660000, 139.693000],[35.660000, 139.698000],[35.658111, 139.700043]],{ "color": "green", "weight": 10, "opacity": 0.5}).addTo(map);
</script>
実際のコード動作例
GPSデータはいろいろな方法がありますが、OSMでも簡単に取得できます。手順は
①右側メニュ「共有」を選択して「マーカーを含める」をクリック
マーカーが表示されるので必要な場所に移動
②「Geo URI」にマーカーの緯度経度が表示されるのでコピー
GPS数値だけコピー
このページの青文字だけ連続コピーしてブログのHTMLにまとめて挿入してください。すべてのページに使うなら外部リンクなどはHTMLの<head> </head>内とか整理して挿入したほうがいいのでしょうが、使用しないときにまで読込むと時間がかかりそうなので使うときだけにしています。
