3

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?

3

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 ;)

1

The answer from dvmac01 helped me a lot. Thanks!

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)

I hereby provide an example to check if a group layer already exists and if so, then add the new layer. See below:

                        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);
                                    }
                                }
                            }
                        }
                    });
0

I confirm the above answer, I make my own version of it, it works.

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'));




          }
0

I've been coding for OpenLayers the entire week end, and what I've read everywhere sound too complicated, here is the easiest and shortest way to add Layers 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 ;)

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.