web-dev-qa-db-fra.com

Comment localiser le contrôle de zoom du dépliant dans la position souhaitée

Je souhaite placer la commande de zoom au centre à droite de la carte, c’est-à-dire au centre du côté droit de la carte. J'ai trouvé une solution pour mettre la commande de zoom dans différents coins en utilisant le code suivant

var map = new L.map("map-container",{ zoomControl: false });

   new L.Control.Zoom({ position: 'topleft' }).addTo(map);

Donc, les positions peuvent être

topleft
topright
bottomleft
bottomright

Mais mon objectif est de placer la fenêtre de contrôle au centre à droite. Ou même je mets le contrôle dans le coin je veux ajouter une marge au sommet. Comment puis je faire ça? Y a-t-il une idée?

leaflet
26
Md Johirul Islam

Nous pouvons créer des espaces réservés de contrôle supplémentaires, en plus des 4 coins fournis par défaut.

L’avantage de Nice est qu’il permet de placer plusieurs contrôles dans l’un de ces espaces réservés. Ils s'empileront sans se chevaucher, comme dans les coins standard.

JavaScript:

// Create additional Control placeholders
function addControlPlaceholders(map) {
    var corners = map._controlCorners,
        l = 'leaflet-',
        container = map._controlContainer;

    function createCorner(vSide, hSide) {
        var className = l + vSide + ' ' + l + hSide;

        corners[vSide + hSide] = L.DomUtil.create('div', className, container);
    }

    createCorner('verticalcenter', 'left');
    createCorner('verticalcenter', 'right');
}
addControlPlaceholders(map);

// Change the position of the Zoom Control to a newly created placeholder.
map.zoomControl.setPosition('verticalcenterright');

// You can also put other controls in the same placeholder.
L.control.scale({position: 'verticalcenterright'}).addTo(map);

Il devient alors facile de styliser ces espaces réservés avec CSS, car leur parent DOM est le conteneur de carte lui-même. Donc, top, bottom, left et right peuvent être spécifiés avec des pourcentages (qui utilisent les dimensions du parent).

CSS:

.leaflet-verticalcenter {
    position: absolute;
    z-index: 1000;
    pointer-events: none;
    top: 50%; /* possible because the placeholder's parent is the map */
    transform: translateY(-50%); /* using the CSS3 Transform technique */
    padding-top: 10px;
}

.leaflet-verticalcenter .leaflet-control {
    margin-bottom: 10px;
}

En ce qui concerne le centrage vertical l'espace réservé lui-même, vous pouvez utiliser votre technique préférée. Ici, j'ai utilisé la transformation CSS3 pour compenser l'espace réservé de la moitié de sa propre hauteur.

Si nécessaire (par exemple, pour la compatibilité d'anciens navigateurs), vous pouvez utiliser une méthode "calculer en charge" pour effectuer ce décalage, similaire à la réponse de iH8 . Mais vous n'avez plus besoin de l'exécuter lors du redimensionnement de la carte, uniquement lorsque vous ajoutez de nouveaux contrôles à l'espace réservé.

Démo en direct: https://plnkr.co/edit/bHJwfm598d1Ps7MpLG0k?p=preview

Remarque: il existe actuellement un PR ( Leaflet/Leaflet # 5554 ) ouvert, mais comme il n'est pas compatible avec les anciennes versions d'Internet Explorer, il ne sera probablement pas fusionné dans le cœur de Leaflet.

28
ghybs

Saisissez la hauteur du conteneur de la carte, divisez-la par deux. Soustrayez la hauteur du conteneur du zoom, divisée par deux. Utilisez le positionnement absolu et attribuez la position supérieure:

var mapHalfHeight = map.getSize().y / 2,
    container = map.zoomControl.getContainer(),
    containerHalfHeight = parseInt(container.offsetHeight / 2),
    containerTop = mapHalfHeight - containerHalfHeight + 'px';

container.style.position = 'absolute';
container.style.top = containerTop;

Exemple sur Plunker: http://plnkr.co/edit/Yg8phGDcCBS1IlGgpKa2?p=preview

Notez que lorsque vous n'utilisez pas un conteneur de carte de taille fixe, vous devez le faire chaque fois que le conteneur de la carte est redimensionné. Jetez-le dans une méthode et raccordez-le à l'événement de redimensionnement de la carte, comme dans l'exemple fourni.

6
iH8

Cela peut être fait un peu plus facilement, avec une ligne de CSS. Fonctionne avec responsive design (Bootstrap) et déplace des boutons supplémentaires ajoutés avec Leaflet.EasyButton aussi.

.leaflet-control-container { position: absolute; right: 56px }
3
ow3n

Si votre carte n'est pas compliquée, le moyen le plus simple consiste à utiliser CSS.

Dans votre cas, vous pouvez simplement ajouter les CSS suivants:

.leaflet-top {
bottom: 0;
}

.leaflet-top .leaflet-control-zoom {
top:50%;
transform: translateY(-50%);
}
0
Jack J