Leaflet入門1|マップを表示する

Leaflet(1.3)を使ってOpenStreetMapをブラウザに表示します。

Demoはこちらです。

1.全体のコード

2.解説

2−1.プラグインの読み込み

leafletのcssとjsを読み込みます。

2−2.htmlの設定

マップを埋め込む場所を指定します。

2−3.htmlとマップオブジェクトの紐つけ

マップを埋め込む場所のidとマップオブジェクトを紐付けます。

また、setViewで表示する座標(緯度,経度)と、どのくらいズームして地図を表示するかのズームレベルを設定します。

2−4.マップのタイルレイヤーの設定

マップに追加するタイルレイヤーを指定します。

今回は「http://{s}.tile.osm.org/{z}/{x}/{y}.png」で、OpenStreetMapのものを指定しています。

タイルレイヤーを変えると、地図の見栄えも変わります。

次回は、地図に図形(多角形)を表示したいと思います。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

コメント

  1. […] に便利なJavaScriptライブラリです。Vue.jsアプリでなくても、普通にindex.htmlから呼び出して利用することもできます。(参考: https://kita-note.com/leaflet-tutorial-1 )今回は、以下を入力します。 […]

  2. […] なJavaScriptライブラリです。Vue.jsアプリでなくても、普通にindex.htmlから呼び出して利用することもできます。(参考: https://kita-note.com/leaflet-tutorial-1 )今回は、以下を入力します。 […]