Personnaliser Zoom in / out button dans leaflet.js

J'essaie de personnaliser le contrôle du zoom (+/-), donc il devrait apparaître sur le côté droit comme Google Maps ( https://www.google.com/maps/ )

J'ai essayé d'ajouter un float:right; Mais cela n'a pas marché.

À partir du fichier CSS:

 /* 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/

Vos commandes de zoom in / out sont enveloppées avec un élément absolument positionné à left:0 (en raison de la classe .leaflet-left), donc float:left ne vous aiderait pas, vous pouvez l'aligner vers la droite en la basant vers la left:0 de right:0 , Ou changeant la classe .leaflet-left sur .leaflet-right

Mais un moyen plus correct serait d'utiliser les api fournis.

 //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);

Voir violoncelle mise à jour

La référence d'api pour la bibliothèque que vous utilisez peut être trouvée ici

Actuellement, vous pouvez utiliser:

 var map = L.map('map', { zoomControl: true }); map.zoomControl.setPosition('topright');