【Leaflet】 マップ上にマーカーを配置する

はじめに

 サイトやブログで相手に場所を伝えるとき、記事内にマップを埋め込むと効果的ですが、そういった場合にはマーカーを配置すると分かりやすいです。そこで今回は、Leaflet でマーカーを配置する方法についてまとめたいと思います。

DrawTrail

図1. マーカーの配置

マーカーの配置

 マップ上にマーカーを追加するには、次のように記述します。

L.marker([緯度,経度]).addTo(map);

 しかしこのままだと、マップ上にマーカーが配置されるだけなので、マーカーを長押し(右クリック)すると、別ウインドウで Google Maps が開くようにしてみます。

L.marker([緯度, 経度])
    .on('contextmenu', function(e){
        window.open( "https://www.google.co.jp/maps/place/"+e.latlng.lat+","+e.latlng.lng+"/@"+e.latlng.lat+","+e.latlng.lng+",15z/data");
    }).addTo(map);

 長押し(右クリック)のようなイベントは他にもあり、代表的なものを以下にまとめます。

項目内容
clickマーカーをタップ(クリック)した時に発火
dblclickマーカーダブルクリックした時に発火
contextmenuマーカーを長押し(右クリック)した時に発火
mouseoverマウスをマーカーにかざしたときに発火
mouseoutマウスがマーカーから離れたときに発火
表1. マーカーイベント

 例えばマーカーをクリックすると別ページにジャンプするようにしてあげると、旅ブログやグルメブログなどは見やすくなって良いかもしれません。プラグインも多いので、いろいろとカスタマイズしていくのも面白そうです。

実装例

 全体のソースコードと実装例は次のようになります。

<!DOCTYPE html>
<html>
<head>
<title>htmlMap</title>
<meta http-equiv='content-type' charset='utf-8'>
<meta name='viewport' content='width=device-width'>
</head>
<body>
<!-- 埋め込みマップのdivタグ。マップサイズはwidth(幅)とheight(高さ)で決まる -->
<div id='mapcontainer' style='width:100%; height:300px; z-index:0;'></div>

<!-- 以下LeafletのJavaScriptとCSS -->
<link rel='stylesheet' href='https://unpkg.com/leaflet@1.3.0/dist/leaflet.css' />
<script src='https://unpkg.com/leaflet@1.3.0/dist/leaflet.js'></script>

<script>
function init_map() {

    var map = L.map('mapcontainer');
    map.setView([39.198, 138.603], 4); //初期の中心位置とズームレベルを設定

    //マップタイルを読み込み、引用元を記載する
    L.tileLayer('http://tile.openstreetmap.jp/{z}/{x}/{y}.png', 
        {attribution: "<a href='http://osm.org/copyright'> ©OpenStreetMap </a>"}).addTo(map);
    
    //マーカーの配置
  L.marker([35.301, 136.138])
       .on('contextmenu', function(e){
           window.open( "https://www.google.co.jp/maps/place/"+e.latlng.lat+","+e.latlng.lng+"/@"+e.latlng.lat+","+e.latlng.lng+",15z/data");
       }).addTo(map);
}
    //ダウンロード時に初期化する
    window.addEventListener('DOMContentLoaded', init_map());

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

 実装例

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です