読者です 読者をやめる 読者になる 読者になる

LeafletのIControlについて

この投稿は、FOSS4G 二個目だよ Advent Calendar 2015 - Qiita の8日目の記事です。
monomotiです。
8日目が埋まってないけど(*1)、諦めないで!ってことで極小ネタを。

Leaflet v0.7(*2)で、例えば、クリックした点の座標をLeafeltのIControlに表示しようと、こういうものを作ったとして、

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>

  <script src='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.js'></script>
  <link href='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.css' rel='stylesheet' />
  <style type="text/css">
  html,body,#map-container, #map{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    cursor: pointer;
  }
  #map-container .center-icon{
    font-size:40px;
    color:#f00;
    position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-20px;
    z-index:9999;
  }
  .info-container{
    background-color:#ccc;
    width:200px;
    height:70px;
    padding:10px;
    overflow: auto;
  }
    
  </style>
</head>
<body>

  <div id="map-container">
    <div id="map"></div>
    <div class="center-icon">+</div>
  </div>

  <script type="text/javascript">
    L.mapbox.accessToken = "とーくん";
    var map = L.mapbox.map('map', 'mapbox.streets');

    var InfoControl = L.Control.extend({
      options:{position:"topright"},
      onAdd:function(){
        container = L.DomUtil.create('div',"info-container");
        container.innerHTML = "POSITION:<div id=\"position\">";

        return container;
      }
    });

    var info_control = new InfoControl();
    map.addControl(info_control);
    var posDiv = document.getElementById("position");
    map.on("click",function(e){
      posDiv.innerText = e.latlng.toString();
    },this);

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

f:id:monomoti:20151208152841j:plain

Controlに表示された座標をコピーしようとすると、
f:id:monomoti:20151208152959j:plain
地図のクリックイベントが発火して座標が変わっちゃうし、ドラッグもされちゃう!

こんなときは、こうします。

    var InfoControl = L.Control.extend({
      options:{position:"topright"},
      onAdd:function(){
        container = L.DomUtil.create('div',"info-container");
        container.innerHTML = "POSITION:<div id=\"position\">";

        L.DomEvent.on(container,"click",L.DomEvent.stopPropagation);    //ここ
        L.DomEvent.on(container,"mousedown",L.DomEvent.stopPropagation);    //ここ
        L.DomEvent.on(container,"dblclick",L.DomEvent.stopPropagation);    //ここ
        L.DomEvent.on(container,"mousewheel",L.DomEvent.stopPropagation);    //ここ

        return container;
      }
    });

どうでもいいネタですみません!

*1:全くの杞憂でした...。暫くして凄い方々が次々と記事を投稿されていますね。恥ずかしい...。

*2:mapbox.jsを使っていますが