You can trigger a number of Javascript functions. It is possible to add custom JS directly in the plugin settings. Go to Open User Map > Settings > Advanced > Custom JS.

Here are some possible use cases:

Reload the map

This may be helpful if you are using a Caching or Page Preloading Plugin. Sometimes the preloading blocks the loading of the OUM map, so that it needs to be reloaded.

oumMap.invalidateSize();

Fly to another location

Use the following JS function after your page has loaded. The necessary parameters are latitude, longitude and zoom.

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

Fly to the current user position

Use the following JS function to trigger a click on the “Show me where I am” Button.

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

Open the “Add location” form

Use the following JS function to trigger a click on the “+” Button to open the “Add location” form.

document.querySelector('#open-add-location-overlay').click();

Activate/Deactivate a Marker Category

Use the following JS function to trigger a click on a marker category. The number (e.g. “3”) is the position of the category in the category list.

document.querySelector('.leaflet-control-layers-overlays label:nth-child(3)').click();

To activate or deactivate all marker categories at the same time you can use this snippet:

document.querySelectorAll('.leaflet-control-layers-overlays label').forEach((category) => {
  category.click()
});

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.

// 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.');
  }
}

Auto-populate the subtitle field

When the user searches and clicks on a suggested address in the “Add Location” form, the subtitle field can be automatically populated with the name of that location:

oumMap2.addEventListener('geosearch/showlocation', function(e) { 
  document.querySelector('#oum_location_address').value = e.location.label;
});