Add interactive image annotation with zoom, drag, coordinate tracking, and marker placement. Trigger workflows on marker or background clicks and retrieve associated data directly in your app.
       
⚡ Main Functions

• Dynamic background image canvas
   Display full-width and full-height background images.
• Zoom and drag interaction
   Zoom in/out and drag the image when zoomed.
• Coordinate tracking
   Read X and Y positions in pixels and percentages during mouse movement.
• Marker placement and interaction
   Place markers using coordinate data and retrieve associated database values.

⚡ Key Features

📍 Marker click handling
      Trigger actions and access data when a marker is clicked.
🖱 Background click detection
      Trigger workflows when the canvas background is clicked.
📊 Exposed coordinate data
      Access live coordinate values for use in workflows.
📱 Touch-optimized dragging
      Drag functionality optimized for touch screens.



Documentation

We’ve created a detailed step-by-step guide for the Image Annotation plugin. It includes a comprehensive overview of all features, practical use cases, and answers to frequently asked questions.

       
FAQ

- How do I set up the background image for annotation?  
Simply add the image to the plugin’s background settings. The image will automatically stretch to fit the full width and height of the visual element, allowing for easy annotation.

- Can I make the background image draggable?  
Yes, the plugin allows users to drag the background image, especially when zoomed in. This makes it easier to annotate specific areas of the image, even on touchscreens.

- Is there a way to get the coordinates of the mouse over the image?  
Yes, you can access the X and Y coordinates of the mouse when hovering over the image. The plugin provides both pixel-based and percentage-based coordinates, available as exposed states.

- What happens when I click on a marker?  
Clicking on a marker triggers an event, and you can use it to initiate actions in your Bubble app, such as displaying additional information or triggering workflows based on the marker’s data.

- Can I use the plugin with dynamic data from my Bubble app?  
Yes, the plugin allows you to use dynamic data, placing markers on the image based on that data. It enables dynamic, context-sensitive annotation.

   


Our Similar Plugins

- Top 15 Plugins for Bubble - Bundle




Support

If you still have questions or unresolved issues, you can contact us.


Risk-free Trial

The most risk-free way to try out this plugin is to subscribe to it. If you unsubscribe a few days later you will be charged on pro-rata basis, so for example if the plugin monthly price is $5 then you’d pay only 17¢ per day ($5/30 days)!