[PLUGIN] - Google Maps Geometry/Drawing + W3W

Those drop downs are showing now! Must have just been a delay. Thank you.

Hi @pork1977gm

Thanls for adding this feature. I am unfortunatly still unable to get it to work the way I need it to.

I am able to get it to generate a list of addresses that fall within the polygon, but I can not then identify the database items that relate t those addresses.

Here is what I am trying to achieve:

I have a list of 20,000ish properties that are in a specific location. I am using a search, with a form I built to filter those properties and populate a repeating group. So for example, maybe I want to only show homes that are 3 to 4 bedrooms, and 2,000 to 3,000 sqft, with a 2 or 3 car garage.

Currenly my repeating group will respond to the search and only display the properties that match that criteria.

But now I also need to only show the properties that also fall within the polygon parameters, both in the repeating group as well as on the map.

Based on what you added to the plugin, do you think that should be possible?

Also, if it is possible, do you know of anyone I might be able to hire to help me get that set up?

Thanks for all your help!

Take a look at the update I’ve just pushed.

Both the client side and server side version of the “Contains” action now accepts a list of unique ID’s and when addresses are returned, so will the corresponding unique ID’s.

image

The above is the client side version of it, hopefully this will make things work for you.

Just make sure the list you supply for the addresses, is identical to the one for the ID’s. So, same order, same constraints, same everything. You just point one at the address and the other at the ID.

The “Addresses inside state” will have an extra field.

image

Paul

Hey @pork1977gm

Thank you very much for this! I think this is going to allow me to get the result I need.

Just a few other things this highlighted as I started looking into it…

  1. Do I have to use a list of addresses? Or can I use a list of latitudes and longitudes? The data I have automatically includes latitude and longitude, which I can use to create an address, but if I can just use latitude and longitude and cut out the extra step that would be cool

  2. Is there a way to show the “Delete shape” without showing the color palette?

  3. When the “Delete shape” button is clicked, is there a way to have it make a change to a database item? Currently, I am storing the polygon coordinates in the database so that I can have the map draw the polygon on page load, but when I delete the shape I need that database field to be cleared

Thank you for all the help, I can’t tell you how much I appreciate it!

Of course, no problems at all. Glad it’s proving to be a useful plugin.

1

I’ve modified the action, so it will now allow you to use either a list of geographical addresses or a list of lats and longs (as separate fields). There’s a couple of conditions when using coordinates. The list of addresses field must be empty and the 2 coordinate list fields must have an equal count. It now looks like this.

The other thing to be aware of here, is that because normally it would populate the ‘Addresses inside shape’ state with an address, that won’t happen when using coordinates. I haven’t put an address conversion into the code for a couple of reasons, the main being that it might return a slightly varied address, but I figured you’d be able to get that easily enough by using the returned unique ID or Bubble’s ‘Calculate formula’ option. Instead, the coordinates are returned and the address value will be empty, like this for example…

{
  "address": "",
  "lat": 51.2093483,
  "lng": -1.5825728,
  "unique_id": "1643410766170x305826855448739840"
}

2

To remove the color pallet, see the options in the ‘Enable drawing tools’ action.

3

The “Delete selected button” that appears within the drawing tools section, when clicked triggers no events so you can’t get any details about that shape which was clicked. Instead, what you can do is run the ‘Remove marker/shape’ action.

You’ll want to use the events and make sure any shape drawn has an ID associated to it. Since you’re storing the polygon coordinates in your database, that shape ID needs to be the records unique ID, then you can reference it easily through other actions.

If you’re using the ‘Draw shape’ action, this is what you need…

Let us know if you run into any problems with that. Drawing a shape triggers one of the ‘shape has been drawn’ events and every shape has it’s shape ID populated before anything else so you can always reference it. It will also be updated whenever any other shape is clicked, dragged, resized etc.

Hey @pork1977gm

I see the modification in the “Contains location a What3Words (map)” action, but not in the “What3Words - Contains location” action. I was using the second, as it allowed me to then reference its results in the following step. For example, if it was step 2 of the workflow, in step 3 I could set a list by referencing “the results of step 2’s unique ids”. But with the “Contains a location a what3words (map)” action I cannot reference its results. Am I doing something wrong? Or is there a way to add the lat & long to the “What3Words - Contains location” action?

If I disable the color palette, the delete selected shape button disappears too. Is there a way to keep this button but get rid of the color palette?

Is there a way to assign a shape id to a shape that is drawn from the drawing tools? I see the shape id field in the draw a shape action, but if a user uses the tools to draw their own shape, is there a way to add an id?

Or potentially a better question, is there a better way to approach this than storing the polygon coordinates the way I am? I need the user to be able to draw the shape, and it be there even after a page refresh. But they also need to be able to remove the shape.

My solution was to store the polygon coordinates, and then run the draw a shape action on page load to draw the shape based on those stored coordinates. Maybe this isn’t the best way to do it.

Thanks!

Hey,

Ok, so for this client side version of the ‘contains location’ action, when it’s finished running, it will trigger the ‘contains location completed’ event. Setup that event and run your remaining actions inside it. You’ll be able to access the results that way rather than using the server side action which uses the “result of step x” way. Slightly different setup, but it will get you the same results and work twice the speed too.

I’ve restructured that control panel and added an option to ‘show the delete button’ in the drawing tools action. You’ll be able to show either the color palette or delete button now.

I’ll have to get back to you on the last item, I can’t think of a quick answer to give you without delving in to all the options myself. I tend to forget what I’ve done after moving onto other jobs and I’m pretty busy these days! I think you’re doing it the best way though. You can update again to get the change to the color palette.

