leaflet - power - como hacer un triptico

Cómo ubicar el control de zoom del folleto en una posición deseada

Question

Quiero colocar el control de zoom en la parte central derecha del mapa, es decir, en el centro del lado más a la derecha del mapa. He encontrado una solución para colocar el control de zoom en diferentes esquinas usando el siguiente código

var map = new L.map("map-container",{ zoomControl: false });
new L.Control.Zoom({ position: ''topleft'' }).addTo(map);

Así que las posiciones pueden ser

topleft
topright
bottomleft
bottomright

Pero mi objetivo es poner la ventana de control en el centro a la derecha. O incluso puse el control en la esquina, quiero agregar un margen a la parte superior. ¿Cómo puedo hacer eso? ¿Hay alguna idea?

Answer 1

Esto se puede hacer un poco más fácil, con una línea de CSS. Funciona con diseño responsivo (Bootstrap) y mueve botones adicionales agregados con Leaflet.EasyButton también.

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

Answer 2

Podemos crear marcadores de posición de Control adicionales, además de las 4 esquinas proporcionadas de forma predeterminada.

Una buena ventaja es que permite colocar varios controles en uno de esos marcadores de posición. Se apilarán sin superponerse, como en las esquinas estándar.

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

Luego, se convierte en un estilo fácil para aquellos marcadores de posición con CSS, porque su padre DOM es el contenedor del mapa en sí. Por lo tanto, top , bottom , left y right se pueden especificar con porcentajes (que utilizan las dimensiones de los padres).

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 cuanto al centrado vertical del marcador de posición, puede utilizar su técnica favorita. Aquí utilicé la Transformación CSS3 para desplazar el marcador de posición en la mitad de su propia altura.

Si es necesario (por ejemplo, para la compatibilidad de navegadores antiguos), puede usar un método de "calcular en carga" para realizar este desplazamiento, similar a la respuesta de iH8 . Pero ya no es necesario ejecutarlo en el tamaño del mapa, solo al agregar nuevos controles al marcador de posición.

Demostración en vivo: https://plnkr.co/edit/bHJwfm598d1Ps7MpLG0k?p=preview

Nota: actualmente existe un PR abierto ( Folleto / Folleto n.º 5554 ) para esto, pero como no es compatible con versiones anteriores de Internet Explorer, es probable que no se fusione en el núcleo del Folleto.

Answer 3

Toma la altura del contenedor del mapa, divide por dos. Resta la altura del contenedor del zoom, dividido por dos. Utilice la posición absoluta y asigne la posición superior:

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;

Ejemplo en Plunker: http://plnkr.co/edit/Yg8phGDcCBS1IlGgpKa2?p=preview

Tenga en cuenta que cuando no esté utilizando un contenedor de mapas de tamaño fijo, tendrá que hacer esto cada vez que se cambie el tamaño del contenedor del mapa. Póngalo en un método y conéctelo al evento de cambio de tamaño del mapa como se muestra en el ejemplo.