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) {


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 :

example 2

Any idea what change I need about this tasks ?

  • 1
    This is more of a stackoverflow type question imo, may also be good to post a reproducible example using jsfiddle.net
    – GISHuman
    Mar 29, 2018 at 15:25
  • @GISKid i think is easy think but i stack now Mar 29, 2018 at 15:36

1 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>
      <th align="left">Common Name</th>
      <td id='f1'></td></tr>  <tr>
      <th align="left">Location ID</th>
      <td id='f2'></td> 

layer.on('click', function (e) {
    var field1=document.getElementById('f1');
    var field2=document.getElementById('f2');
  • thank you for helpe me i try to follow your details but in f1 don't show me somethink any idea why ? here the code : onEachFeature:function (feature,layer) { var field1=document.getElementById('f1'); field1.innerHTML=e.target.feature.properties.toString(); layer.bindPopup(feature.properties.kalcode.toString()) } }); Mar 29, 2018 at 16:20
  • My table has an id tag, the first cell it writes to is called f1, In the onEachFunction, I setup a layer.on click function an inside that I grab the values and using a document.getElementById('f1') I send the value to the f1 cell. Here is an example using a div side panel. gistechsolutions.com/leaflet/DEMO/baseball/Baseball.html The two lines in the JavaScript can be shortened to document.getElementById('f1').innerHTML=e.target.feature.properties.kalcode.toString(); That might help. Mar 29, 2018 at 16:29
  • can i download this code from Baseball.html ? Mar 29, 2018 at 16:41
  • Sure right click on it view source. Copy/paste to a text file, save as html. For the data go to gistechsolutions.com/leaflet/DEMO/baseball/BaseBallFinal.json and copy paste to a text file, save as BaseBallFinal.json. Place both in your web folder and it should work. Mar 29, 2018 at 16:44
  • that i need is a very nice example thank you now i need to add my project Mar 29, 2018 at 16:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.