1. Accueil
  2. Base de connaissances
  3. Personnalisation
  4. Déclencher des actions sur la carte avec Javascript

Déclencher des actions sur la carte avec Javascript

Vous pouvez déclencher un certain nombre de fonctions Javascript. Il est possible d'ajouter des JS personnalisés directement dans les paramètres du plugin. Pour cela, rendez-vous à l'adresse suivante Ouvrir la carte de l'utilisateur > Paramètres > Avancés > JS personnalisé.

Voici quelques cas d'utilisation possibles :

Recharger la carte

Cela peut être utile si vous utilisez un plugin de mise en cache ou de préchargement de page. Parfois, le préchargement bloque le chargement de la carte OUM, de sorte qu'il faut la recharger.

JavaScript
oumMap.invalidateSize();

Voler vers un autre lieu

Utilisez la fonction JS suivante après le chargement de votre page. Les paramètres nécessaires sont la latitude, la longitude et le zoom.

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

Voler jusqu'à la position actuelle de l'utilisateur

Utilisez la fonction JS suivante pour déclencher un clic sur le bouton "Montrez-moi où je suis".

JavaScript
document.querySelector('.leaflet-control-locate a').cliquer();

Ouvrir le formulaire "Ajouter un lieu

Utilisez la fonction JS suivante pour déclencher un clic sur le bouton "+" afin d'ouvrir le formulaire "Ajouter un lieu".

JavaScript
jQuery(document).prêt(fonction() {
  document.querySelector('#open-add-location-overlay').cliquer();
});

Activer/désactiver une catégorie de marqueurs

Utilisez la fonction JS suivante pour déclencher un clic sur un marqueur de catégorie. Le nombre (par exemple "3") correspond à la position de la catégorie dans la liste des catégories.

JavaScript
jQuery(document).prêt(fonction() {
  document.querySelector('.oum-filter-list label:nth-child(3)').cliquer();
});

Pour activer ou désactiver toutes les catégories de marqueurs en même temps, vous pouvez utiliser cet extrait :

JavaScript
jQuery(document).prêt(fonction() {
  document.querySelectorAll('.oum-filter-list label').forEach((catégorie) => {
    catégorie.cliquer()
  });
});

Pour activer une catégorie de marqueurs spécifique au chargement de la page, vous pouvez utiliser ce snippet. Il suffit d'ajouter le paramètre ?oum-category=3 à votre URL au chargement de la page. Le nombre (par exemple "3") correspond à la position de la catégorie dans la liste des catégories. Voir cet exemple.

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('.oum-filter-list 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(`.oum-filter-list 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.');
  }
}

Remplir automatiquement le champ des sous-titres

Lorsque l'utilisateur recherche et clique sur une adresse suggérée dans le formulaire "Ajouter un lieu", le champ sous-titre peut être automatiquement rempli avec le nom de ce lieu :

JavaScript
oumMap2.addEventListener('geosearch/showlocation', fonction(e) { 
  document.querySelector('#oum_location_address').valeur = e.location.label ;
});
Cet article vous a-t-il été utile ?

Articles connexes


FR