L.GridLayerでコピペ可能なタイル座標の表示

※この投稿は、FOSS4G 二個目だよ Advent Calendar 2016 - Qiitaの12月7日分の記事です。

国土地理院のタイル座標確認ツールって便利ですよね。
このタイル座標をタイル上で選択してコピーできたらいいなと思って自分でも作ってみました。

こんな風に書きゃいいのかなと思っていたんですが、そもそも下記tile要素にはclickイベントなんか無いんで、mapのイベントをキャンセルできないんですよね。

var GridLayerClass = L.GridLayer.extend({
    createTile: function(coords){
        var tile = L.DomUtil.create('div', 'leaflet-tile mytile');
        var coordsContainer = L.DomUtil.create('ul', 'mycoords',tile);

        coordsContainer.innerHTML = "<li>こっちは選択できない</li>"
            + "<li>z/x/y:&nbsp;<input type=\"text\" value=\" "+ coords.z + "/" + coords.x + "/"  + coords.y  +  " \" ></li>";

        L.DomEvent.on(coordsContainer,"click",L.DomEvent.stopPropagation);
        L.DomEvent.on(coordsContainer,"mousedown",L.DomEvent.stopPropagation);
        L.DomEvent.on(coordsContainer,"dblclick",L.DomEvent.stopPropagation);
        L.DomEvent.on(coordsContainer,"mousewheel",L.DomEvent.stopPropagation);

        return tile;
    },

});