Draggable Mapper Module Adds Interactive Image Marking to Drupal

Sergio Morais, a Drupal consultant and full-stack developer, has released Draggable Mapper, a new Drupal module that enables content creators to place interactive markers on images using a drag-and-drop interface. The module is built with Drupal best practices, using custom entities and paragraph types to ensure seamless integration with existing content.

Draggable Mapper allows users to add markers with titles, rich-text descriptions, and custom icons. Markers are resizable and responsive, adapting to various screen sizes. The interface is designed to be intuitive, enabling editors to position markers directly on an uploaded image and configure their content without coding.

The module supports a range of use cases, including interactive floor plans, system diagrams, annotated images, educational resources, and custom location maps. For instance, it can be used to create building maps with points of interest, illustrate machinery components with pop-ups, or provide annotated diagrams for online learning.

Maps created with Draggable Mapper can be embedded within other content using entity references or accessed directly via their own URLs. Marker display options include title-only, expandable descriptions, and custom icons with hover tooltips.

Installation requires the Paragraphs module, Inline Entity Form, and jQuery UI libraries for draggable, droppable, and resizable functionality. SVG support for marker icons is available by installing the SVG Image module and adjusting the allowed file extensions.

Sergio encourages contributions and feedback from the Drupal community and offers ongoing development support through his Patreon.

For more details, downloads, and contribution options, visit the Draggable Mapper project page on Drupal.org.