1

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.

  • Are there any error messages in the console (Developer Tools of your browser)? – Stefan Jan 17 at 17:23
  • PS.: Template literals (${resourcesFolderName}) need enclosing back ticks (`) rather than quotes. – Stefan Jan 17 at 18:50
  • Thanks Stefan. Changed the back ticks but it still doesn't work. And the console doesn't show any problem. – Laurent Jan 17 at 20:19
2

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

  • Thanks Bill ! I try to adapt your code but with no result so far. – Laurent Jan 17 at 20:22
  • You had it firing on a marker click function, try using/putting the layer on click in the onEachFeature function.That gets the specific feature you clicked on and sends it's attributes. getElementById("Rectangle").innerHTM "Rectangle" is an HTML ID right? A div or span tag with that ID? It's not the feature. – Bill Chappell Jan 17 at 20:30
  • Well, I'm not that good in JS. "Rectangle" is the the ID, yes. Should I put layerOnClick instead of markerOnClick ? How should my code look like ? – Laurent Jan 17 at 20:32
  • Look at my example link, right clcik on the page and view source. The html and JS are all there. My GeoJSON file is here. gistechsolutions.com/leaflet/DEMO/baseball/BaseBallFinal.json is you save it as BaseBallFinal.json and toss it in the same folder as the html file, it should work. The" layer.on('click', function (e) {" method work for markers , polygons, and polyline features. – Bill Chappell Jan 17 at 20:41
  • That's what I'm doing, Bill, thank you for all your good advice. But I'm afraid I'm terrible at coding. Your code is beautiful but with a different logic that the part of mine that works so far. I'd like to keep what I have and adapt your layer click to it. – Laurent Jan 17 at 20:48
1

You can access the Titre in the function onMarkerClick by referring to e.target.feature.properties.Titre (target is the marker).

Your updated function would look like this:

function markerOnClick(e) { 
    ...
    var newinnerContent = 'Title of the feature : ' + e.target.feature.properties.Titre;
    ...
};

PS.: I have just read the comments to Bill Chapell's answer where you already have figured it out. My answer should be seen as a short cut.

  • Tank you Stefan – Laurent Jan 17 at 21:45

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.