leafletjs - переместить всплывающее окно на боковую панель

Question

Я играл с всплывающими окнами в сочетании с геойсоном, завернутым в JavaScript, и освоил то, что мне нужно сделать на фронте bindpopup. Теперь я хотел бы эффективно отвязать всплывающее окно с его маркера и получить всплывающее окно для отображения либо в боковой панели, либо под картой в своем собственном div.

Это код для моего текущего всплывающего окна, и я предполагаю, что мне нужно изменить свой код вокруг области layer.bindPopup (popupContent) и ссылаться на его собственный div?

<script> 
    var map = L.map('map').setView([51.4946, -0.7235], 11) 
    var basemap = 
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
     attribution: 'OSM data', 
    }).addTo(map); 

    function onEachFeature(feature, layer) { 
     var popupContent = "<b>" + feature.properties.ward_names + 
       " </b><br>Population 2011 = <b>" + feature.properties.census_11 + 
       " </b><br>Population 2001 = <b>"+ feature.properties.census_01 + 
       " </b><br>You can find out more about population data on the <a href='http://www.somewhere.com' target='_blank'>somewhere.com</a> website "; 

     if (feature.properties && feature.properties.popupContent) { 

      popupContent += feature.properties; 
     } 

     layer.bindPopup(popupContent); 

    } 
    L.geoJson([wardData], { 
     style: function (feature) { 
      return { weight: 1.5, color: "#000000", opacity: 1, fillOpacity: 0 }; 
      return feature.properties; 
     }, 
     onEachFeature: onEachFeature, 
    }).addTo(map); 
</script> 

Однако я не уверен, как это сделать и вам нужно руководствоваться.

веселит

Si

Answer 1

Ответ совместно под другой вопрос, https://gis.stackexchange.com/a/144501/44746

Если вы ищете заселение еще один элемент полностью, что вы определенный за пределами карты, то вы на самом деле не нужно даже всю информацию контроль. Вы можете так же легко сделать то, что вам нужно в файле onEachFeature >> layer.on >> щелкните также.

function onEachFeature(feature, layer) { 
    layer.on({ 
     click: function populate() { 
      document.getElementById('externaldiv').innerHTML = "BLAH BLAH BLAH " + feature.properties.name + "<br>" + feature.properties.description; 
     } 
    }); } 

В вашем HTML тела, вы просто должны убедиться, что ваш <div id="externaldiv"> или что-то находится там, где вы хотите.

Это демонстрационный населяет внешний, когда пользователь нажимает на карте особенность: http://labs.easyblog.it/maps/leaflet-geojson-list/

Answer 2

Класс L.Control является подходящим инструментом для того, что вы хотите сделать.

Я предлагаю вам следовать этому tutorial, он даст вам краткое представление о том, что вы можете с ним сделать.