1. Inicio
  2. Base de conocimientos
  3. Personalización
  4. Activar acciones del mapa con Javascript

Activar acciones del mapa con Javascript

Puede activar una serie de funciones Javascript. Es posible añadir JS personalizado directamente en la configuración del plugin. Ir a Abrir Mapa de Usuario > Configuración > Avanzado > JS Personalizado.

He aquí algunos posibles casos de uso:

Recargar el mapa

Esto puede ser útil si está utilizando un plugin de caché o de precarga de páginas. A veces la precarga bloquea la carga del mapa OUM, por lo que es necesario volver a cargarlo.

JavaScript
oumMap.invalidarTamaño();

Volar a otro lugar

Utilice la siguiente función JS después de que su página se haya cargado. Los parámetros necesarios son latitud, longitud y zoom.

JavaScript
oumMap.flyTo([40.737, -73.923], 8);

Volar a la posición actual del usuario

Utilice la siguiente función JS para activar un clic en el botón "Muéstrame dónde estoy".

JavaScript
documento.querySelector('.leaflet-control-locate a').haga clic en();

Abrir el formulario "Añadir ubicación

Utilice la siguiente función JS para activar un clic en el botón "+" para abrir el formulario "Añadir ubicación".

JavaScript
documento.querySelector('#open-add-location-overlay').haga clic en();

Activar/Desactivar una categoría de marcador

Utilice la siguiente función JS para activar un clic en una categoría de marcador. El número (por ejemplo, "3") es la posición de la categoría en la lista de categorías.

JavaScript
documento.querySelector('.leaflet-control-layers-overlays label:nth-child(3)').haga clic en();

Para activar o desactivar todas las categorías de marcadores al mismo tiempo, puede utilizar este fragmento:

JavaScript
documento.querySelectorAll('.leaflet-control-layers-overlays label').paraCada((categoría) => {
  categoría.haga clic en()
});

To activate a specific marker category on page load you can use this snippet. Just add the parameter ?oum-category=3 to your URL on page load. The number (e.g. “3”) is the position of the category in the category list. See this example.

JavaScript
// Function to get the value of a specific URL parameter
function getQueryParam(param) {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.get(param);
}

// Get the 'oum-category' parameter value from the URL
const categoryNumber = getQueryParam('oum-category');
  
// Check if the 'oum-category' parameter is present
if (categoryNumber !== null) {
  // Click all categories first
  document.querySelectorAll('.leaflet-control-layers-overlays label').forEach((category) => {
    category.click();
  });

  // Click specifically on the label based on the 'oum-category' value
  // Convert categoryNumber to a 1-based index for :nth-child() selector
  const categoryIndex = parseInt(categoryNumber, 10);
  if (!isNaN(categoryIndex)) { // Ensure categoryNumber is a valid number
    const targetLabel = document.querySelector(`.leaflet-control-layers-overlays label:nth-child(${categoryIndex})`);
    if (targetLabel) {
      targetLabel.click();
    } else {
      console.error('Specified category index is out of range.');
    }
  } else {
    console.error('Invalid category number specified in the URL parameter.');
  }
}

Rellenar automáticamente el campo de subtítulos

Cuando el usuario busca y hace clic en una dirección sugerida en el formulario "Añadir ubicación", el campo del subtítulo puede rellenarse automáticamente con el nombre de esa ubicación:

JavaScript
oumMap2.addEventListener('geobúsqueda/showlocation', función(e) { 
  documento.querySelector('1TP5Dirección_de_ubicación').value = e.location.label;
});
¿Le ha resultado útil este artículo?

Artículos relacionados


ES