web-dev-qa-db-fra.com

Personnaliser le bouton Zoom avant / arrière dans leaflet.js

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

J'ai essayé d'ajouter float:right; mais ça n'a pas marché.

Depuis le 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/

javascriptcssleaflet
28
user3378649

Vos commandes de zoom avant/arrière sont enveloppées d'un élément absolument positionné avec left:0 (en raison de la classe .leaflet-left), donc float:left n'aiderait pas, vous pouvez l'aligner à droite en remplaçant left:0 par right:0, ou en changeant .leaflet-left classe à .leaflet-right

Mais la manière la plus correcte serait d'utiliser l'api fournie.

//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 mis à jour violon

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

81
paulitto

Actuellement, vous pouvez utiliser:

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