Help me create a frame for map

I’d like to create an app like this:
Hello - Will You - I Do - Standard Style - Map Canvas Print, Anniversary Gift | 365Canvas (click PERSONALISE)

I used a plugin named Leafy Map to connect to Mapbox API to show the map on my app. User’s data collected (latitude and longtitude).

This is my app: https://mymasterapp.bubbleapps.io/version-test/map?debug_mode=true

But I have no idea how to create a frame (heart shape) for my map and also export it as a print file. Any suggestion would be a big help for me.

Thank you!

Why don’t you use a PNG image above?

And a plugin to transform the group in a PDF or the group in a JPEG?

Sorry But Please explain the meaning of “Why don’t you use a PNG image above?”.
Thank you.

P/S: I just add a PNG above map in my app as you recommend?

That’s it!
A white PNG with the shape you want transparent. So you will have this mask effect. User will see only what is passing thru the transparent hole…

Thank you for your reply to my question. But we can not drag the map anymore. I think I should have a overlay or kind of that?

Oh… now I see what you are trying to do…
Unfortunately, doing as I suggested you will indeed loose the interaction with your map…

I assume you will need some CSS job to mask your map. Take a look here:

Maybe @Jici can help you to apply the CSS into your map.

Anyone know where I can find a Bubble course to buid a custom photo gift website like this?