Leaflet は広く使われているWeb地図のためのJavaScriptライブラリである。
ためしで、地図を表示してみた。
これでページ上部のようなMAPを表示することができる。
表示する地図の種類に関しては
21行目
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
の部分を
OpenStreetMapの各種タイル指定 - Qiita注意この記事は内容が古くなっています。最新の内容については、OSM wikiの記事を参照されることを推奨します。OSM wiki: Tiles前段世界各地でいろんな種類のOpenStreetMapのタイルが...qiita.com
を参考に変更することができる。
それに併せてコピーライト部分も変更の必要あり
attribution: 'Map data © OpenStreetMap',
また、ThunderForest
Maps for your apps - Thunderforestwww.thunderforest.com
のタイルを使用する場合は、APIキーを取得して
https://tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=取得したAPIキー
と指定する必要がある。
