Leaflet Popups

Implementing Leaflet Popups in Drupal

This guide provides a step-by-step walk-through for configuring Leaflet Popups in Drupal. Unlike tooltips, which are used for quick labels, popups are designed to hold richer content (such as images, descriptions, or links) and they are typically triggered when a user clicks on a geospatial feature.

1. Prerequisites

• Leaflet & Leaflet Views: Ensure both modules are installed and enabled.
• Geofield: A field providing coordinates for your entities.
• Views: A "Leaflet Map" display mode configured within a View.

2. Standard Configuration via Views UI

To enable and customize popups for your map features, follow these steps:

1. Navigate to your View and click Settings next to the Leaflet Map format.
2. Scroll down to the Popups section.
3. Popup Field: Select the field you want to use as the source for your popup content (Usually, the "Title" or a "Global: Custom text" field).
4. Popup Settings:
   • Close Popup on Click: If enabled, the popup closes when the user clicks elsewhere on the map.
   • Auto Pan: Ensures the map moves to accommodate the popup when it opens.
   • Max Width: Set a pixel limit to prevent the popup from becoming too wide.

3. Creating Rich Popups with Tokens

For a professional documentation or a production site, you likely need more than just a title. Use Drupal's token system to build complex layouts:

1. In your View's Fields section, add all the fields you want to show (e.g., Image, Body, Category, Address).
2. Set these fields to "Exclude from display" so they don't appear in the underlying data table.
3. Add a "Global: Custom text" field.
4. Use the Replacement Patterns to build your HTML structure (e.g., [title], [field_image], [body]).
5. Go back to the Leaflet Map settings and select this Custom text field as the Popup Field.

4. Programmatic Customization (Hook)

If you need to adjust popup settings or content dynamically based on complex logic, use the hook_leaflet_views_feature_alter() in your custom module:

/**

    Implements hook_leaflet_views_feature_alter().
    */
    function my_module_leaflet_views_feature_alter(array &$feature, \Drupal\views\ResultRow $row, $rowPlugin = NULL) {
    // Example: Add a custom footer to all popups programmatically.
    if (isset($feature['popup'])) {
    $feature['popup'] .= '<div class="popup-footer">Updated: ' . date('Y-m-d') . '</div>';
    }

// Set popup technical options.
$feature['popup_options'] = [
'maxWidth' => 300,
'closeButton' => TRUE,
'className' => 'custom-popup-style',
];
}

5. Best Practices

• Image Scaling: Always use an "Image Style" for images inside popups to prevent large files from slowing down the map performance.
• Mobile UX: Popups take up significant screen space on mobile. Ensure the "Auto Pan" setting is enabled so the marker doesn't get hidden behind the popup.
• Links: If your popup contains a link to the "Content: Path," ensure it is rendered as an absolute URL or a proper anchor tag to allow easy navigation from the map to the full page.
• Check Module Documentation: You can always find code examples and detailed definitions in Leaflet Module's README.md file.