Django Leaflet – Custom Popups Implementation Guide

Question

I use some django project with PostGIS for database and leaflet map.
I have add simple leaflet popups like this :

and here the snippet code to call popups :

onEachFeature:function (feature,layer) {
    layer.bindPopup(feature.properties.kalcode.toString())

}

but because I want to show more details from my fields I want to add one more html popups left down of map popups like this image :

Any idea what change I need about this tasks ?

Answer 1

Basically you want to put a div there, then using HTML create a table, Then with the layer.on('click') event populate the layer with the feature attributes.

 <div class="sidebar">
    <h3 style="text-align:center;">Bird Map</h3>
    <table>
      <tr>
      <th align="left">Common Name</th>
      <td id='f1'></td></tr>  <tr>
      <th align="left">Location ID</th>
      <td id='f2'></td> 
      </tr> 
    </table>
  </div> 

layer.on('click', function (e) {
    var field1=document.getElementById('f1');
    field1.innerHTML=e.target.feature.properties.COMMON_NAM;
    var field2=document.getElementById('f2');
    field2.innerHTML=e.target.feature.properties.LOCALITY_I;