[PLUGIN] - Google Maps Geometry/Drawing + W3W

[pork1977gm]

Hi @jeffprewitt

There isn’t a way to do this right now, but I can add some additional options into the ‘Contains location’ action so that a list of addresses are fed into it, and only certain addresses are returned after the action has run. These would be the addresses which would be contained within the polygon.

I think they’ll be returned as lat/lng pairs though, so you’ll want to then use Bubble’s functionality get them back into addresses again. I haven’t thought the process through quite yet.

Paul

[nuttnest]

Is there a way to extract the GPS Coordinates from the Search Geographic Address Input in order to draw a shape? Ultimately, what I want to accomplish is to draw counties, like the one in the picture (this is the result of searching for a County on Google).

[pork1977gm]

To do that, you’d need to get the polygon coordinates which make up the country, then run them through the Draw shape action. There’s probably some place online where you can get that info.

Just re-reading what you asked here, so you can get the lat/lng easily enough from Bubble’s geo search box results and the country can be extracted from that too (I think).

I do have a large geojson file which contains all the countries of the world and their respected polygon coordinates. I suppose I could put together an action (or a separate plugin) that will allow you to search through that file with either the country code or a partial search on the country name and return the data needed to then run through the “Draw shape” action - or “Draw list of shapes” when it’s completed.

https://s3.amazonaws.com/appforest_uf/f1597153949502x504496584038760960/world_distributions_geojson.geojson

I’ll give it some thought about the best way to do it. I’m just thinking on the process…

Do you think an action of some kind would fit your needs here? Say there was a list of countries to choose from in a dropdown and when you selected one, that country would then be drawn onto the map, would something like that fit in with what you’re doing? I guess you’d need to tally the countries up between what the user searched for and what was being selected in the action? I don’t think Bubble return country codes do they?

[pork1977gm]

update v1.101.0

New features have been added. See below for details.

@ts11 @justinnnnnn @jeffprewitt

NEW ACTION

Draw list of shapes
This action is a simplified version of the ‘Draw shape’ action and as such only contains a subset of the options available. The color fields supplied in this action are going to come from a list of texts in your database. Both HEX and RGBA values will work. Using transparency with HEX colors will require the 2 additional transparency digits appended to the end which you can get here - hex transparency codes

-Slow iterations
If you have a need to slow the iterations on adding each item in the list, then set this value to a number in milliseconds. By default, this is disabled and it will run as fast as possible.

-Shape types
Supply a list of shape types here, this is the type of shape that you want to draw onto the map. Accepted values in this list can be polygon, polyline, rectangle and circle.

-Shape coordinates
Supply a list of coordinates which make up the shape. You should use the coordinates which are contained in the various Drawing states to make sure the format is correct.

-Fill colors
Supply a list of fill colors here. Leaving this field blank (or having a missing value in the list) will apply a default value of #FF000073 (red with 45% transparency) to the shape added.

-Stroke weights
Supply a list of stroke weights (border thickness) for the shapes in pixels. For a Polyline, a value of 0 will be replaced with 1 otherwise you cannot see the line. Leaving this field blank (or having a missing value in the list) will apply a default value of 0 to the shape added.

-Stroke colors
Supply a list of stroke weight colors (border color) for the shapes. Leaving this field blank (or having a missing value in the list) will apply a default value of #9E0000 (dark red with 100% transparency) to the shape added.

-Stroke weights (select)
Supply a list of stroke weights (border thickness) which are applied to shapes when the shape is selected to define the thickness of the border. Leaving this field blank (or having a missing value in the list) will apply a default value of 6 to the shape added.

-Stroke colors (select)
Supply a list of stroke weight colors (border color) which are applied to shapes when the shape is selected to define the color of the border. Leaving this field blank (or having a missing value in the list) will apply a default value of #9E0000 (dark red with 100% transparency) to the shape added.

-Info window texts
Supply a list of info window texts which display in the info window when the shape is clicked. Leaving this field blank disables the info window popups for all shapes added.

-Shape Id’s
Supply a list of shape Id's here. If specified, you can use custom Id's for any shape, or a list of unique Id's from a table. Not specifying an Id will generate a random one for each shape added. This allows you to later use this Id to select, remove or perform other actions based on these shapes.

The following options will apply to all shapes in the list when their events trigger and not when they’re first added to the map (unlike the Draw shape action). For example, when a shape is clicked, dragged, resized etc.

-Measure length
When set to Yes, will populate the corresponding 'Measured length' exposed state with a value in the specified units.

-Measure area
When set to Yes, will populate the corresponding 'Measured area' exposed state with a value in square meters. Note: This will be ignored for a polyline.

-Units
Select the unit to measure the length calculations in (Meters, Miles, Kilometers)

-Get center
When set to Yes, will populate the 'Center coordinates' states with latitude and longitude values.

-Contains markers
When a shape (not a polyline) is drawn and there are markers within the boundaries of that shape, switching this option to Yes will populate the list states 'Contains markers latitude', 'Contains markers longitude' and 'Contains marker Ids'.

-Editable
Make the shape editable.

-Draggable
Make the shape draggable.

-Go to coordinates
Set the map position to these coordinates after the list of shapes have been added. Value must be in the format of latitude, longitude, for example: 51.20911516189098,-1.5825777840614275

---

STATES

• Loading markers
  When a list of markers is being added to the map, this state become Yes, otherwise it's No.

