With Leaflet, how do I order controls if I have two in the same position?

Question

I have a custom control on my map that has the following property:

position: "topright"

This puts it in the same position as the default Layers control. However, my custom control is placed above the layers control. How do I specify which should be on top? The documentation on control positions doesn't mention what to do if more than one occupies the same spot.

My map is initialized like this:

var map = L.map('map', {
    center: [0.0, 0.0],
    zoom: 2
});

map.addControl(new L.Control.Cluster())

The button itself is set up like this, in `onA

This sets up my top right like this:

L.Control.Cluster = L.Control.extend({
  options: {
    position: "topright",
  },

  onAdd: function (map) {
    var clusterName = "leaflet-control-cluster"
      , container = L.DomUtil.create("div", clusterName + " leaflet-bar")
      , options = this.options

    this._map = map

    var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom');
    container.style.backgroundColor = 'white';
    container.style.backgroundImage = "url(image.png)";
    container.style.backgroundRepeat = "no-repeat";
    container.style.backgroundPosition = "center";
    container.style.backgroundSize = "25px 25px";
    container.style.width = '36px';
    container.style.height = '36px';

    return container
  }
})

This sets up my top right like this:

How do I indicate that I want my custom control below the layer control?

Answer 1

It just has to do with the order of creating the controls. This will add your custom control after the layer control:

L.control.layers(baseLayers, overlays).addTo(map);

map.addControl(new L.Control.Cluster());

http://plnkr.co/edit/3VipBSvsQWsiQa5hfBCD?p=preview