I do know of one example that uses google maps, its an app for shopify called ship sketch. It appears to be using the same google drawing tools. Heres a screen shot.
Don’t suppose you have a URL of that in action do you?
That delete button looks like it’s on a shape which has already been drawn. Is that what you want? or do you want to be able to delete points as the shape “is being” drawn… 2 very different scenarios.
I’ll do some research into it.
Yeah its working on a shape thats already been drawn, so essentially you connect the last point to create the polygon and then you can delete selected points of the polygon if you screwed up or wanted to change the shape. Thats the functionality I am trying to duplicate using your plugin. As for URL, its in an app on the admin side of my shopify store so you would have to be logged into my store to see it.
Here is the scenario that I am finding in testing. If a user traced around a geographical area and created a lot of nodes but then later on wanted to change the shape in that area they would either have to straighten out every single node or delete the whole shape and start over, so just being able to delete the nodes would be a more ideal solution.
In the screen shot above I haven’t saved the shape to the database so in that scenario I could press the back arrow for each node but once the shape is saved the back arrow is no longer available and each node would have to be moved or shape deleted
I’ll have a look at it but Google don’t offer this functionality so something custom will need to be built. I need to work out how much work it will be and whether I want to implement it into the plugin first. Give me a bit of time and I’ll come back to you.
Sounds good, I understand and thanks for considering it.
Hi @pork1977gm thanks for this app. I’m building an app that lets users record a sighting of a native bird here in Hawaii. We don’t want to display exact location of birds so that people don’t go and disturb them. So for the public display page, I want to add a set of polygons (something like this):
with the number of sightings in each polygon.
Having trouble figuring out how to set the location of the map, add multiple polygons.
And wondering if a data:count in middle of the polygon is feasible with your app.
Let me know,
Thanks,
Travis
Hey @pork1977gm I noticed an error with the clusters on the map.
My current app is integrated with a Rest API calling map markers dynamically through the workflows, and setting the pins on the map.
Since I’m working with a lot of pins, clusters are very important to my application.
I add & move markers whenever the map is moved in the workflow.
I noticed that the clusters for markers that have been removed stay and also clusters are duplicated for markers that are being added.
this relates to markers added or deleted through workflows.
It would be great if this could be fixed so that clusters only show based on the current markers that are on the map rather than all markers that have ever been on the map if that makes sense.
Ah ok, thanks for letting me know, I’ll try and get this fixed sometime this week and let you know once sorted.
1 Like
Hi @travis1
So to set the initial position of the map, use these fields shown here
To add multiple polygons, you need to run the “Draw shape” action but that will require a set of coordinates which are all the points to make up the polygon.
And to set a label inside the middle of the polygon, you can set this option inside the draw shape action, although I may need to look at the positioning around that label. Let me know if you run into any troubles with that.
Hope that helps,
Paul
Hi @ibrahim.s
Can you try the update I’ve just pushed?
There were a couple of things I didn’t do when implementing the clustering which I’ve now resolved. When markers were removed, they weren’t being removed from the cluster markers array, and when the cluster action run a second time it was loosing reference to the previous markers displayed on the map.
Hopefully you’ll be ok now. If it doesn’t work as expected, can you PM me some screenshots showing how you’re running the actions.
Thanks,
Paul
@pork1977gm thanks for the reply. I’m new to this but can see how dynamic and powerful this plugin you built is! A couple of follow up questions.
What’s the best way to load the polygon shapes? I’ve seen in previous questions/responses above that some have created a data type for their shapes, so I tried it:
But got an error:
I’m also having trouble with the map center lat/lng:
But when I move the map, it does not update the lat/lng
It remains 21.2814, -157.7921
Thanks in advance for the help!
Travis
Hi @travis1
No probs, so first off, don’t use Bubble’s page has loaded event. That event triggers when the page is loaded and not when the map is loaded (which happens way after that). Instead use the plugin’s “is ready” event to run the draw shape action in, then you’ll be fine and that error shouldn’t occur. It looks like those coordinates aren’t right though, how did you get those in the field? they should come from the state as mentioned in the doc section of that option (drawing polygon coordinates) and not just a set of lat/lng pairs, this is because the last 2 positions need to be the same as the first in order to close the shape.
Regarding the map center states, they should be working although there could be an error somewhere. Are you able to send me the URL to that page and I will check it for you. Failing that, open up the dev tools, go to the console tab and then try moving the map and seeing if any red errors appear.
Paul
@pork1977gm thanks for the quick reply! This is such an awesome app! With your guidance I was able to fix the error and draw the shapes, but am now getting stuck on counting the number of “Sightings” (data type with lat/lng) that appear within a specific polygon.
I created 3 sightings, one appears in each polygon.
What formula can I use to show only the :count of sightings with lat/lng coordinates within the polygon?
Thanks again for all your help.
Travis
Great, glad you got that far. So you’ll probably want to structure things so that parent group’s sighting can be used as the condition.
Hey @pork1977gm
That worked wonderfully. thank you!
Hey @pork1977gm
Thanks again for all the help.
there is one other thing I’ve noticed that would help in working with API data.
I’m building a Real estate site that integrates with an MLS Rest API and wants to display markers dynamically. However, when trying to add markers that are not saved in a database the Lat or Long fields don’t pop up.
I’ve had to build the application within the workflows because of this and it has hindered the capabilities of your plugin and the map performance as well.
it would change the game for me if the map element would accept data from APIs for the dynamic marker fields within the element itself as I would need the markers to automatically be removed when they are no longer in the map boundaries and to display new ones that are in the map boundaries so have a dynamic marker would allow me to accomplish this without having to put together complicated workflows for adding and removal of markers.
As seen in the screenshots when the Data type is set to the API itself, it allows me to select the fields but not build a dynamic expression using the API data since I have to adjust the formatting from the API to satisfy the fields themselves reference the api data screenshot
Also, when setting the data to equal the parent group & setting the parent group to display data from the API in the workflows Then setting the data type within the map element to equal the parent group. The fields won’t populate at all.
a fix that would allow me to build expressions in the dynamic markers filed would be amazing.
hey @pork1977gm, In my app I have popup that walks the customer through a 4 step process to create an order. One of the steps uses your map plugin to show the customers a satellite view of their delivery location, and then they place a marker on the map at the exact location they want their product placed upon delivery. This is working great on desktop but in testing on my mobile device I cant seem to get it to work. Is it possible to place a marker on a map on a mobile device? The error I am currently getting is, “cannot select drawing mode, must enable drawing tools first” however I enable the drawing tools on page load and as a backup when the popup that walks the customers through the order steps is shown.