1

I am having trouble getting my GeoJSON data to appear on my sidebar when I click on a marker?

As right now, I am able to click on a marker and make the sidebar appear, but without any information.

Below is the line of code I am using:

var aLayer = L.geoJson(GeoJSON, {      
    });

aLayer.on('click', function () {
        sidebar.toggle();
        $('Name').innerHTML = "Name: " + feature.properties.name;
    });

My real issue is that I can't figure out how to call the GeoJSON properties when I click on the marker. I am keeping getting this error when I check the console log: feature is not defined. I tried using the code that is provided in this page,Leaflet Sidebar - set content depending on clicked GeoJSON feature, but I can't get it to work.

  • Which version of leaflet are you using and what's the problem with the code you are referencing. – Francisco Puga May 6 '17 at 8:18
1

The correct path, at least as of leaflet v.1.3.1, is e.layer.properties.name.

aLayer.on('click', function (e) {
        sidebar.toggle();
        $('Name').innerHTML = "Name: " + e.layer.properties.name;
    });

Edit: Even I'm finding this stuff a bit unpredictable. The way I found out for this time was, by console.log'ing everything and exploring around in the console.

aLayer.on('click', function (e) {
        console.log(e);
    });

Then through exploring in the browser console (Ctrl+Shift+J) and trial and error, found my way to e.layer.properties.name. When I saw my other scripts again recently I found the path there was different! Perhaps it changes based on the nature of the layers.

0

First, check you using the correct jquery selector, probably $('#Name') instead of $('Name')

Then use the parameter of the callback function to get the event, and check its properties. Probably something like this will work:

aLayer.on('click', function (e) {
  sidebar.toggle();
  var name = e.target.feature.properties.name
  $('#name').innerHTML = "Name: " + feature.properties.name;
});
  • Hello, thanks for the help, but I still could not get the information from the GeoJSON to appear on the sidebar. I changed the jquery selector to $('#Name') since I have Name as an id in my html. I am not sure if this information will help, but I am using Leaflet Sidebar version one. I am trying to call my GeoJSON layer's feature.properties every time I click on the marker on my web map. – user85586 May 7 '17 at 2:31
  • e.target doesn't have any properties under it. – Nikhil VJ Feb 25 '18 at 15:48
  • I found the right path.. as of leaflet v.1.3.1 at least.. it's e.layer.properties.name – Nikhil VJ Feb 25 '18 at 16:53
  • The layer property in an object event is deprecated for some events. leafletjs.com/reference-1.3.0.html#event-layer. target should be always present in a leaflet event and represents the object that fired the event. – Francisco Puga Feb 26 '18 at 8:20
0

The sidebar example populates the sidebar html :

sidebar.html('..............');

Where is the name div located? Maybe you should try something like:

aLayer.on('click', function (e) {
    sidebar.toggle();
    sidebar.html('<div id="name"> Name: ' + e.target.feature.properties.name + ' </div>') ;
});
  • This doesn't work on my end. e.target object doesn't have any properties etc. – Nikhil VJ Feb 25 '18 at 15:48

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.