リーフレットのサイドバーの動的コンテンツ

Question

sidebar pluginでマップを作成しようとしています。私は多くのマーカーとプラグインを "デモの例"から作成することができますが、各マーカーの属性を別々に表示するスライドバーに "ダイナミック"コンテンツを作成する方法はわかりません。

私の簡単なコード：

<script> 
var map = L.map('map'); 

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
    maxZoom: 18, 
    attribution: 'Map data &copy; OpenStreetMap contributors' 
}).addTo(map); 

var sidebar = L.control.sidebar('sidebar', { 
    closeButton: true, 
    position: 'left' 
}); 
map.addControl(sidebar); 
sidebar.setContent('aaaaaaa'); 

setTimeout(function() { 
    sidebar.show(); 
}, 500); 
var marker = L.marker([49.46, 17.11]).addTo(map).on('click', function() { 
    sidebar.toogle() 
    marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup(); 
sidebar.setContent('aaaaaaa'); 

    map.on('click', function() { 
     sidebar.hide(); 
    }); 
}); 

map.setView([49, 17], 5); 

Answer 1

手動でコンテンツを作成し、サイドバーを更新するたびに、データの変更、this exampleをチェックする必要があります。

まず、あなたのデータを更新する関数を作成し、あなたはすべての層を得るためにmap.eacheLayerを使用することができ、このような何か：

function updateDataInSidebar() { 
    var newData = '<div id="layer-data">'; 
    map.eachLayer(function (layer) { 
     if (layer.options.id) { 
      newData += 'Marker' + layer.options.id + '<br />'; 
     } 
    }); 
    sidebar.setContent(newData + '</div>') 
} 

あなたはこのように、オプションで任意のデータを保存することができます

marker = createMarker(lat, lng); 
marker.options.id = '123'; 

を

オプションに格納されたデータを使用してサイドバーにデータを入力し、マーカーの現在の位置を取得することができます。getLatLng;