CODEWITHSUNDEEP
javascriptleafletleaflet-draw
Corantin Noll
Corantin Noll

Reputation: 21

Which Leaflet library or workaround to control toolbar size

I need to change the styling of the toolbar like the size of the button to have a bigger touch area for mobile (draw toolbar and other controls).

I already tried to change the size to 48px for width and height of toolbar button using css.

Current css : 

/*
  ##Device = Mobile, Tablet
*/
@media (max-width: 1024px) {
    .leaflet-bar a, a.leaflet-toolbar-icon {
        width: 44px !important;
        height: 44px !important;
        font-size: 20px !important;
        line-height: 45px !important;
    }
    .leaflet-touch .leaflet-draw-actions a {
        font-size: 20px;
        line-height: 44px;
        height: 44px;
    }
    .leaflet-control-zoom-display {
        width: 45px;
        height: 45px;
        font-size: 18px;
        line-height: 30px;
    }
    .leaflet-touch .leaflet-control-layers-toggle {
        width: 44px;
        height: 44px;
    }
}

When I change the size in the css way, the toolbar is not responsive anymore (leaflet-draw toolbar background should fit size)

It also glitches when you click on a toolbar button and it shows the horizontal sub-toolbar (text is overlapping).

My problem picture

Is anyone know a plugin or a way to have a bigger touch area for mobile?

Upvotes: 0

Views: 1844

Answers (1)

Corantin Noll
Corantin Noll

Reputation: 21

I solved my problem using some css

/*
  ##Devices with touch
*/
.leaflet-touch .leaflet-control-zoom-display {
  width: 48px;
  height: 48px;
  font-size: 18px;
  line-height: 30px;
}
.leaflet-touch .leaflet-bar a, .leaflet-touch .leaflet-toolbar-0 > li > a {
  width: 44px;
  height: 44px;
  font-size: 20px;
  line-height: 45px;
  background-size: 314px 30px;
}
.leaflet-touch .leaflet-draw-toolbar.leaflet-bar a {
  background-position-y: 6px;
}
.leaflet-touch .leaflet-draw-actions a, .leaflet-touch .leaflet-control-toolbar .leaflet-toolbar-1 > li > .leaflet-toolbar-icon {
  font-size: 20px;
  line-height: 44px;
  height: 44px;
}
.leaflet-touch .leaflet-draw-actions, .leaflet-touch .leaflet-toolbar-1 {
  left: 45px;
}

For the ones using Custom Toolbar plugin : If you set position to right, the sub-toolbar will open at the right (out of the screen) Solved by : 

.leaflet-right .leaflet-toolbar-1 {
  left: auto !important;
  right: 30px;
}
.leaflet-right .leaflet-toolbar-1 li:first-child > .leaflet-toolbar-icon {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.leaflet-right .leaflet-toolbar-1 li:last-child > .leaflet-toolbar-icon {
  border-top-right-radius: unset;
  border-bottom-right-radius: unset;
}

(with draw toolbar and custom toolbar position swiped) : Result picture

Upvotes: 1

Related Questions