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

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

Demoはこちらです。

全体のコード

解説

step1

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

step2

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

step3

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

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

step4

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

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

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

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

スポンサーリンク

シェアする

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

フォローする