🗺️

Leafletの使い方 #2 マーカーとポップアップを表示する

2022/11/04に公開約1,400字

前回の記事で、Leafletで地図を表示することができました。
今回は、その地図に、マーカーを表示してみたいと思います。

マーカーを表示するコード

地図上でマーカーを表示するには、Javascriptに以下のコードを追加します。

main.js
L.marker([34.706460,135.195638]).addTo(map);

これだけでマーカーを表示できます。
簡単に解説します。

L.marker([34.706460,135.195638]).addTo(map);

L.markerで、「マーカーを表示するぞ!」と宣言します。
()の[]内に、マーカーを表示する座標を記入します。
最後に、.addTo(map);で、地図へ追加するという形です。

(大雑把で申し訳ありませんが大体こんな感じです。)

なお、マーカーを複数表示する場合は、以下のように、単純にこれを座標だけ変えて複数書けば良いです。

main.js
L.marker([34.706460,135.195638]).addTo(map);
L.marker([34.709880,135.193877]).addTo(map);
L.marker([34.717223,135.186767]).addTo(map);

マーカーにポップアップを表示する

マーカー上にポップアップを表示します。

クリックでポップアップを表示する

マーカー上でクリック(タップ)すると、マーカーの上にポップアップが表示されます。

main.js
L.marker([34.706460,135.195638]).addTo(map).bindPopup("新神戸駅");

クリックでポップアップを表示するには、L.markerのaddTo(map)の後に、.bindPopup("")を追加します。

最初からポップアップを表示する

main.js
L.marker([34.709880,135.193877]).addTo(map).bindPopup("布引の滝").openPopup();

クリックしなくても、最初からポップアップを表示させるようにするには、.bindPopup("")の後に、.openPopup()を追加します。
なお、.openPopup()の()には何も入れません。

ポップアップにはHTMLも使える

ポップアップ内の文字列には、HTMLを使うこともできます。

main.js
L.marker([34.717223,135.186767]).addTo(map).bindPopup("<p>市ケ原<br>ただの河原ですがトイレがありキャンプできます。</p>");

以上がLeafletでマーカー・ポップアップを表示する基本的な方法でした。
今回のコードのデモは下記から閲覧できます。
http://kei425h.starfree.jp/demo/leaflet/leaflet-demo-2.html

最後まで読んでいただきありがとうございました。

Discussion

ログインするとコメントできます