leaflet入門４｜地図にマーカーを表示する

Leaflet（1.3）を使ってマップにマーカーを表示します。

地図にお店の位置などを表示する際によく利用すると思います。

Demoはこちらです。

１．全体のコード

<!DOCTYPE html>
<html>
  <head>
    <title>Leaflet Demo4</title>
  	<meta charset="utf-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="">
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
    <style type="text/css">
     <!--
      #mapid { height: 400px; width: 600px}
    -->
    </style>
  </head>
  <body>
    <div id="mapid"></div>

    <script>
    	var mymap = L.map('mapid').setView([35.7102, 139.8132], 15);

      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    		maxZoom: 18,
    		attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '
    	}).addTo(mymap);

      var marker = L.marker([35.7101, 139.8107]).addTo(mymap);
      marker.bindPopup("<p>popup1</p><p>地図表示時に一緒に表示されます。</p>").openPopup();

      var marker2 = L.marker([35.7121, 139.8207]).addTo(mymap);
      var popup = L.popup();
      function onMarker2Click(e) {
          popup
              .setLatLng(e.latlng)
              .setContent("<p>popup2</p><p>clickで表示されます。</p>" + e.latlng.toString())
              .openOn(mymap);
      }
      mymap.on('click', onMarker2Click);

    </script>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Leaflet Demo4</title>

<!--

#mapid { height: 400px; width: 600px}

-->

</style>

</head>

<body>

var mymap = L.map('mapid').setView([35.7102, 139.8132], 15);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {

maxZoom: 18,

attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '

}).addTo(mymap);

var marker = L.marker([35.7101, 139.8107]).addTo(mymap);

marker.bindPopup("<p>popup1</p><p>地図表示時に一緒に表示されます。</p>").openPopup();

var marker2 = L.marker([35.7121, 139.8207]).addTo(mymap);

var popup = L.popup();

function onMarker2Click(e) {

popup

.setLatLng(e.latlng)

.setContent("<p>popup2</p><p>clickで表示されます。</p>" + e.latlng.toString())

.openOn(mymap);

}

mymap.on('click', onMarker2Click);

</script>

</body>

</html>

２．解説

地図を描画するまでの解説は、leaflet入門1に記載しています。

２−１．L.marker

マーカーを表示する場合は、L.marker を使用します。

表示する緯度経度を指定するだけでマーカーが表示できます。

var marker = L.marker([35.7101, 139.8107]).addTo(mymap);

1	var marker = L.marker([35.7101, 139.8107]).addTo(mymap);

２−２．popupの表示：bindPopup

マーカーを立てるだけでは、そのマーカが何を示しているのかが分かりにくいため、

マーカをクリック（タップ）した場合に、ポップアップを表示して追加の情報を表示します。

var marker = L.marker([35.7101, 139.8107]).addTo(mymap);
marker.bindPopup("<p>popup1</p><p>地図表示時に一緒に表示されます。</p>").openPopup();

1 2	var marker = L.marker([35.7101, 139.8107]).addTo(mymap); marker.bindPopup("<p>popup1</p><p>地図表示時に一緒に表示されます。</p>").openPopup();

marker.bindPopup でポップアップに表示する内容を指定します。

htmlのタグを使用できるため、比較的自由にメッセージのスタイルを指定することができます。

ただし、この指定の場合、地図表示時に一緒にポップアップも表示されます。

２−３．popupの表示：イベント

次は、マーカーをクリック（タップ）した場合のみ、ポップアップを表示する方法です。

クリック（タップ）した場合のみ表示するには、マーカーとクリックイベントを紐つける必要があります。

var marker2 = L.marker([35.7121, 139.8207]).addTo(mymap);
var popup = L.popup();
function onMarker2Click(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("<p>popup2</p><p>clickで表示されます。</p>" + e.latlng.toString())
        .openOn(mymap);
}
mymap.on('click', onMarker2Click);

var marker2 = L.marker([35.7121, 139.8207]).addTo(mymap);

var popup = L.popup();

function onMarker2Click(e) {

popup

.setLatLng(e.latlng)

.setContent("<p>popup2</p><p>clickで表示されます。</p>" + e.latlng.toString())

.openOn(mymap);

}

mymap.on('click', onMarker2Click);

まず、クリックイベントが発生した際に実行する関数（上記の例では、function onMarker2Click(e)）を定義します。

次に、クリックイベントと、実行する関数を紐つけます。

mymap.on(‘click’, onMarker2Click);

これだけで、クリック（タップ）した場合のみ、ポップアップを表示できるようになります。

また、イベントはクリック以外にもあり、詳細はこちらから参照することができます。

次回は地図に現在地を表示したいと思います。