• Loading shapes
  When a list of shapes is being added to the map, this state become Yes, otherwise it's No.

---

ADDRESS LOOKUP STUFF

There’s a new object type state called “Addresses inside shape” and it’s been created to work with the client-side version of the “Contains location” action. You must first configure it as shown.

The details are in the document field as shown here. You can supply this action a list of Bubble addresses and tell it a shape, then it will return the addresses that are within that shape only. This will also trigger an event once it’s completed running, called ‘Contains location completed’.

If you’re running the server-side version of this action, then it does the same but it returns the addresses like this…

The demo page now has a full working example using both versions of these. Read what I’ve written and hopefully it will make some sense!

---

OTHERS MINOR TWEAKS

Both actions which add lists of markers and shapes, now include an option to slow the iterations per list item, just in case you need to control that for any reason. They have the same setting and have been set to 200ms in the demo page mainly to give enough time for the loading marker/shape states to change to Yes.

Both actions which add single markers and shapes, include this new option so you can control whether you want to trigger the associated ‘drawn’ events.

Paul

[pork1977gm]

@nuttnest

If I could give you an action which allows for any country to be highlighted by means of using the country code, like the example shown below of Western South America, would that work for you?

The fill and stroke colors would be configurable. The country code would be mandatory but I could probably hook it up to Bubble’s search box to make it work through means of address also (so long as the address has the country in it).

[nuttnest]

I am looking for Counties specifically! I tried searching on Google for the coordinates and manually uploading them through a CSV file, so the shape could draw those GPS coordinates but there where nowhere to be found, just the Latitude and Longitude. That’s why I wanted to know if there is a way to extract those values from Bubble, but thank you!

[pork1977gm]

Ah I see! Gotcha!
Doh… I mis-read that one!

[veeslop]

Hey all !

Might be simple to others, but i’m having a hard time setting this up to show a list of “pins” with dynamic radius - could someone throw me a hint ? Thanks

[pork1977gm]

Can you throw a few screenshots of how you have things setup and I’ll give you a hand with it.

[pachocastillosr]

Hi,

I am building a delivery app were stores define their delivery zones, ideally by drawing them in a Google map.

Users should only see the stores which have a delivery zone that includes the user’s current location (as per the documentation of this plug-in, this would be sort of a “contain location” check but in a backend workflow)

Will this plug-in allow me to do this? How?

Thanks!

[pork1977gm]

Yep, pretty sure you can do that. The contains location action is available as both client/server side versions. You can either feed a single address or a list of address, and then give it an area to look inside (any of the shapes). It will either update a state with Yes/No (if supplying a single address) to tell you if it’s inside/outside the boundaries of the shape, or if you’re feeding the action with a list of address, then it returns only those addresses from the original list that reside within the shape instead. Any problems with either of them, just let me know.

[another]

Nice to see this thread alive here! Great work @pork1977gm

In regards the markers, is it possible to use user profile photos or company logos to display them dynamicly? Yes, it is, but usually there are larger images, that if fetched, appear quite large on the map.

Trying to figure out thesedays if there is a way to resize a dynamic image value to a smaller size, for example 64x64, so that on maps here appears with proportionate size. Is there already pre-built option in the plugin? Or another turn around way by someone?

Thanks!

[pork1977gm]

hi @another Cheers!

I know that map markers are supported in certain formats only, but if you can convert your profile images to a format it likes then I see no reason why that wouldn’t work. I thought I added some sort of default marker scaling option actually, but I just checked and it’s not there (I could add one though).

If you have the images already, I recommend you convert them anyway, because you’ll want to make the file sizes as small as possible. Scaling a larger image down in size may look alright on the map, but the actual file size will still be the same and if you have loads of them all rendering, it will kill performance and you don’t want to set yourself for a headache in the future, especially as you may end up having lots of markers on a map! potentially

[another]

Makes sense! Definitelly we want to keep the size image (pixels, and MB) as less as possible here!

So I guess, icons are perfect, as we are using now, however for greater experience “marker pin” dynamic image would be great to have.

I guess, next option for us would be to have different images (icon-size) for different categories, although good idea here!

[another]

Meanwhile in another thread: Dynamic image resizing - #11 by troy.roberge

[pachocastillosr]

Hey there! I just purchased your plugin (great job by the way), I am curious. Is it possible to restrict the users from drawing more than 1 shape in a same map. I mean, I’d like that if there is already in a shape in the map, then drawing is disabled. In order to draw, the user would have to delete the shape that is in the map.

Please let me know, thanks!

[pork1977gm]

Hi, thanks
Good question, I’ve not actually tried that. I suppose you might be able to do it once a shape is drawn then inside the event which triggers, set a state value. When it’s set then run the action to disable the drawing tool or something.

If you’re using custom drawing tools like I’ve done in the demo page then you can just make the elements non-clickable.

I’d have a play around with it. There’s no native way to do what you want so you’d have to get imaginative with states etc but I can have a go at trying to do it sometime nearer the end of the week for you.

Paul

[pachocastillosr]

Thanks for replying Paul! I just managed to do it by disabling the drawing ui when a shape was drawn

[nuttnest]

Hello! I am trying to set up a custom market. I added the image but it is huge (it is 982*907 in size). Does the image size affects how it is displayed or am I missing some extra setup?

[pork1977gm]

You’ll want to resize it then use the new smaller version. Marker images need to be as small as you can possibly get them (file size) to ensure they load quickly and multiple images don’t slow down the rendering when you have lots.