2

I recently started playing around with ol3 + boundless. I created the edit application using > suite-sdk create myApp ol3edit.

I am trying to move the layer view/selector from the map to a .col-md-1 on the side of the map (the layer view/selector on the map annoys me and is limiting)

I could manage to get it removed from the map, it renders to my declared div, but it moves it to the bottom of the map. See images and code, the code is the code that was scaffold-ed by the suite-sdk create command...

Code:
index.html

<div class="container-fluid map-container">
  <div class="row">
      <!-- have layers displayed here: BEGIN -->
      <div class="col-sm-1 col-md-1">
          <div id="layers">
          </div>
      </div>
      <!-- have layers displayed here: END -->
    <div class="col-sm-7 col-md-7 nopadding">
      <div id="map"></div>
    </div>
    <div class="col-sm-4 col-md-4 ">
      <div id="features-container">
        <table id="features" class="table table-hover table-responsive">
        </table>
      </div>
    </div>
  </div>
</div>

LayersControl.js

var app = window.app;
// added by me
var layersContainer = document.getElementById('layers');

app.LayersControl = function(opt_options) {
    this.defaultGroup = "default";
    var options = opt_options || {};

    if (options.groups) {
        this.groups = options.groups;
        if (!this.groups[this.defaultGroup]) {
            this.groups[this.defaultGroup] = {};
        }
    } else {
        this.groups = {};
        this.groups[this.defaultGroup] = {};
    }
    this.containers = {};
    for (var group in this.groups) {
        this.containers[group] = document.createElement('ul');
        if (this.groups[group].title) {
            $(this.containers[group]).html(this.groups[group].title);
        }
        //element.appendChild(this.containers[group]);
        // added by me
        layersContainer.appendChild(this.containers[group]);
    }
    ol.control.Control.call(this, {
        // edited by me
        element: layersContainer,
        target: options.target
    });
};

ol.inherits(app.LayersControl, ol.control.Control);

app.LayersControl.prototype.setMap = function(map) {
    ol.control.Control.prototype.setMap.call(this, map);
    var layers = map.getLayers().getArray();
    for (var i=0, ii=layers.length; i < ii; ++i) {
        var layer = layers[i];
        var title = layer.get('title');
        var group = layer.get('group') || this.defaultGroup;
        if (title) {
            var item = document.createElement('li');
            if (this.groups[group] && this.groups[group].exclusive === true) {
    $('<input />', {type: 'radio', name: group, value: title, checked:
      layer.getVisible()}).
      change([map, layer, group], function(evt) {
        var map = evt.data[0];
        var layers = map.getLayers().getArray();
        for (var i=0, ii=layers.length; i<ii; ++i) {
          if (layers[i].get("group") == evt.data[2]) {
            layers[i].setVisible(false);
          }
        }
        var layer = evt.data[1];
        layer.setVisible($(this).is(':checked'));
      }).appendTo(item);
    $('<span />').html(title).appendTo(item);
    this.containers[group].appendChild(item);
 // added by me
 layersContainer.appendChild(item);
  } else {
    $('<input />', {type: 'checkbox', checked: layer.getVisible()}).
      change(layer, function(evt) {
        evt.data.setVisible($(this).is(':checked'));
      }).appendTo(item);
    $('<span />').html(title).appendTo(item);
    if (this.containers[group]) {
      this.containers[group].appendChild(item);
    } else if (this.containers[this.defaultGroup]) {
      this.containers[this.defaultGroup].appendChild(item);
    }
    // added by me
    layersContainer.appendChild(item);
      }
    }
  }
};

Currently: enter image description here

Desired: desired

  • Does anybody know why it is moving the html?
  • Is there maybe just a config that I need to set to have the layer view in its own container?
  • Maybe you put some links in your question, or show some code. – Jonatas Walker Nov 30 '15 at 14:03
  • Some code added, hope it gives more perspective... – Albert van Niekerk Dec 1 '15 at 7:37
  • This is a CSS only config issue. – Jonatas Walker Dec 1 '15 at 8:11
  • I initially also thought so, but when I inspect the code I see the following: <div class="col-sm-1 col-md-1"></div> It is removing the div I created and adding it to the map div – Albert van Niekerk Dec 1 '15 at 8:42
  • Using inspect element, this is what I see... ` <div class="row"> <!-- the layers div is added in here in the index.html --> <div class="col-sm-1 col-md-1"></div> <div class="col-sm-7 col-md-7 nopadding"> <div id="map"> <!-- map code emitted --> <!-- the layers div is rendered here??? --> <div id="layers">...</div> </div> <div class="col-sm-4 col-md-4 "> <div id="features-container" style="height: 954px;"> <table id="features" class="table table-hover table-responsive" style="height: 954px;"> </table> </div> </div> </div> </div>` – Albert van Niekerk Dec 1 '15 at 8:54
1

Fixed it.

There was a config that I did not add to the layers control. I had to add the following to the extended ol.control: target: document.getElementById('layers')

So the code looks as following:

html

  <div class="container-fluid map-container">
    <div class="row">
      <!-- add layers here -->
      <div class="col-sm-2 col-md-2">
          <div id="layers"></div>
      </div>
    <div class="col-sm-6 col-md-6 nopadding">
      <div id="map"></div>
    </div>
    <div class="col-sm-4 col-md-4 ">
      <div id="features-container">
        <table id="features" class="table table-hover table-responsive">
        </table>
      </div>
    </div>
  </div>
</div>

js

var map = new ol.Map({
controls: ol.control.defaults().extend([
    new app.LayersControl({
        groups: {
            background: {
                title: "Base Layers",
                exclusive: true
            },
            'default': {
                title: "Overlays"
            }
        },
        // this was missing!!!
        target: document.getElementById('layers')
    })
]),

css

As Jonatas has mentioned in the comments, there was a bit of css editing to do as well. I had to remove the bottom and top styling as this caused the layers to be displayed in the nav bar area

 .layers-control {
    /*bottom: 21px;*/
    /*top: auto;*/
    right: 20px;
    background-color: #333;
    color: #fff;
  }

The result final result

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.