Leaflet - access specific polyline feature (GeoJSON)?

Question

The situation: My web application shows a map with different trails of interest (my so called POIs) and a sidebar with information about each POI. Selecting a panel of the sidebar, the related POI should be selected/highlighted on the map.

Data and platforms used: I work with Leaflet and JavaScript, no jQuery. The data are added within Leaflet as GeoJSON. The trails are represented as polylines, but I call them POIs (just to clarify). I do not and cannot use jQuery.

What works: The trails (polylines) are added like this:

var pois = L.geoJson(pois, 
{
  style: style_pois,
  onEachFeature: onEachFeature
 });
 pois.addTo(map);

function onEachFeature(feature, layer)
{
layer.on('click', function (e)
{
    sidebar.open('pois');

    //get the ID of the clicked POI
    number = feature.properties.number;

    //Open the accordion tab
    var panel = document.getElementsByClassName('accordion-panel');
    panel[number-1].style.display="block";

    //highlight the selected POI
    var selectedFeature = e.target;
    selectedFeature.setStyle(style_pois_selected);
}); 
}

What does not work: Selecting a panel of the accordion, I get the ID of the related trail (polyline), but I cannot access and highlight this certain polyline feature within Leaflet.

This is the JavaScript code, where the accordion behavior is controlled:

var acc = document.getElementsByClassName('accordion');
var panel = document.getElementsByClassName('accordion-panel');

for (var i = 0; i < acc.length; i++) 
{
(function(index){
    acc[i].onclick = function()
    {           
        // Toggle between adding and removing the "active" class,
        //to highlight the button that controls the panel 
        this.classList.toggle("active");

        //Toggle between hiding and showing the active panel
        var panel = this.nextElementSibling;
        console.log("panel " + acc[0]);

        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
        var myIndex = index + 1;
        alert("INDEX " + myIndex);
    }
})(i);
}

Question: Is there a possibility, based on a layer that is included as GeoJSON in Leaflet to access a certain feature based on any property?

What I tried: I only came across solutions where the different behavior of a certain polyline is accessed within the onclick function. There it is easily possible to apply another color (setStyle). I need to access it from outside the layer. I already tried to again load the pois layer as I did above, just inside the accordion JavaScript and filter it for the certain ID so that only the one polyline is represented, but it only gave me an error that it is an invalid GeoJSON object (maybe a scope issue?).

I appreciate any help!

score 1 · Answer 1 · answered Jun 28 '17 at 06:51

For anyone who might come across the same problem - I found a solution.

I looked for hours to find out, if one can access a specific feature from a GeoJSON layer within Leaflet, but it seemed that there is no such method.

Although there is no official method for it, for me worked the following. When inside the accordion, one can just access the already loaded GeoJSON dataset, in my case pois and get the layer (this actually gets the feature, not the layer! a bit misleading) at the index position. For this one, a style can then be applied.

pois.getLayer(index).setStyle(style_pois)

To read out the index of the clicked accordion panel, I asked another question and was pointed in the right direction: Simple JavaScript accordion - how to get the index of the clicked panel?

score 0 · Answer 2 · answered Jun 27 '17 at 16:44

0

NOTE: I'd recommend you to set some JFiddle to reproduce your problem.

A solution I often use is to set the ID/Class property in each of the markers/points:

$.getJSON("data/displacement.geojson", function(data){
    pathsLayer = L.geoJson(data,{
        className: function(feature){ //Sets the class on element
            //Assuming your JSON has a property called ID
            return "ID-" + feature.properties.ID;
        },
        style: function (feature) {
            //If needed, you can also set style based on properties
        },
    })
});

After that you can set a global variable to keep record of the selection ID, and then use it to select and modify the specific element. Since Leaflet uses SVG elements, I recommend you to use D3.js to select/modify elements, for instance:

var selectedID = null; //Declare global variable

// You modify selectedID by actions on sidebar, e.g.:
selectedID = 001

d3.select(".ID-" + selectedID)
    .transition() //You can set easily transitions on attribute changes
    .duration(1000) // in ms
    .attr("attributeName", "attributeValue");

You can find an example here (although I know is a bit tricky to read using View Page Source (Ctrl + U))

answered Jun 27 '17 at 16:44

Camilo

169
1
19

my data (polylines btw) have an ID. The problem is that although I have the ID of the certain polyline feature, I cannot access it. – the_chimp Jun 27 '17 at 17:56
It'd be better if you upload some JSFiddle to have a look on your code. In any case, you must first have to set the class to each polilyne (based on the JSON properties) before you can select them, that's why I included the `className: function(feature)` line. – Camilo Jun 27 '17 at 18:07
Assuming that I set the className for each feature - how does the line d3.select() work?, what is d3? In my case the GeoJSON layer is pois, but pois.select results in an error that "select" is not defined for pois. – the_chimp Jun 27 '17 at 19:45
1. D3.js is a JavaScript library to manipulate documents based on data by using HTML, SVG and CSS. Since leaflet library renders the elements on map as SVG elements, then you can use d3 to manipulate those elements. You can find an introductory example [here](http://bl.ocks.org/d3noob/9267535). A good point to start with D3 is to have a look on [this workshop](http://duspviz.mit.edu/d3-workshop/). 2. To learn a bit more on d3 selections you can check [this article](https://bost.ocks.org/mike/selection/) by M. Bostock. 3. select() is not a valid method of the JSON object, so you can't use it. – Camilo Jun 27 '17 at 21:19
I tried to implement it with D3, but I cannot get it to work. Does Leaflet provide a possibility to access individual features of a GeoJSON layer? – the_chimp Jun 28 '17 at 06:01

Leaflet - access specific polyline feature (GeoJSON)?

2 Answers2