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 :-)
Asked
Active
Viewed 1,182 times
0
-
2See https://github.com/Leaflet/Leaflet/blob/faeb46b27ccba0f3691ad2a074a46ae3be55538c/src/control/Control.js#L150 – xmojmr Aug 09 '16 at 07:17
-
1You 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 Answers
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