Leaflet Quick Start Guide: マーカーの追加

本ページは，leaflet のチュートリアルの Leaflet Quick Start Guide を日本語で簡単にまとめたものである．本ページではブラウザ上に表示した地図上にマーカーなどを表示することを行う.

表示方法

マーカー: 緯度経度を指定.

var marker = L.marker([51.5, -0.09]).addTo(mymap);

サークル: 緯度経度だけでなく，色や半径なども指定する.

var circle = L.circle([51.508, -0.11], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 500
}).addTo(mymap);

ポリゴン: 頂点の緯度経度を指定.

var polygon = L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
]).addTo(mymap);

ポップアップ: マーカー，サークル，ポリゴンのそれぞれに対して，bindPopup メソッドを適用.

marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");

また，クリックした箇所でポップアップを表示する場合は以下のようにする．

function onMapClick(e) {
    alert("You clicked the map at " + e.latlng);
}
mymap.on('click', onMapClick);

まとめ

以下のような HTML を作成すると，松江高専付近の地図にマーカー，サークル，ポリゴンが表示されるはずである． <URL:leaflet-samples/> の leaflet-02.html をダウンロードして用いてみよ．

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex" />
  <title>Leafletチュートリアル</title>

  <!-- Leaflet's CSS -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
        integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
        crossorigin=""/>

  <!-- Leaflet JavaScript file -->
  <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
          integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
          crossorigin=""></script>
  <style>
    #mapid { height: 600px; }
  </style>
</head>
<body>
<div id="mapid"></div>

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

  // データソースは国土地理院
  L.tileLayer(
      'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',  {
          attribution: '&copy; <a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">地理院タイル</a>'
      }).addTo(mymap);

  // マーカー追加
  var marker = L.marker([35.495897, 133.025808]).addTo(mymap);

  // サークル追加
  var circle = L.circle([35.494709, 133.031387], {
       color: 'red',
       fillColor: '#f03',
       fillOpacity: 0.5,
       radius: 200
  }).addTo(mymap);

  //ポリゴン追加
  var polygon = L.polygon([
       [35.498832, 133.016195],
       [35.497155, 133.013835],
       [35.492543, 133.016238],
       [35.495198, 133.020058]
  ]).addTo(mymap);

  //クリックした場所の緯度経度表示
  function onMapClick(e) {
      alert("You clicked the map at " + e.latlng);
  }
  mymap.on('click', onMapClick);

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