Giugno 2025
  • Drupal
  • GIS and Web Gis 2.0

Drupal Leaflet Widget Map (GeoJson) Overlays (10.3.x)

Leaflet 10.3.x Now Supports GeoJSON Overlays in Leaflet Widget Maps

The latest Drupal Leaflet 10.3.x release (https://www.drupal.org/project/leaflet) brings a powerful new feature to the Leaflet Widget Map: support for custom GeoJSON overlays. These overlays can serve as non-editable, snappable drawing references, enhancing both the usability and interactivity of geospatial content editing in Drupal.

Full Backward Compatibility: Drupal Leaflet 10.3.x remains fully backward-compatible with the 10.2.x branch—so upgrading is safe and seamless.

Feature Overview

This release introduces a new configuration section for each Leaflet Map Widget instance, enabling the inclusion of GeoJSON sources as visual overlays on the map. These overlays are read-only but can optionally support snappingduring geometry creation or editing, streamlining workflows for editors and site builders alike.

Supported GeoJSON sources include:

  • External URLs
  • Internal Drupal content (e.g., geofield data from existing entities)

By integrating these vector layers—regardless of source—users benefit from a more intuitive and efficient geofield editing experience.

Functional Highlights

The Leaflet Map GeoJSON Overlays functionality is tightly integrated into the Leaflet Widget system, featuring advanced AJAX and real-time interactivity support. It introduces an additional settings section that enables dynamic and interactive integration of GeoJSON data within Drupal Leaflet widget maps, with the inclusion of the the following key features:

  • Support for custom styling of paths and geometries, following Leaflet Path documentation. Points are converted into styled circle markers designed not to visually interfere with standard Leaflet markers added on the map.
  • Boundary extension of new empty Leaflet Widget Maps to automatically fit and extend to include all GeoJSON overlay features.
  • User interactions such as Snapping to GeoJSON overlay elements while in edit mode.
  • Toggling of GeoJSON Overlay from the Leaflet Layer Control:

Supported GeoJSON Overlay Data Sources

You can configure overlays using fields from Drupal entities. Supported field types include:

  • Text field (string_long)
  • Link field (link)
  • JSON field (json)

These fields can represent the following GeoJSON sources:

  • Static content: Predefined GeoJSON data (e.g., countries, provinces, transit lines) that can be copied from external sources.
  • External or internal URLs: Load GeoJSON data from external links or internal Drupal routes/paths.

Tip: Use the Views GeoJSON module to generate internal GeoJSON endpoints from existing Drupal content — perfect for adding editable and snappable overlays to your Leaflet Map Widgets.

How to pre-test this:

You can test GeoJSON Overlays using these example sources:

Real-World Impact

This implementation significantly improves the Drupal Leaflet module’s editing experience, enabling professional-grade spatial workflows directly within Leaflet Widget components. It’s a leap forward for Drupal-based Web GIS—bringing advanced mapping features closer to the editorial interface.

 

  • Drupal
  • Leaflet
  • GeoJSON