Adding Markers to an Image (neccesarlily a map)

Need help App Organization
1

Hi there!
I want to allow the User to add markers to an image, either by clicking or drag and dropping something on an image. Kind of like in instagram stories where you can create link, text or emoji and drag it somewhere on your picture/story, so that when others hover that point it shows them the link/text/emoji.
Is this even possible with bubble or is that to much functionality? Im quite new here but my first thought was using a drag and drop field. Im not sure if this would work though.
Any ideas how I could implement such a feature?
Thanks in advance for any replies! :slight_smile:

2

Drag and drop is what you are thinking of - a Bubble native plugin
https://manual.bubble.io/core-resources/bubble-made-plugins/draggable-ui-elements

The overview of what you do is to use the actions to capture the X & Y of floating elements, and actions to position elements on an X & Y position.

It’s quite a complicated place from which to start learning Bubble! But hopefully, this gives you a place from which to start your journey. :slight_smile:

I would start by looking for drag and drop tutorials. I can’t find a good working example for you to follow. But I personally recreated a clone of https://frame.io/ - full drag and drop and placements of comments on a video time-line - which works really well - so it is achievable with Bubble.

3

Thank you very much for your response and inside into how you did this! :slight_smile:
I will try my best to get it done with the draggable ui elements plugin.
Do you know by any chance if there is also a possiblity to do this just by clicking?
For example: The user clicks somewhere on the image and after clicking a textfield opens where the user can enter some data. After that the textfield is pinned to the point where the user clicked?

4

Yes very possible.

5

Any idea how this could be implemented with given plugins/features? Or would i need to code my own plugin for this?

6

This plugin might help Image Marker Plugin - To mark the pin points of your images

But I’ve been playing with it and it doesn’t seem to work very well (or at least it isn’t obvious how it should work … probably just me)

https://knowcode-tech.bubbleapps.io/version-test/image_markers?debug_mode=true

1 Like