リーフレット：L.ImageOverlayのようなHTMLブロックを設定する

Question

リーフレットマップにhtmlマークアップを埋め込んだimageOverlayのようなレイヤーを設定することはできますか？たぶんプラグインで？ ポップアップで設定しようとしましたが、X座標とY座標をより詳細に制御する必要があります。それは私の場合の解決策ではありません。

Answer 1

あなたはリーフレットを拡張やプラグインを作成し、source code for L.ImageOverlayを見ている方にLeaflet tutorialsを読めば、答えは非常に簡単になり：

L.HtmlBlockOverlay = L.ImageOverlay.extend({ 
    initialize: function(bounds, options) { 
    return L.ImageOverlay.prototype.initialize.call(this, null, bounds, options); 
    }, 

    _initImage: function() { 
    var block = this._image = L.DomUtil.create('div', 'leaflet-image-layer' + 
               (this._zoomAnimated ? ' leaflet-zoom-animated' : '')); 

    if (this.options.className) { L.DomUtil.addClass(block, this.options.className); } 
    block.innerHTML = this.options.html; 
    } 
}); 


var blockOverlay = new L.HtmlBlockOverlay(bounds, { 
    html: 'Hello world!', 
    className: 'hello-world-box' 
}).addTo(map); 

はworking exampleを参照してください。