Update:
I think what you need to do is start off by running the ‘Select drawing mode’ action. That selects the drawing mode so you can draw a specific shape onto the map. Whilst in that action, lives all the settings to be applied to the shape, the option which sets the shape ID isn’t in there (not sure why I didn’t include it) but to assign a custom shape ID to that shape do the following.

  • Add the ‘select drawing mode’ action
  • Setup the corresponding drawn event which will trigger after the shape has been drawn.
  • Inside that event, add the ‘change shape properties’ and for the shape ID, reference the ‘Shape Id’ state. At the bottom of that action, there’s an option to set a new shape ID.

If you’re already using the drawn event to create any database entries, then perfect. Make sure the change shape properties runs after the record creation and then you can specify result of step X unique ID.

I think that will work.

Paul

Where is the link to the editor? @pork1977gm

https://paul-testing-4.bubbleapps.io/what_3_words?debug_mode=true

I want to see how the workflows are connected to each element/action.

Hiding in plain site!

Paul-testing-4 | Bubble Editor

image

1 Like

This plugin looks great! @pork1977gm

  1. Is there a way to determine whether or not the end of a line lands in the water some how?

  2. How do I create a simple line between two coordinates/addresses/points on a map?

Thanks :grin:

So it’s not possible to figure out if the end of a polyline lands in water at the moment. I could do a bit of research to see if that’s possible, when I get some time. I suspect that’s probably possible.

For joining two markers, you want to supply the polyline coordinates as a string of lat/lngs separated with commas. So it’s going to be marker 1 lat, marker 1 lng, marker 2 lat, marker 2 lng.

I’m on mobile at the moment so not at my laptop, but from memory, I think that’s how you do it. Give it a go and when I can, I’ll test it myself then come back to you with a definite answer.

If it can determine whether or not the poly line lands in water that would be fantastic!

Where do I set the lat/lngs though to create the line between two points?

I’ll have a look at adding a state to determine if polyline/shape is in water or not.
Try using the draw shape action, select polyline from the shape type dropdown field and then directly under that you have the shape coordinates. Let me know if you manage to make it work like that.

I’ve read a few things on the water scenario, and most of the stuff I’m reading says… it can be done but it’s not accurate through the Google Maps API, but you could maybe setup a call using Bubble’s API connector and use this service which, from what I’ve read seems to be quite accurate.

You just need to pass the coordinates to the call then check the results. If you set it up as an Action call in the API connector and then use it inside the “polyline has been drawn” event, that will probably work.

https://isitwater.com/

Hi Paul!

I’m having some difficulties extracting polygons from a KML file. Could you tell me step by step? I’ve tried in every way I imagined… I think I just haven’t tried the way that will work yet… lol

Thank you very much!

Hey Lucas,

Give us a bit and I’ll get back to you soon on this.

Paul

1 Like

Have you tried setting this option here and then run the Extract shapes from KML action and afterwards checking the state?

image

Introducing Deck.gl and the GeoJsonLayer

For a while now, I’ve been doing a bit of work on integrating Deck.gl, which is a WebGL visualization framework that provides support for large data sets in both 2D and 3D into the plugin.

This update is mainly to the Load GeoJSON action and it now contains the options which utilise this framework. There are a couple of additional scripts that are required for it to work. Normally, I would just add these into the plugin but because this might not be a feature which everyone wants to use, there’s a new option in the main settings area which can toggle the loading of them.

Inside the Load GeoJSON action are a few extra options based around the normal loading of GeoJSON files using the Google Maps Overlay feature, but if you wanted to use Deck.gl instead, then you can enable it and the remaining options under it will be used.

Each of the options have their documentation parts written up and some of the options are there to support potential additional features.

Deck.gl comes with a variety of different layers to use, right now I’m only working with the GeoJsonLayer. Other layers such MVTLayers, TileLayers, ScatterplotLayer, HexagonLayer etc may be supported in the future, but I’ll more than likely create a Deck.gl plugin of it’s own as it’s quite a rich framework on it’s own.

So, the main advantage with this is that it’s going to allow for large datasets to be loaded onto the map without slowing it down.

It will create some neat 3D visualizations also, depending on the data in your file, you should be able to use the feature properties for various things, like for example the elevation or colors. This is an example taken from the Deck gallery and is now possible to create these sorts of visualizations using the GeoJsonLayer and can be seen on the demo page.

The height of the buildings come from a property defined in this example file, each object has it’s own value which dictates the elevation of each building, whilst the colors come from another property. These are configurable through the action.

For the 3D effect, you’ll need to make sure you have a Map ID from Google and you’re loading a vector based map. When loading a raster map, the data will still load and it’s a lot faster too when it comes to large files, but it’s all in 2D.

Once the data has loaded, each object is clickable and when clicked, the data for that object is put into the state shown below. You must have this option populated to use/see it.


New events

geojson feature has been clicked
Fires when a feature item has been clicked that has been added to map by means of running the 'Highlight country', 'Highlight state' or 'Load GeoJSON' actions.

geojson has loaded
Fires on completion of the 'Load GeoJSON' action.

This feature is very much an experimental one right now, so try it, see how you get on and reach out if you have problems/ideas etc… I hope it proves useful for some use cases. :slight_smile:

You can try the examples on the demo page through the blue buttons…

Paul

yes… but didnt work

Ah ok. Would you mind sending me the KML file? I’ll try to find out why

1 Like