Forum Academy Marketplace Showcase Pricing Features

[PLUGIN] - Google Maps Geometry/Drawing + W3W

N probs.
Ok, can you send me the link to your editor as I need to see it in order to understand what’s going on. PM it over if that’s ok.

1 Like

Quick update…

The following actions now have the ability to upload their generated files into your S3 storage area.

Generate KML file

Generate GPX file

Regards
Paul

1 Like

Great work here!

Haven’t seen throughout the thread, although very few similar options…

Is there a possibility to make a radius around a location, as to pulsate in the very best way?

Thanks!

@pork1977gm

Hello how are you.

I purchased the plugin directly in my bubble app for $40, and now I need to generate the API key in What3Words, how do I do this?

Another question is, the google maps key, which API is it? javascript? geocode? I have this doubt.

Hi @it117

The way to generate the key is to follow the link in the original post where it says “Get started with the what3words API” and the Google maps key is just that. It’s the same one which you’d put into your settings area within your app. All the geometry stuff comes from the turf library and the drawing tools functionality is put into the plugin and handled accordingly.

Hope that helps.
Paul

Hi @conesult ,

Great idea this and I’ll look at adding any shape (including a circle) around a marker, where the marker will always be central to the middle of the shape.

I may take the existing “Draw shape” action and add an option for you to specify a marker. When a marker is included into the options for that action, then the shape will be positioned so that the marker is in the middle. As for the pulsating ability, I will look at what I can do but I suspect that won’t be easy with the shapes on the map. You never know though, I may find a solution.

Leave it with me for a few days and I’ll get back to you.

Paul

Update v1.82.0

"Dynamic Circle’s around markers"

Inside the “Set marker” and “Set list of markers” actions are some new fields which allow for a circle to be defined around a marker at a specified radius.

The single marker action has this new section:

When you run that and the marker appears on the map, it will have the circle drawn around it like so:

The list of markers action has a similar section, but it works off a “radius” field value. If you’re storing radiuses in your database and you point this action at the field so it gets a value, then it will automatically draw the circle, like so:

In the element itself are 2 additional options which only work when markers have been drawn onto the map with this circle. They are:

If you’ve noticed the slider in the second and third image of this post, these options allow for that functionality to work.

Have fun!
Paul

1 Like

@pork1977gm

Hello how are you?

I need:

1st - I receive a list of data, in which I don’t have an icon defined, and so, the default remains… how do I insert my own icons when it doesn’t appear in the list via api “in my case”.

2nd - When I make a drawing of any type, I have the markers in the variable ( contains marker ids ) that are there inside the drawing, now how do I add a new marker when I click on it inside the ( contains marker ids ) ?

Can you help me?

Hi @it117
I’m good thank you.

I’m sorry but I’m not sure I understand you here. Could you send me a couple of screenshots showing what you mean? Hopefully some of the info below will help.

1:
If you have some data list and you’re trying to use that to insert a list of markers, but you want to use a custom marker of some kind, then assuming you’re using the ‘Set list of markers’ action, you’d just have to point this option to wherever you’ve saved the markers in your database.

image

However, if you’re using the actual options within the Map element instead to dynamically add markers (these will update when the data changes in the database) then you define the Data type first which will bring up the list of fields and then you select the field which contains your marker image, like so…

image


2:
When you want to add a new marker to the map using the drawing tools, first thing you have to do is run the ‘Enable drawing tools’ action. After that, you can either click the ‘marker’ icon as shown here…

image

Or you can use the ‘Select drawing mode’ action like this…

Both of these will require a click on the map to insert a marker.

Thanks for the reply, but I don’t think I could explain it correctly.

What I’m trying to do is the following.
In my application I want to show some ( >1500 ) markers on the map, and then when the user draws or clicks on some of these markers, they will be inserted into a list.

So, what I did: Insert What3Words(map) element on the screen, and I already insert there a list that I receive from an API, in this payload I have the data I need, necessary information such as name, address, value, in addition to lat and lng of each location, but I don’t have the icon of each location, so I would like to manually insert this Icon.

1 - I thought, if I had the option of being able to choose only the icons, to insert via the payload or manual (myself choosing) the icon that will be for everyone, so I don’t get stuck to the default icon of the plugin.

