Question

136

Customize Zoom in/out button in leaflet.js

rated 0 times [ 137] [ 1] / answers: 1 / hits: 57526 / 10 Years ago, tue, april 8, 2014, 12:00:00

I am trying to customize zoom control (+/-), so it should appear in the right side like Google maps (https://www.google.com/maps/)

I tried to add float:right; but it didn't work.

From the CSS file :

/* zoom control */



.leaflet-control-zoom-in,

.leaflet-control-zoom-out {

  font: bold 18px 'Lucida Console', Monaco, monospace;

  text-indent: 1px;

  }

.leaflet-control-zoom-out {

  font-size: 20px;

  }



.leaflet-touch .leaflet-control-zoom-in {

  font-size: 22px;

  }

.leaflet-touch .leaflet-control-zoom-out {

  font-size: 24px;

  }

http://jsfiddle.net/hsy7v/1/

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kaceyr

Add To Favorites

Follow

Total Points: 510

Total Questions: 97

Total Answers: 116

Location: Solomon Islands

Member since Fri, Oct 8, 2021

3 Years ago

kaceyr questions

1 TypeScript Expected 1 arguments, but got 2

Wed, Dec 15, 21, 00:00, 2 Years ago

1 How to show input fields based on mat radio button selection in angular material

Wed, Jun 24, 20, 00:00, 4 Years ago

1 How to change variable value in index.html based on the environment in angular

Thu, Feb 6, 20, 00:00, 4 Years ago

1 react dynamic import using a variable doesn't work

Sat, Oct 12, 19, 00:00, 5 Years ago

1 puppeteer-cluster: queue instead of execute

Mon, Aug 5, 19, 00:00, 5 Years ago

View All

answered 10 Years ago nathanaelzechariahl · Accepted Answer

Your zoom in/out controls are wrapped with absolutely positioned element with left:0 (due to .leaflet-left class), so float:left wouldn't help, you could align it to right by overriding left:0 by right:0, or changing .leaflet-left class to .leaflet-right

But more correct way would be to use provided api.

//disable zoomControl when initializing map (which is topleft by default)

var map = L.map(map, {

    zoomControl: false

    //... other options

});



//add zoom control with your options

L.control.zoom({

     position:'topright'

}).addTo(map);

see updated fiddle

api reference for the library you use can be found here