Leaflet Custom Control position: center

Question

we are hooking up an eye-tracker to control the leaflet map (pan, zoom etc.) We would like to have a custom control that appears at the center of the map (for menu functions) Currently Leaflet does not support position: 'center') (topleft, etc. is supported) ideas?

Answer 1

I get this is an old topic, but anyhow, here is my workaround.

Add some css :

.leaflet-center {
    left: 50%;
    transform: translate(-50%, 0%);
}

.leaflet-middle {
    top: 50%;
    position: absolute;
    z-index: 1000;
    pointer-events: none;
  transform: translate(0%, -50%);

}

.leaflet-center.leaflet-middle {
  transform: translate(-50%, -50%);
}

and patch a the position method.

L.Map.include({
  _initControlPos: function () {
    var corners = this._controlCorners = {},
      l = 'leaflet-',
      container = this._controlContainer =
        L.DomUtil.create('div', l + 'control-container', this._container);

    function createCorner(vSide, hSide) {
      var className = l + vSide + ' ' + l + hSide;

      corners[vSide + hSide] = L.DomUtil.create('div', className, container);
    }

    createCorner('top', 'left');
    createCorner('top', 'right');
    createCorner('bottom', 'left');
    createCorner('bottom', 'right');

    createCorner('top', 'center');
    createCorner('middle', 'center');
    createCorner('middle', 'left');
    createCorner('middle', 'right');
    createCorner('bottom', 'center');
  }
});

Now you have 5 new positions to use.

Answer 2

Adding a custom control on a map on leaflet is performed like this:

For instance a logo:

    var logo= L.control({
        position : 'topleft'
    });
    logo.onAdd = function(map) {
        this._div = L.DomUtil.create('div', 'myControl');
        var img_log = "<div class="myClass"><img src=\"images/logo.png\"></img></div>";
    
        this._div.innerHTML = img_log;
        return this._div;
    
    }
    logo.addTo(map);

Then you can add CSS styling to myClass to center it: (this part has not been tested by myself)

    .myClass {
       padding-top:50%;
       padding-left: 50%;
    }