I have succeeded in creating a header outside of the CartoDB UI, but the header is blocking the zoom controls, as can be seen below.

enter image description here

Is there any way to modify the zoom control location to adapt to the existence of this header?


You can simply use CSS on .leaflet-top class to adjust the top positioning of all Leaflet controls:

.leaflet-top {
  top: 100px;

Demo: http://jsfiddle.net/ve2huzxw/196/


Set zoomControl to false when you init the map, then add it to a different corner:

// initiate leaflet map
var map = L.map('map', {
    center: [0,0],
    zoom: 2,
    zoomControl: false
// add zoomControl
L.control.zoom({ position: 'topright' }).addTo(map);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.