[GIS] Leaflet – How to show feature properties in a box that is not a popup

featuresgeojsonleafletmarkers

Popup giving features properties are interesting but I would like to make a side bar where properties of a clicked feature would show.

I've got the traditional code for displaying geojson features using jquery : 

 $.getJSON("${resourcesFolderName}/VergueParis.geojson",function(data){
        //Def icons
        var siteIcon = L.icon({
            iconUrl: '${resourcesFolderName}/eye.svg',
            iconSize: [30,30]
        }); 
        var siteIcon2 = L.icon({
            iconUrl: '${resourcesFolderName}/eye2.svg',
            iconSize: [30,30]
        });
        var siteIcon3 = L.icon({
            iconUrl: '${resourcesFolderName}/eye3.svg',
            iconSize: [30,30]
        });

        L.geoJson(data  ,{
            pointToLayer: function(feature,latlng){
             var marker = L.marker(latlng,{icon: siteIcon});
            marker.bindPopup('<img src="'+ feature.properties.Image +'" style="width:100%;height:100%;">'+ '<br/>' +'<img src="${resourcesFolderName}/Filet.svg" style="width:221px;height:10px;">' + '<br/>' + feature.properties.Titre + '<br/>' + feature.properties.Annee);
            return marker; 
            return L.marker(latlng,{icon: siteIcon});
            },
            //Change icon on Rollover
            onEachFeature: function(feature,layer)
            {
            layer.on("mouseover",function(e){
                layer.setIcon(siteIcon2)
            });
            layer.on("mouseout",function(e){
                layer.setIcon(siteIcon)
            });
            //End change on rollover
            }
        }).addTo(hypeDocument.map).on('click', markerOnClick);
    });

And the associated markerOnClick function : 

function markerOnClick(e) { 
        alert("hi. you clicked the marker at " + e.latlng);
        var newinnerContent = 'Title of the feature :';
        hypeDocument.getElementById("Rectangle").innerHTML = newinnerContent;
        hypeDocument.continueTimelineNamed('Rectangle', hypeDocument.kDirectionForward)
    };

Note : the 'Hype' reference relates to a software i'm using to create my map.

Alert function works and I'd like to display the feature property "Titre" just after the above phrase "Title of the feature :"

I tried different approaches but nothing works.

Any idea would be welcome.

Best Answer

I added a sidebar in html, and in the sidebar, placed an html table, I gave the cells an ID so I could place data from a click in them. 

  <div class="sidebar">
<p style="text-align:center; font-size: 24px; color:#175B81; font-weight:bold; "> Baseball</p>   
            <table  style="width:90%; ">
            <tr>
            <td id='pict' ALIGN='center'; > </td>
            <td id='pict2' ALIGN='center';> </td>
            </tr>
            </table></br> </br>

            <table  style="width:90%">
              <tr>
              <th align="left">League</th>
              <td id='f1'></td>
              </tr> <tr>
              <th align="left">Team</th>
              <td id='f2'></td></tr>
              <tr>
             <th align="left">Address</th>
              <td id='f3'></td>
              </tr> <tr>

Next in my onEachFeature function, I placed an on-click function, to take the feature attributes and place them into the appropriate cell by ID>

onEachFeature: function (feature, layer) {

                        layer.on('click', function (e) {

                            // get coordinates from GeoJSON
                            var coords = e.target.feature.geometry.coordinates
                            //pass coords to function to create marker.(Yellow circle)
                            onMapClick(coords);

                            //place attributes in panel table.
                                var fieldA=document.getElementById('pict');
                                fieldA.innerHTML='<img src="' +e.target.feature.properties.Logo +'">';
                                var fieldB=document.getElementById('pict2');
                                fieldB.innerHTML='<img src="' +e.target.feature.properties.LeagueLogo +'">';

                                var field1=document.getElementById('f1');
                                field1.innerHTML=e.target.feature.properties.League;
                                var field2=document.getElementById('f2');
                                field2.innerHTML=e.target.feature.properties.Team;
                                var field3=document.getElementById('f3');

If you like JQuery you can replace some of the above code with something like this:

$('#f1').html(e.target.feature.properties.League);

Below is a working example.

http://www.gistechsolutions.com/leaflet/DEMO/baseball/BaseballPanel.html

Related Question