Expanding Leafy Map Plugin Power - CrowdFunding Call

Hi @vini_brito

I believe creating the ability to use custom HTML to create the popup would solve the issues. In the past I used the markermate plugin that is used in conjunction with a google map element and it is awesome.

With the custom HTML you can style the popup size itself, as well as put links to ‘call’ or navigate to a page…one thing I don’t think it can do, which would be great as you mention is to have an ability to trigger a workflow on the page from within the popup.

I’m personally still up for it, and if others are then we could get it started.

Hi @boston85719 I’m not currently needing the HMTL popup feature for any apps.

What I would love to be able to do though is showing a custom element at the coordinates of a hovered or clicked marker. If that can be added to the request, count me in on this funding ;).

I am also still struggling with the custom marker misalignment issues as well. Would be great to get it finally fixed if possible.

Try placing HTML in the old popup text field and see what happens :blush:
Let me know how that goes!

@vini_brito I tried to set things up like this…not sure if I’m doing something wrong.

and this is the result when the marker gets clicked

This is what the page looks like before getting clicked

<style>
div {   max-width: 450px;   float: right;   margin-top:0px;   margin-bottom:0px;   margin-left:5px;   margin-right:0px; }

h1 {    font-size: 20px;    font-weight: 500;    font-family: 'Roboto';    padding-top: 5px;    padding-bottom: 5px;    padding-right: 0px;    padding-left: 10px;    text-align: justify;    color: #1A2E36; } 

p.info {    font-size: 14px;    font-weight: normal;    font-family: 'Roboto';    padding-top: 0px;    padding-bottom: 5px;    padding-right: 0px;    padding-left: 10px;    text-align: justify;    color: #1A2E36;    opacity: 75% } img {    max-width: 100%; } 

p {    font-size: large;    color: #1480A9;    text-align: justify;    padding-left: 10px;    padding-right: 0px;    padding-top: 5px;    padding-bottom: 10px; }

</style>

<a href="https://google.com"
target="_blank">
</a>
<div>
<h1>H1 Title</h1>
<p class = "info">Rated 1 out of 5</p>
<p class = "info">This is located at this location </p>
<p class = "info">Our Phone Number</p>
<p><a href="https://www.google.com" target="_blank">View Retailer Profile</a></p>
</div>

Okay, so yeah it will need me to take a look at that with the html you used.
So, crowdfunding is up, one last attempt :blush:
In about two weeks I’ll consider this one closed if it doesn’t gets enough people in.

I’d still support some further development. Having the iframe popup is nice, but I really need the main page to know what is being clicked in the popup.

I’m also having difficulty getting the popups to display the location specific detail I need due to the way “Unique name” works. I’d like to give the markers unique names and then pass those names to the iframe, where that page would accept the name and use it to fill a group (where the unique name is the unique ID of a thing). Leafymaps will assign “uniquename1, uniquename2, etc,” but doesn’t seem to work with dynamic data. If I have a list of markers with unique IDs and I put that list in the “Unique name” filed, Leafy assigs the entire, comma-separated list as the name instead of assigning one item in the list to each marker.

When setting a list of markers in the workflow, for the list you are setting you need to add the lat and lng from that list…using that same list of things, you can get that lists item # using the marker clicked index number

Would definitely be nice to get the custom marker id to represent the things data though as that would probably give a bit more confidence in returning the correct data.

For me the iframe is not as nice as custom HTML since you need to create a page and it doesn’t seem to provide any control over the size of the popup itself. In the past I’ve use the marker mate plugin with google maps for the purpose of getting custom HTML for a popup and it works fantastic, and even allows for conditional formatting on the popup dimensions so when the page is larger you can have a wider popup and when page width is smaller, you can make the popup width less.

Ideally the custom HTML would work just like marker mate as it is very simple to use. It also uses the clicked markers things data so you can have dynamic expressions in the html.

Would you be interested in supporting to get type of functionality out of popups?

1 Like

Thanks. Took me a minute but that worked great. Another image below showing the custom popup URL for reference. The popup size is working for me, but I control the app and also the page linked in the iframe so setting the dimensions isn’t an issue. It’s really slow compared to the rest of the app, though, as the loading in the iframe takes time even though it’s a page in the same app. Custom HTML would still be better I think.

I’m still on board with supporting further development on this plugin as it keeps me from having to use the terrible Mapbox Maps plugin.

I may try to implement a separate Bubble slide-out for the marker details instead. Not sure on the difficulty of if getting the the map to move to the correct position and move back in sync…

Hey @vini_brito ,

The demo you shared with us is not working anymore (https://leafy-tests.bubbleapps.io/version-test/map_click_custom_popup).

Would it be possible to share a new link? Would also love to see the Editor view.

I’m currently not able to connect the dynamic data between my marker and my custom popup.

Thanks a lot mate!