0

I need to create custom position:bottomcenter in leaflet.js controls.But leaflet only supports four corner positions.So,for that I need to know how the existing positions like topleft,bottomright etc. are created.Can anyone please explain those things? Thanks in advance :-)

APL
  • 353
  • 2
  • 16
  • 2
    See https://github.com/Leaflet/Leaflet/blob/faeb46b27ccba0f3691ad2a074a46ae3be55538c/src/control/Control.js#L150 – xmojmr Aug 09 '16 at 07:17
  • 1
    You should be interested in those posts: https://stackoverflow.com/questions/23762176/leaflet-custom-control-position-center, https://stackoverflow.com/questions/33614912/how-to-locate-leaflet-zoom-control-in-a-desired-position/33621034#33621034, https://stackoverflow.com/questions/20790045/how-to-precisely-place-a-div-element-on-a-map-using-leaflet-js/38164780#38164780 – ghybs Aug 09 '16 at 08:36
  • see my answer here https://stackoverflow.com/questions/23762176/leaflet-custom-control-position-center/49036235#49036235 – William Riley Feb 28 '18 at 19:21

1 Answers1

0

If you want to add the functionality to leaflet so that the other controls arent affected, you can do this:

leaflet.js: Beginning at line 4900 I believe?

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

Add these two lines:

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

This would allow for use of positions 'topcenter' and 'bottomcenter'

Then simply add css class for 'leaflet-center':

.leaflet-center {
    left: 50%;
    transform: translate(-50%, 0%);
}
William Riley
  • 878
  • 8
  • 13