[PLUGIN] - Google Maps Geometry/Drawing + W3W

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.


CleanShot 2024-02-22 at 10.45.14

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.

Hi @dancoburn89

Try moving the enable drawing tools action from the page is loaded event to a do when condition is true, where the condition is “do when loading libraries is no” and see if that fixes it for you.

Paul

Have you seen this used for use cases involving measuring buildings or landmarks?

I’m specifically curious about measuring the area of a roof via the satellite image, using the drawn shapes to cover the area.

Not specifically for that, but you can measure the area within shapes in square meters or get the total length of all sides. This can be done for any shape. Once you have that, you should be able to use other calculations to get different units of measurements. Polylines can be used as a type of measuring tool also which will give you distance in meters, miles, kilometres etc.

When you draw a polygon onto the map, the state called “Measured area (polygon)” will return the square meters of the polygons area and the state called “Measured length (polygon)” will give you the length of all sides (I think from memory).

@pork1977gm Having trouble with this - multiple attempts trying to formulate :count Sighting with lat/lng within the polygon shape. What do you mean by condition?

Hi @travis1

That should work, I will test it in a bit to be sure, but what happens when that runs and the shape is drawn? Do you not see a number in the middle of the shape?

Paul

Hey @pork1977gm , I figured out what was going on but haven’t found a solution yet. So essentially the bubble native search box interferes with the ability of the map to load libraries, only on mobile, everything is working fine on desktop. It will never get past the loading libraries step on mobile and thus no drawing tools can be enabled and no drawing mode selected. Delete the search box and everything works fine on mobile. I thought I would just switch everything over to using the autocomplete instead of bubbles search box, however, the autocomplete is in a popup and when you enter an address into the autocomplete the suggestion window does not appear on the same z axis as the popup, it is behind it on the page and therefore you can’t select any suggested addresses. Not sure what to try next or if theres any work arounds, maybe you can provide some insight once again. Thanks again!

also i have tried to conditionally show/hide bubbles search box and disable it and it doesn’t have any effect on mobile

Hi @pork1977gm, thanks for the quick reply. I did a simple formula , Search for Sightings: Count and the number appeared correctly (3).

This is where I’m a bit confused:

Search for Sightings:
{lat/lng is within ‘poly1’}
:count

Can’t figure out how to create {this} formula. It would be amazing if it’s possible!

Shape
Screenshot 2024-03-01 at 4.08.44 PM

Sighting
Screenshot 2024-03-01 at 4.08.53 PM

Thank you in advance!
Travis

@travis1

Ok I see what you’re trying to do here. So to do this type of calculation, you need to run the Contains location action. Put this action just before your Draw shape action and then setup the contains location completed event. Now move your draw shape action into that event. Replace that “Search for Sightings count” value with: “Google Map’s Addresses inside shape count”. To make sure that state is populated correctly, make sure you have this option selected in the plugin element then I think it should work.

image

The way you’re trying to do it now is for database values only. When you use the contains operator like that, it’s just checking to see if the one bit of data is within another bit of data but not actually working out if the geographical positions are within the boundaries of the shape (if that makes sense).

Hopefully this is what you mean :slight_smile:


@dancoburn89

I’ve run into these type of issues before, it’s caused by the maps plugin and bubble both attempting to load the Google Maps API scripts. When you reference a geographical address of any kind on your page before the plugin map has loaded (so searchBox is one example, trying to use current user’s address in the page load event would be another) it interferes with how the drawing and geometry libraries are being loaded.

Where are you running the “Enable drawing tools” action? That should ideally be within a “Do when condition is true” event and the condition will be “When Google Maps loading libraries is no”. Keep any conditions off the searchBox so that loads straight away. Let me know how you get on with this. I will do further tests on mobile if needed. I think you will need to allow for Bubble to load the Maps API script first and then when the plugin loads, I have logic included to detect this and run things accordingly. If you’re still running into issues, PM the URL to your page and we’ll go from there).

Paul

Hey Paul, sent you a DM with the editor link. I have a do when condition is true workflow - drawing tools are enabled when loading libraries is no. I also took all conditions off of the searchbox but I am still having issues on mobile. Thanks for taking a look.

