インタラクティブな地図を表示したい

地図を利用したサイトを作りたいと思ったときに、以前はGoogle Mapsを使用していましたが有料になったため気軽に使えなくなりました。

そこでフリーで使えるOpenStreetMapLeaflet.jsを使ってみたいと思います。

OpenStreetMapは無料で使用できる地図データです。
https://www.openstreetmap.org/about

OpenStreetMapは地図データだけなのでこれだけでは使用できません。
そこで、Leaflet.jsというJavaScriptライブラリを使って、これらの地図データをサイト上に表示します。
https://leafletjs.com/

まず、CSSファイルとJavaScriptファイルを読み込みます。
JavaScriptファイルはCSSファイルの後に読み込む必要があります。

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/> 
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""> </script>

次に地図表示用のdivエレメントを作ります。
CSSで高さを指定する必要があります。

<style> #mymap { height: 500px; } </style> <div id="mymap"></div>

後は地図で表示する座標とズームレベルを設定し、地図のタイル(画像)を読み込みます。
ここではOpenStreetMapのデフォルトのタイルを使用しますが、他のMapboxやStamenといったタイルも使用可能です。

<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 © OpenStreetMap', maxZoom: 18 }).addTo(mymap); </script>

マーカーを追加してみます。

<script> var marker = L.marker([35.6671, 139.75739]).addTo(mymap); marker.bindPopup('SL広場').openPopup(); </script>

Leafletには様々なメソッドやイベントが用意されているので動的に地図をインタラクティブな地図を作成できそうです。

スタッフブログ最新記事

月別 アーカイブ

2020年

2019年

2018年

2017年

2016年

2015年

2014年

2013年

2012年

2011年

2010年

2009年

2008年

2007年

ご応募はお電話でも受け付けています
教育官ブログ
\風俗業界時評/シン・コラム
英語スタッフブログ!