1

I'm using Leaflet right now and I have issues on ordering a list of FeatureGroups. Each feature group is either an imageOverlay or a list of Features

I tried using bringToFront / bringToBack and it's working well with FeatureGroups containing a layer of imageOverlay but not with layers containing Features.

What am I missing ?

displayLayer(layer): void {
    const fg: L.FeatureGroup = L.geoJSON();

    if (layer.features !== null && layer.features.length > 0) {
      for (const sc of layer.features) {
        const feature = {};
        feature[`type`] = 'Feature';
        feature[`geometry`] = JSON.parse(sc.geometrie);

        const l: L.GeoJSON = L.geoJSON(JSON.parse(JSON.stringify(feature)));
        fg.addLayer(l);
      }
    } else {
      const bounds = JSON.parse(layer.bounds)
      const c1 = L.latLng(bounds.coordinates[0][1], bounds.coordinates[0][0])
      const c2 = L.latLng(bounds.coordinates[1][1], bounds.coordinates[1][0])
      const imgCalque = L.imageOverlay(layer.url, L.latLngBounds(c1, c2));

      fg.addLayer(imgCalque);
    }

    if (fg.hasLayer) {
      this.carte.addLayer(fg);
      this.visibleLayers.set(layer.id, fg);
    }
  }

bringToFront(layer): void {
    const fg = this.visibleLayers.get(layer.id);
    if (fg !== undefined) {
      fg.bringToFront();
    }
  }

  bringToBack(layer): void {
    const fg = this.visibleLayers.get(layer.id);
    if (fg !== undefined) {
      fg.bringToBack();
    }
  }

  • Without seeing your code and some more explanation on the basis of code any solution would be just guessing. – TomazicM Nov 27 at 10:53
  • Sorry, I updated my post. – Jérôme Nov 27 at 11:37
  • Code looks OK and should work. The only problem might be if there are several layers with the same id. – TomazicM Nov 27 at 15:39
  • It's working only on imageOverlay For some reason it's not working on the Features – Jérôme Nov 27 at 15:49
  • Have you checked layer.id of features? Is it different for different layers? – TomazicM Nov 27 at 16:56
0

If you want to store each Leaflet layer in this.visibleLayers by it's Leaflet internal unique id, you have to retrieve it from layer with L.Util.stamp method.

Also fg.hasLayer method is not used correctly. If you want to check existence of layers in fg group layers, you have to check fg.getLayers().length value.

Your code for adding layer to this.visibleLayers for later usage should the look something like this:

if (fg.getLayers().length > 0) {
  this.carte.addLayer(fg);
  this.visibleLayers.set(L.Util.stamp(fg), fg);
}

Then to bring it to the front:

bringToFront(layer): void {
    const fg = this.visibleLayers.get(L.Util.stamp(layer));
    if (fg !== undefined) {
      fg.bringToFront();
    }
  }

  • Sorry for not beeing clear. What I need is beeing able to sort FeatureGroups. One FeatureGroup contain either an imageOverLay or a collection of features of MultiPolygon. Each FeatureGroup is store in this.visibleLayers and has for key the id of my JSON object so I can retrive it later. – Jérôme Nov 28 at 10:29
  • To interact with the map I have on the side a list that displays for each row details informations of each feature group On click from the list I call bringToFront() and I pass the corresponding JSON object from the list. Then I retrive the corresponding FeatureGroup from this.visibleLayers using the JSON object id For some reason that I failed to identify it's not working on my collection of features of multipolygon. I hope it's more clear. Thank you for helping me – Jérôme Nov 28 at 10:29
  • Sorry, but amongst all your explanations I'm lost. If you publish all relevant code in your question, I'll at least understand what is happening. – TomazicM Nov 28 at 11:07
  • Ok but for you a map of FeatureGroups containing imageOverlays or multiple layers of Features can be ordered or not ? – Jérôme Nov 28 at 13:02
  • You can order layers and group layers, but you cannot order features within a group layer. – TomazicM Nov 28 at 13:12

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.