Suite

Bouton « Accueil » Plan du dépliant

Bouton « Accueil » Plan du dépliant


Existe-t-il une possibilité d'avoir une sorte de bouton d'accueil sur ma carte Leaflet qui zoomera respectivement sur ma vue de carte initiale ou sur une position définie spécifique ?


Ce qui suit ajoutera une commande de zoom personnalisée avec un bouton d'accueil à une carte Leaflet. L'icône d'accueil provient de font-awesome, alors assurez-vous d'inclure cette référence.

Violon de travail ici.

html :

     

css :

#map { hauteur : 340px ; } .leaflet-bar a { background-color: #fff; border-bottom : 1px solide #ccc ; couleur : 444 ; bloc de visualisation; hauteur : 26px ; largeur : 26px ; hauteur de ligne : 1,45 !important; text-align : centre ; texte-décoration : aucun ; police : gras 18px « Lucida Console », Monaco, monospace ; }

javascript :

var lat = 51,505 ; var lng = -0,09 ; var zoom = 12; // configure la carte et supprime le zoomControl par défaut var map = L.map('map', { zoomControl: false }); map.setView([lat, lng], zoom); L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png">

Avec Leaflet.EasyButton, les choses restent assez propres : nommez votre icône et votre fonction (survolez le texte si vous le souhaitez) :

var home = { lat : 70,3, lng : 50,5, zoom : 8 } ; L.easyButton('fa-home',function(btn,map){ map.setView([home.lat, home.lng], home.zoom); },'Zoom To Home').addTo(map);

(à part) et l'exemple de zoom réponse de toms avec easyButton :

// crée une barre avec les boutons var zoomBar = L.easyBar([ L.easyButton( '+', function(control, map){map.setZoom(map.getZoom()+1);}), L.easyButton( 'fa-home fa-lg', function(control, map){map.setView([ home.lat, home.lng], home.zoom);}) L.easyButton( '-', function(contrôle, carte){map.setZoom(map.getZoom()-1);}), ]); // l'ajoute à la carte zoomBar.addTo(map);

Câblez un bouton qui appelle map.setView

http://leafletjs.com/reference.html#map-setview

map.setView(lat, lng, zoom);