2 - In addition, I also need to give the user the option of being able to insert one of these markers (by clicking on one of them) in the plugin variable ( Contains marker ids ). This variable I use later to get the markers that will be used in the future.

Since I’m here asking for help, I’m going to send other requests I want to make and I don’t know how to do it with this plugin.

3 - When a shape ( drawing ) is deleted, I also need to clear the variable ( Contains marker ids ) that stores the markers that was previously selected or inserted into a drawing.

Sorry I’m asking so many questions here, but I made the company buy this plugin, and just by looking at it the first time, I’ve seen that it meets all the functions we need and also here on the forum, you can help the community a lot.

Thanks in advance for your support.

Hi @it117

I’ve made the following changes for you which should hopefully sort you out.
These have all been tested.

1

In the Set list of markers action, I’ve added a “Custom marker icon” which when applied will be used for every marker on the map. For this to work, the “List of marker icons” field must be left empty. Having a field selected will take precedence here.

The same type of thing has also been added into the main map element options because its also possible to use a dynamic list of markers in there too, as you’re doing. The same rules apply here too. Be sure to read those documentation sections.

2

When you say, “insert one of these markers”, I’m assuming you mean that you have your list of markers in a repeating group or something then you want the information within the clicked cell to put the marker on the map? If so, then use your list as the data source and take the current cell’s value to pass into the “Set marker” action then you should be good. Depending on how you have your data source setup, you may need to nest another repeating group inside the first cell or you’ll have to restructure it in order to get both the latitude and longitude values, but this all depends on how you have your data defined in the first place. Is any of it saved to table?

3

When you add a shape, the “Shape Id” state will become populated. The same goes for a marker, except you get the “Marker Id” state populated instead. You could store and use these. When a shape is added to the map, you will also have one of 4 events triggered, Polyline, Rectangle, Circle and Polygon has been drawn. You could use these events to add/remove from your Contains marker ids. When a shape is removed, there is no event which triggers but if you’re using the “Remove shape” action at any point, you could clear your state after that has run? I don’t know, I’d need to see your setup to be sure but I’m very busy this week with other jobs so see what you can do and shout if you need any specific help.

Hopefully some of this has helped. I have just pushed an update containing the marker icon stuff.

Paul

1 Like

Update 1.84.0

Circles around markers + animation options

This update provides a way to draw circles around markers to outline any given radius in a specified metric. The circles include a bunch of options, and they can be animated as shown below. Although, due to the nature of the animation, I don’t recommend enabling it on a large list of markers. These animated GIFS don’t really do the animations any favours but if you go to the demo site and try it, you’ll notice it’s a lot smoother.


Within the 2 marker actions are a bunch of new options. For documentation purposes, I’ve outlined these options below which are for the Set marker action. There’s a similar set inside the Set list of markers action also where the presence of a Radius field in whatever table you define as the dataset will replace the “Draw circle” option.


  • Set Marker

This section allows for a circle to be drawn around the marker and styling applied. The circle can be used to indicate X distance radius of the marker’s location. If the marker has the draggable option set to true, then the circle will move with the marker as it is dragged. Note: There is an option in the main element’s settings called ‘Dynamic radius’ that is designed for this functionality only. If that field changes dynamically then so will the circle’s radius seen on the map. This currently applies to all markers with the circle showing.

-Draw circle
When set to Yes, a circle will be drawn around the marker using the properties below.

-Units
Select the unit to measure the length calculations in.

-Animate circle
When setting this to Yes, the circle will pulsate in and out. Some of the options below will control the speed, fade etc.

-Animate iterations
This value is in milliseconds and the lower the number, the faster the iterations will be to change the size. This effectively makes the animation smoother but can degrade speed the larger the circles are.

-Animate speed
Speed at which the animation occurs at. Depending on the radius of the circle, this value may need to be increased as it can be quite resource intensive when animating large circles. You can leave this field empty and a value will be auto calculated based upon the radius, although you may want to adjust that. The calculation is formed by (radius / 200) to give an adequate speed in relation to the size of the circle. The higher the number, the faster the animation will be.

-Animate opacity
When this value is set to Yes, the circle's opacity will gradually decrease as the circle gets smaller in size. Setting this to No, will make no changes to the opacity.

-Reverse opacity
When the animation opacity above is set to Yes, the fill color will become more transparent as the circle decreases in size. This option will reverse this behaviour making the fill color more transparent as the circle increases in size.

