Leaflet入門５｜地図に現在地を表示する

Leaflet（1.3）を使ってマップに現在地を表示します。

Demoはこちらです。

１．全体のコード

<!DOCTYPE html>
<html>
  <head>
    <title>Leaflet Demo5</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');

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

      function onLocationFound(e) {
          L.marker(e.latlng).addTo(mymap).bindPopup("現在地").openPopup();
      }

      function onLocationError(e) {
          alert("現在地を取得できませんでした。" + e.message);
      }

      mymap.on('locationfound', onLocationFound);
      mymap.on('locationerror', onLocationError);

      mymap.locate({setView: true, maxZoom: 16, timeout: 20000});

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

<!DOCTYPE html>

<html>

<head>

<title>Leaflet Demo5</title>

<!--

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

-->

</style>

</head>

<body>

var mymap = L.map('mapid');

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

maxZoom: 18,

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

}).addTo(mymap);

function onLocationFound(e) {

L.marker(e.latlng).addTo(mymap).bindPopup("現在地").openPopup();

}

function onLocationError(e) {

alert("現在地を取得できませんでした。" + e.message);

}

mymap.on('locationfound', onLocationFound);

mymap.on('locationerror', onLocationError);

mymap.locate({setView: true, maxZoom: 16, timeout: 20000});

</script>

</body>

</html>

２．解説

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

２−１．locationfound

位置情報の取得が成功した際の、イベントを登録します。

コードでは、locationfoundイベントにonLocationFound関数を登録しているため

位置情報の取得が成功した場合に、onLocationFound関数が実行され

現在位置にマーカーが表示されます。

function onLocationFound(e) {
    L.marker(e.latlng).addTo(mymap).bindPopup("現在地").openPopup();
}
mymap.on('locationfound', onLocationFound);

function onLocationFound(e) {

L.marker(e.latlng).addTo(mymap).bindPopup("現在地").openPopup();

}

mymap.on('locationfound', onLocationFound);

２−２．locationerror

位置情報の取得が失敗した際の、イベントを登録します。

コードでは、locationerrorイベントにonLocationError関数を登録しているため

位置情報の取得が失敗した場合に、onLocationError関数が実行され

アラートメッセージ、「現在地を取得できませんでした」が表示されます。

function onLocationError(e) {
    alert("現在地を取得できませんでした。" + e.message);
}
mymap.on('locationerror', onLocationError);

function onLocationError(e) {

alert("現在地を取得できませんでした。" + e.message);

}

mymap.on('locationerror', onLocationError);

２−３．locate

geo api を実行します。

成功した場合、locationfoundイベントを実行します。

失敗した場合、locationerrorイベントを実行します。

２−４．https

locateを使用する位置情報の取得は、httpsの環境でしか動作しないブラウザもあります。

そのため、サイト自体がhttpsであることはもちろん、読み込んでいる外部リソース（例えば地図のタイル情報の読み込み先URL）もhttpsである必要があります。

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

1	L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

httpsではない場合、位置情報の取得に失敗します。

次回はマップ表示時ではなく、「現在地を取得」ボタンを押した際に位置情報を取得してみたいと思います。