7

I have an Openlayers 3 app and users can retrieve stored routes from a web service and display them on a map. Currently each route is added to the top of the index but I'd like them to be inserted into an existing Layer Group.

I've tried using these to methods so far but to no avail:

var collection = map.getLayerGroup(plannerLayers);
collection.push(loadedRoute);

map.addLayer(loadedRoute); // this is the only method which works

map.getLayerGroup(plannerLayers).addLayer(loadedRoute);

Layer management in general is something I seem to be struggling with and ideally I'd like to just be able to interrogate the map for vector layers and add discrete functionality to them. Is there a way to programmatically add/remove layers to a group or even move between groups?

4 Answers 4

5

For anyone else that might come across this problem, it turns out (quite obviously to some) that because a Layer Group is an Object containing other Objects but also an array of Objects, this must be identified and the new layer can then be pushed into this. Example below:

/*********************/
/* Get Planner Group */
/*********************/
function getPlannerGroup() {
    var layers = map.getLayers();
    var length = layers.getLength(), l;
    for (var i = 0; i < length; i++) {
        l = layers.item(i);
        var lt = l.get('title');
        // check for layers within groups
        if (lt === 'Planner') { // Title of Group
                if (l.getLayers) {
                var innerLayers = l.getLayers().getArray();
                return innerLayers;
                }
        }
    }
}

...

var collection = getPlannerGroup();
collection.push(loadedRoute);

I hope this helps anyone looking to do something similar ;)

4

Here is what I think is the easiest and shortest way to add a Layer to LayerGroup.

First add a "group" to the Map, let's call it markerGroup

markerGroup = new ol.layer.Group({
                layers: [],
                name: 'markerGroup'
            });

var map = new Map({
        target: 'map',
        layers: [ this.markerGroup ]})

// Get the Layer you want to edit, it can be a variable or directly part of the map
// I prefer storing my markers in a variable
this.markerGroup.getLayers().array_.push(vectorLayer)
// this.map.get("markerGroup").getLayers() should return the same array

this.map.removeLayers(this.markerGroup);
this.map.addLayers(this.markerGroup);

Clean and easy to read ;)

1
  • array_ looks like a private member, ie subject to change and potentially undocumented behaviour. Nov 9, 2022 at 8:34
2

The answer from dvmac01 helped me a lot.

One thing I would like to add is that if you want to add another layer to the Group, then you have to work one level above that. (Working with OpenLayers v.4.6.5)

Below is example that adds a new layer if a layer group exists.

var innerLayers = [];
//loop each layer of the map
map.getLayers().forEach(function(layer) {
    if (layer instanceof ol.layer.Group) {
        // look if the group layer already exists
        if(layer.get("name") === "Planner"){
            // check if layer.getLayers exists
            if (layer.getLayers){
                // get inner layers from group layer as Collection
                innerLayers = layer.getLayers(); // no array!
                // new layer to Collection
                innerLayers.push(loadedRoute); 
                if (innerLayers instanceof ol.Collection){
                    // set the layer collection of the grouplayer
                    layer.setLayers(innerLayers);
                }
            }
        }
    }
});
1
  • Checking the types using instanceof are really necessary. I help me when I use typescript.
    – ArashMad
    Oct 14, 2022 at 6:24
0

My version:

var all_layer_groups = map.getLayers();

var layer_group;

for (i = 0, n = all_layer_groups.getLength(); i < n; i++) {

    layer_group = all_layer_groups.item(i);

    if (layer_group.get('title') == 'your group name') {

        if (layer_group.getLayers) {
            var _inner_layers = layer_group.getLayers().getArray();

            your_first_inner_layer = _inner_layers[0];
            your_second_inner_layer = _inner_layers[1];
        } // if
        break;
    } //if
} //for

if (your_first_inner_layer) {
    // Do with layer

    alert(your_first_inner_layer.get('title'));
}

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.