Draggable Mapper

Draggable Mapper lets you place markers on an image map using a user-friendly drag-and-drop interface. Each marker can contain a title, description, and custom icon/image. This allows for creating interactive maps that can be used for various purposes.

Features

• Custom entity type for map data
• Drag-and-drop interface for marker placement
• Resizable markers with responsive content
• Support for marker titles, rich-text descriptions, and custom icons/images
• Responsive design

Use cases

Floor Plans and Building Maps
Create interactive floor plans for buildings, malls, or campuses with points of interest that visitors can interact with. Perfect for architectural diagrams, evacuation plans, facility maps, and similar visual schematics.

Components in Systems
Create diagrams with components that can be interacted with, such as boat rigging systems, automotive parts diagrams, HVAC system layouts, electrical circuit diagrams, network infrastructure maps, industrial machinery schematics, or plumbing system overviews.

Image Annotations
Add interactive markers to any image to create a more engaging content experience.

Location Mapping
Upload a custom map image and mark important locations with descriptive popups.

Educational Resources
Create interactive diagrams with explanatory markers for educational content.

Post-Installation

Creating a Map

• Navigate to Structure > Draggable Mapper Entities > Add Draggable Mapper (/admin/structure/draggable-mapper-entity/add).
• Upload a map image.
• Add a title and description for your map.

Adding Markers

• Click "Add Marker" to create a new marker.
• Fill in the title and description for the marker.
• Drag the marker to the desired position on the map.
• Resize the marker to the desired size.
• Optionally, upload a custom icon/image for the marker.
• Save the form to update the marker's position and details.

Embedding Maps

• Maps can be embedded in other content using an entity reference field or directly through their own URL

Marker Display

Markers can be configured to show different information:

• Title only
• Title with expandable description
• Custom icon with tooltip title on hover
• Custom icon with expandable description

Additional Requirements

• Paragraphs module
• Inline Entity Form module
• jQuery UI Draggable module
• jQuery UI Droppable module
• jQuery UI Resizable module

Recommended modules/libraries

By default, Drupal's image fields have limited support for SVG files. If you need to use SVG files for marker icons you can install the excellent SVG Image module. Add 'svg' to the allowed file extensions in the marker icon field settings (under Structure > Paragraph types > DME Marker > Manage fields > Icon > Edit).

Supporting this Module

If you’d like to support the development of this module, you can contribute through my Patreon.
Your support helps ensure continued development and maintenance of this module. Thank you for your contribution!