Flyer User Position: Center

Question

We connect the controller to control the card flyer (pan, zoom, etc.). We would like to have a custom control that is displayed in the center of the map (for menu functions). Currently, the leaflet does not support the position: "center") (toplets supported, etc.) ideas?

Answer 1

Adding a user control to a map in a worksheet is done this way.

For example, for 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);

You can then add the CSS style to myClass to center it: ( this part has not been verified by me)

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

Answer 2

.leaflet-left, .

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

, .leaflet-top:

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

. , .

EDIT:

, , :

leaflet.js: 4900, ?

t("top", "left"),
t("top", "right"),
t("bottom", "left"),
t("bottom", "right"),

:

t("top", "center"),
t("bottom", "center")

"topcenter" "bottomcenter"

css " ":

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