-Animate min distance
When the circle animates, this is the minimum distance for which the circle will decrease in size to in the units specified. If you leave this field blank, it will calculate a 50% decrease using the given radius.

-Show circle when
Accepted values are: 'increasing', 'decreasing' and 'both'. When the circle is animating, you can use these options to show the circle either when it's increasing in size only, or decreasing in size only, or both. This can give a better pulsate effect.

-Radius
Enter a value for the radius of the circle, this will be measured using the selected units' option above.

-Fill color
Fill color for the circle.

-Stroke weight
Stroke weight (border thickness) for the circle in pixels.

-Stroke color
Stroke color for the circle, this is the border.

-Stroke weight (select)
When the circle is selected, the stroke weight (border thickness) can be specified here.

-Stroke color (select)
When the circle is selected, the stroke weight color (border color) can be specified here.

-Editable
Make the circle editable.

-Enable second circle
When set to Yes, will enable a second circle that you can use. Animation controls do not apply to this.

-Fill color (sec)
Fill color for the second circle.

-Stroke weight (sec)
Stroke weight (border thickness) for the second circle in pixels.

-Stroke color (sec)
Stroke color for the second circle, this is the border.


  • Map Element

Within the main map element options are also 2 new options.

image

Paul

2 Likes

Thanks @pork1977gm! Great work!

I am using now a plug-in for a while, and it works as a charm!

Also really great support from @pork1977gm!

Here is my map example usage: Map | Conesult

Thanks! :slight_smile:

1 Like

Hello! I saw this earlier so I just wanted to confirm and expand a little bit more about the inquiry.
As a user I can go to anywhere on the map, draw a polygon, save it to the database and when someone looks for that location the polygon that I draw will be displayed?

Yep so a user can draw a polygon anywhere they like and you can then save all those coordinates which make up that shape to your database to be used to draw it back onto the map. When you say “when someone looks for that location”, what do you mean by that? Do you mean that if a user was to search for say London and that location was inside the bounds of the polygon, then you’d want it to be displayed again?

Question - I’m building a tasker app and would like the tasker to be able to draw a work radius and customers to be able to see what taskers are available to work if the customer’s address happens to be in the workers radius. Is that possible with this plugin?

Hi @ramzizi,

Yep, you can do that. When there are markers on the map and then a circle is drawn over them, you’ll get 2 states populated called “contains marker’s latitudes” and “contains marker longitudes”

Each one of these states will be a list of the markers coordinates which are inside that circle. You can take the same item from each to get that marker’s position and then use Bubble’s convert to address method if you want the actual address.

The states update when the circle is moved and not when the markers are moved though.

Paul

So if I just have a customers zip code stored in the database, I can generate a repeating group of workers filtering those whose area/radius that they drew contains that customers zip code?

Ok, so I’ve only designed it to work with physical markers and shapes that are actually on the map, not by using stored data which isn’t on the map. Although there is an action called “Contains location” where you can pass a single pair of latitude/longitude coordinates and a shape, then it will tell you whether those coordinates are inside that shape or not. I don’t think this would be suitable for you though.

The way it works at the moment is that you’d have the markers on the map and then you draw the circle over those markers. It works out which markers are contained within the boundaries of the circle and returns each marker’s ID, latitude and longitude. This happens when the shape is drawn, moved, resized etc. It doesn’t happen through means of an action.

I’ve been thinking about how you need it to work, and I may need to make a couple of changes. I can create you an action that will accept a shape and a list of geographic addresses. If any of those addresses are contained within that shapes radius, then we can return those addresses only. You can then use that list as the source within a repeating group and since the addresses which you feed into the action, will be the source of what is returned, they should also match up to what you have already saved in your database.

It may take me a couple of days to do it. Would that work for you?

If you want to try the plugin first before-hand, then just PM me the name of your app and I’ll grant you access so you play with it. Any questions just fire them over to me.

Paul

Oh that’s awesome! Very generous of you to take the time to make those changes. I’ll go ahead and buy the plug in, and whenever you can get that update in would be great, no rush.

And in my case I really don’t even need a complete address for the function to work. Just the customers zip code, and a yes/no whether the shape the tasker drew contains that zip code

Cheers