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

Contents

1 はじめに
2 マーカーの配置
3 実装例

はじめに

　サイトやブログで相手に場所を伝えるとき、記事内にマップを埋め込むと効果的ですが、そういった場合にはマーカーを配置すると分かりやすいです。そこで今回は、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://{s}.tile.openstreetmap.org/{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>

　実装例