Interacciones con el mapa

Conjunto de interacciones por defecto para el map:

Nombre	Tipo	Descripción	Valor por defecto
onFocusOnly	`boolean`	Interactúa solo cuando el mapa tiene el foco. Esto afecta las interacciones de `MouseWheelZoom` y `DragPan`.	`false`
zoomDelta	`number o undefined`	Nivel de zoom delta al usar el teclado o el zoom con doble clic.	`undefined`
zoomDuration	`number o undefined`	Duración de la animación de zoom en milisegundos.	`undefined`
altShiftDragRotate	`boolean`	Si se desea la rotación con Alt-Shift-arrastrar.	`true`
doubleClickZoom	`boolean`	Si se desea el zoom con doble clic.	`true`
keyboard	`boolean`	Si se desea la interacción con el teclado.	`true`
mouseWheelZoom	`boolean`	Si se desea el zoom con la rueda del ratón.	`true`
shiftDragZoom	`boolean`	Si se desea el zoom con Shift-arrastrar.	`true`
dragPan	`boolean`	Si se desea arrastrar el mapa para desplazarse.	`true`
pinchRotate	`boolean`	Si se desea la rotación con pellizco.	`true`
pinchZoom	`boolean`	Si se desea el zoom con pellizco.	`true`

La clase abstracta para crear las subclases en ol/interaction/Interaction.

Interaction / SubClases de Interaction

Evento de Teclado	Evento de Ratón	Otros
KeyboardPan	DblClickDragZoom	DragAndDrop
KeyboardZoom	DoubleClickZoom	PointerInteraction
	MouseWheelZoom	Select
		Link

De PointerInteraction podemos encontrar otras subclases con interacciones:

Evento	Descripción
DragBox	Evento asociado con la creación de una caja de selección arrastrable.
DragPan	Evento que permite arrastrar el mapa para desplazarse por él.
DragRotateAndZoom	Evento que permite rotar y hacer zoom en el mapa utilizando gestos de arrastre.
DragRotate	Evento que permite rotar el mapa mediante gestos de arrastre.
Draw	Evento asociado con el dibujo de geometrías en el mapa.
Extent	Evento relacionado con la manipulación de la extensión (área visible) del mapa.
Modify	Evento que permite modificar geometrías existentes en el mapa.
PinchRotate	Evento que permite rotar el mapa utilizando gestos de pinza.
PinchZoom	Evento que permite hacer zoom en el mapa utilizando gestos de pinza.
Snap	Evento que ajusta automáticamente las geometrías a puntos de referencia cercanos.
Translate	Evento que permite mover geometrías existentes de un lugar a otro en el mapa.

Condiciones eventos

Se puede confirar los eventos para que solo se ejecute cuando siga una condición definida en ol/events/condition, por ejemplo:

const dragRotateIteraction = new ol.iteraction.DragRotate({
  condition: ol.events.condition.altKeyOnly
});

Overlays

📘 Documentación

Un overlay es un elemento que se superpone al mapa, generalmente utilizado para mostrar información adicional, como popups o ventanas emergentes, en ubicaciones específicas del mapa.

  <div id="map" class="map"></div>
  <div id="popup" class="ol-popup"><p id="popup-coordinates"></p></div>

const popupContainer = document.querySelector('#popup');
const popup = new ol.Overlay({
  element: popupContainer,
  positioning: 'center-left' // Define como se posiciona
});

map.addOverlay(popup);

map.on('click', ({ coordinate }) => {
  popup.setPosition(undefined); // Eliminar
  popup.setPosition(coordinate);

  document.querySelector('#popup-coordinates').innerHTML = coordinate;
})