Hi Travis,

I can’t remember if I ever got back to you not, I got so much work on sometimes I forget but I try to get back to everyone.

Did you manage to get this to work?

Paul

Update v1.276.0

State name change:
Decoded polyline coordinates has been changed to “Decoded shape coordinates”

New state
Encoded shape coordinates
Contains an encoded polyline/polygon set of coordinates, can be populated through use of the 'Draw shape', 'Rotate polygon', 'Draw shape by measurement', 'Convert to polygon', 'Cut shape', 'Merge shape' and 'Split shape' actions. Also populated through direct use of the drawing tools when drawing a polyline or polygon only.

Action name change
Decode polyline has been changed to “Decode shape”
(Additional settings included with updated documentation sections)

Event name change
Polyline decoded has been changed to “Shape decoded”
(triggered by the ‘Decode shape’ action)

Action updates
The “Draw shape” and “Draw list of shapes” actions both contain a new option which says “Use encoded data”. When this is set to Yes, you can use the encoded shape data (or a list) within the coordinates field to draw either polylines or polygons back onto the map. This should save on having huge amounts of coordinates saved in your database when dealing with large shapes.

Paul

Update v1.277.0

The Draw shape and Draw list of shapes actions can now use string arrays to put their shapes back on the map.

Previously, only a comma separated string of coordinates would work like this:
31.4711, 74.3618, 31.4710489, 74.3619096, 31.4710891, 74.361782

In addition to the above, you can also use this type of format:
[{"lat":31.4711, "lng":74.3618},{"lat":31.4710489, "lng":74.3619096},{"lat":31.4710891, "lng":74.361782}]

These are only supported for polylines and polygons.

Hi @pork1977gm , I appreciate the follow up. I tried different variations of your instructions. For clarification, I don’t need the “Google Map is ready Event” anymore? Originally, the draw shapes were happening when that event was completed (when the Map was ready) so that they would appear on page load. I have several polygons that’d I’d like to draw so you’ll see that I have them setup one by one.
^

I created the event “Google Map Location Completed” and added the Contains Location action as your described. Then input Search:poly1’s coordinates for the shape coordinates:
^

The subsequent Draw action is not allowing my to [Replace that “Search for Sightings count” value with: “Google Map’s Addresses inside shape count”]
^

Let me know if I did something wrong. Thanks for all your help with this - almost there and it’ll be ready for launch.

Thanks,
Travis

Hi @travis1

No problems, this can be tricky to get working. The thing to remember here, is that it’s one on one relationship with the shape, so to work this out you have to supply a single polygon’s set of coordinates and then the list of sightings. Once the action has that then it can use the list of sightings to find out which ones are inside the polygon.

To make it a little easier, I’ve set up a demo page showing you three ways to do it, you probably want the “third way”, take a look here and preview the page.

Paul-testing-4 | Bubble Editor

I’ve put three maps on the page to keep the actions segregated to each map and created three workflow folders for each section.

With regards to the third way of doing it, whatever this count value reports back with, will be the amount of times it loops.

Hope it helps
Paul

Update 1.279.0

  • Resolved a potential looping scenario with regards to the loading of the libraries and initiated a max retry limit.
  • The ‘contains location’ action has had an option added allowing you to control the triggering of the event.
  • Shape labels now align their position correctly so upon zooming in/out they shouldn’t become out of place on the map.
  • Shape labels can now be changed through the ‘Change shape properties’ action.
  • Internal shape labels array now cleared when the shapes are cleared from the map.

Paul

@pork1977gm this was super helpful! Thank you for this. I got each shape to draw using the state:count. Only issue I have is that the change shape properties does not have “label contents”

I also have these all set to “no” on both draw shape actions but I’m still able to drag the shape on the map.

If it’s helpful my app is here:
https://heioau.bubbleapps.io/version-test/sightings?debug_mode=true
username: test
pw: test

Thanks again.
Travis

No worries, the change label option I added into the last update I think, just check you’re using the latest version. Retry both issues once installed and let me know how they both go.