3

I want to move features up and down inside a vector layer, with OpenLayers 3.

I have two features: red & blue.

As you can see im the first image, blue is over the red feature.

blue over red

Moving red up would mean that it would be pulled to the front, thus showing the whole red feature, and hiding part of blue. See the second image.

red over blue

So, now, red would have been moved up!

I have noticed that the uppermost feature blue is at the top because it is created after red. So, there is probably some kind of order option inside the feature itself. I have searched but I haven't found it, yet.

I want to change the order AFTER initialization. For example, by doing vector.moveFeatureUp(red);

Could you please help me understand how to move features up and down?

I POSTED A SOLUTION AS AN ANSWER!

3
  • Isn't it just here that it changes : vector.getSource().addFeatures([blue, red]); > vector.getSource().addFeatures([red, blue]); ? Sorry if i misunderstand your question.
    – gisnside
    Commented Aug 17, 2016 at 10:45
  • No. I tried it. But I want to change the order AFTER initialization. For example, by doing vector.moveFeatureUp(red);
    – joaorodr84
    Commented Aug 17, 2016 at 10:47
  • 1
    For the latest version 7.4, this can be achieved with feature.setZIndex method. See this example: openlayers.org/en/latest/examples/layer-z-index.html Commented Jun 3, 2023 at 3:37

2 Answers 2

4

After Hicham Zouarhi's tip about the ID, I realized that the ordered the features are drawn depending on the closure_uid_xxx property. See an instance of ol.Feature in the image below.

closure_uid_xxx

This uid property changes on reload. So I looked where it came from:

  1. I used the ol-debug.js file, that has the google closure library included.
  2. I found goog.UID_PROPERTY_ and saved it as my own local variable closurePropertyUid
  3. I created a getFeatures function that fetches the features by order of closurePropertyUid
  4. I created a function that swaps the UIDs of two features
  5. Now, the moveFeatureUp function works without errors

Try it out in this updated CodePen (now with 3 features)

2

you can retrieve the feature and push it again in the source:

function moveFeatureUp(feature){
    var tmp=feature.clone();
    vector.getSource().removeFeature(feature);
    vector.getSource().addFeature(tmp);
}

Edit: I think the problem was with the id of the features, now I tried it in your codepen and it works, note that clone() copy the feature without its id so it is possible to push it to the end of the Features array in the source

7
  • It does not work. Please, check out the updated CodePen in my question.
    – joaorodr84
    Commented Aug 17, 2016 at 11:42
  • @joaorodr84 I edited my answer, it was an id problem Commented Aug 17, 2016 at 13:31
  • Your solution throws errors. But, it gave me ideas and I found a solution. I posted it as an answer. Thanks for the tip! :)
    – joaorodr84
    Commented Aug 18, 2016 at 0:59
  • @joaorodr84 you're welcome :) , I checked your updated codepen, It takes 2 clicks on the button to move a feature up ( ex: to move red up when green is on the top) it moves the feature just 1 step up, I would like to know what errors is thrown in my answer, please, since it worked fine on the codepen Commented Aug 18, 2016 at 7:43
  • 1) When the feature is already at the top, and you click moveUp, it throws an error as you can see here. 2) I chose not to use clone because I wanted to keep the reference to the feature. I wanted to avoid creating new features. 3) It takes 2 clicks because the moveUp function performs only one move at a time. That is exactly what I wanted. ... Thanks again! :)
    – joaorodr84
    Commented Aug 18, 2016 at 13:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.