0

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

example

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 :

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 – GISKid Mar 29 '18 at 15:25
  • @GISKid i think is easy think but i stack now – Chris Papas Mar 29 '18 at 15:36
2

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;
  • 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()) } }); – Chris Papas Mar 29 '18 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. – Bill Chappell Mar 29 '18 at 16:29
  • can i download this code from Baseball.html ? – Chris Papas Mar 29 '18 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. – Bill Chappell Mar 29 '18 at 16:44
  • that i need is a very nice example thank you now i need to add my project – Chris Papas Mar 29 '18 at 16:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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