地図を利用したサイトを作りたいと思ったときに、以前はGoogle Mapsを使用していましたが有料になったため気軽に使えなくなりました。
そこでフリーで使えるOpenStreetMapとLeaflet.jsを使ってみたいと思います。
OpenStreetMapは無料で使用できる地図データです。
https://www.openstreetmap.org/about
OpenStreetMapは地図データだけなのでこれだけでは使用できません。
そこで、Leaflet.jsというJavaScriptライブラリを使って、これらの地図データをサイト上に表示します。
https://leafletjs.com/
まず、CSSファイルとJavaScriptファイルを読み込みます。
JavaScriptファイルはCSSファイルの後に読み込む必要があります。
|
1 2 |
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/> <br /> <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""> </script> |
次に地図表示用のdivエレメントを作ります。
CSSで高さを指定する必要があります。
|
1 |
<style> #mymap { height: 500px; } </style> <div id="mymap"></div> |
後は地図で表示する座標とズームレベルを設定し、地図のタイル（画像）を読み込みます。
ここではOpenStreetMapのデフォルトのタイルを使用しますが、他のMapboxやStamenといったタイルも使用可能です。
|
1 |
<script> var mymap = L.map('mymap').setView([35.66690, 139.75838], 16); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a>', maxZoom: 18 }).addTo(mymap); </script> |
マーカーを追加してみます。
|
1 |
<script> var marker = L.marker([35.6671, 139.75739]).addTo(mymap); marker.bindPopup('<b>SL広場</b>').openPopup(); </script> |
Leafletには様々なメソッドやイベントが用意されているので動的に地図をインタラクティブな地図を作成できそうです。
