Forum Academy Marketplace Showcase Pricing Features

[PLUGIN] - Google Maps Geometry/Drawing + W3W

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

Update v1.90.0

Web Map Service (WMS) Layers

It’s now possible to load geospatial map images onto the map by using a WMS service. Some knowledge maybe required if this is something that is of interest.

These type of map images are like the ones which come from this site, and they’re designed to show all sorts of data.

The demo page has a red button just above the map, labelled “WMS” and when clicked will load the various layers provided in an example service that outlines various soil types around the UK.

Every web map service has standard endpoints which the plugin utilises. It doesn’t use all of them right now, but the ones it does use are: getMap, getFeatureInfo and GetLegendGraphic.

Here are the details…


EVENTS

  • A What3Words (map) - WMS layer has loaded
    Fires when a WMS geospatial map image has been loaded onto the map.
  • A What3Words (map) - WMS layer item has been clicked
    Fires when an item within a WMS layer has been clicked.

ACTIONS

  • Load WMS layers
    This action allows you to use a web map service (WMS) for requesting a geospatial map image. It utilises the contained methods of that service to return the data needed. You may specify the options below, not all are available at this time. This uses the EPSG:3857 spatial reference system which isn’t configurable just yet.
    .
    -Base URL
    This is the URL for the WMS provider which should end with a question mark.
    -Layers
    Specify any layers that you wish to show on the map. You can use one or more layers here, although multiple entries should be separated with a comma and not include any spaces.
    -Version
    This is the version for which the WMS service supports. Most services will support either 1.0.0, 1.1.0, 1.1.1, 1.3.0. Leave this at 1.3.0 if unsure.
    -Styles
    Styles in which layers are to be rendered. You can use one or more styles here, although multiple entries should be separated with a comma and not include any spaces.
    -Format
    Format for the map output.

  • Remove WMS layers
    Allows you to remove all WMS layers from the map. It has no options.


EXPOSED STATES

  • WMS layer information
    Contains any information relating to a clicked item that shows on a WMS layer.

  • WMS legend
    Contains a legend image when loading WMS layers. This image will update itself every time the map is moved or zoomed. The legend reflects what is being shown at the time so if you’re zoomed out showing a lot of data, expect this legend to have a lot of information within it. If you’re zoomed in showing only a few areas, then it should be relatively small.

For anyone needing some additional info on what WMS is all about then this link is quite informative.

WMS - Overview — OGC e-Learning 2.0.0 documentation (opengeospatial.github.io)

Paul

Ok, will give you a shout once done.

1 Like

Sorry! Did not see this until now. Yes, let’s say someone drew a polygon which represents a piece of land, we save the coordinates of the Polygon as Land A. We keep creating pieces of land such as Land B, Land C and so on following the same pattern, by drawing polygons and maybe adding some other details such as name and description to the Land Data Type.
1.- If I refresh the page and load the map with Land types, all my previously drew polygons stored on the database will appear?
2.- If I run a search to find Land A, will the map display the polygon drawing belonging to Land A? Or is drawing the polygon just to retrieve coordinates for a piece of land? Meaning that polygon just works as if it were a custom state, temporarily.

So when you draw a polygon, a state will become populated with a set of coordinates. Save those to your database and then you can run those coordinates back through an action called “Draw shape” to redraw the polygon back onto the map into its original position.

You can’t really do a search for the polygon, but if we’re to associate a place with it inside your database, then when the user searches for that place using a standard map search, the map would pan to that location and the polygon would then show.

I can help you with it anyway, so if some code needs to be tweaked or you need a new action to make it work exactly how you need to, then that’s fine… just let us know and we’ll make it work :slight_smile:

You are the man! Appreciate it. Thank you!!
One last additional question, if I enter the coordinates manually through an input, will the polygon be drawn in real time or I need to extract it from the database?

The polygon is drawn via an action, so you can run that in whatever workflow you have assigned, and it will be drawn then. So, if you have a workflow for example that’s something like “When input field changes…” or “When a marker has been drawn…” or whatever… then you can draw it within that same workflow and you should be good!

1 Like

Do you have any suggestions on how to work with multiple polygons and how to save them in the database so that they can be easily referenced later?

I created a data type WorkArea and when a polygon is drawn I save each polygon like this:

I’m having trouble figuring out how to display those polygons on a map from the database as this doesn’t work:

Edit: Actually I just saw that the way I’m having the shape displayed is creating a duplicate entry. I’m definitely not doing any of this the smart way

It looks like you’re referencing a list there, add ‘first item’ to it and it should work.

That works for a user with a single polygon work area, but what about a user with multiple work areas that I want to display on one map?

Would you be available in private to help me set this up? I also need to figure out how to edit work areas with the resize action when there are multiple. Let me know how much you would charge

So, because that Draw Shape action has a lot of options in it, currently it only deals with drawing single shapes onto the map at one time. You could iterate over a list of things client side and have that action run for each item (or set of polygon coordinates) in the list. That will enable you to throw all the shapes onto the map in one hit. You can do this through the Javascript to Bubble element or if you give us a bit of time (a few days), I’ll amend that action for you, so it accepts a list of the shape coordinates. It’s been on my list of things to do for some time now, but since it’s such a large action, I just got to be a bit careful with it.

I can help you set all this up so no worries there. Let me work on that Draw shape action first then I’ll send you a PM and we’ll go from there.

Paul

Hi everyone,

I hope I can get some help with my little project here

I have a taxi booking form at https://247expresstaxi.bubbleapps.io , now, I want to make Polygon zones and base the pricing according to any 2 zones, like: zone1 to zone2 = €xx.

I wonder if this is possible with this plugin?
Any suggestions/advice much appreciated.

Hi @kakayad,

I can’t see why not. You should be able to use the polygons to do this. After a polygon is placed onto the map, store the coordinates which make up that shape and a name for that zone in your database. When you re-draw them back onto the map, you use the Draw shape action and because you’re saving the zone name along with that set, you can fill in the Shape Id field which essentially allows you to reference that particular polygon by its zone name.

From there, you’ll be able to do things like work out if markers / address are inside / outisde the bounds of the polygon and a probably a bunch of other things too.

1 Like

Hello and thank you so much for your reply. I’m relieved that I can use Polygon drawings to setup my pricing calculations.
I’m still learning, I already purchased your plugin and I love it👍.
So I store the coordinates for each Polygon in database thing (zones) and name it after the place/city, so far so good.
Now I’m using bubble’s searchbox for (pick up address & destination address), I’m still unable to find a workaround on how to calculate the price based on any 2 of zones? Should I use workflows or conditionals?
Like: when searchbox A’s Value inside zone1 AND searchbox B’s Value inside zone2, then set input price value/state to €xx.

Any idea / advice much appreciated.

When the search box address has changed, use a workflow to run that address straight through the action called “Contains location” (or you can use the server side action called “Contains location” but it will be a little slower).

Both those action accept the address as latitude and longitude so you’ll want to use Bubble’s extract latitude and longitude coordinates functionality on the address.

Hopefully that should work.

thank you pork1977gm, great Plugin, so many options, I now know its doable, I will try and let you know.

1 Like

Edit: Read past comments and see that this is possible. VERY impressive plugin. Thank you for building it.

Would it be possible with this plugin to determine whether a given address falls within a polygon? For example, to determine the political divisions associated with a specific address?

Another quick question here, @pork1977gm: Can you give any more info about the “extract shapes from KML” action? I can’t seem to find any documentation on this point.

Ah yes, well spotted, I must have missed that one.

Extract shapes from KML
This action is designed to read a KML file and extract any shapes found. The data returned will be a list of coordinates used to make up a particular state and these will be put into the ‘KML extracted shapes’ state. This action has only been designed to handle shapes right now, although it could be modified to handle markers. The KML file (or KMZ file) must be readable within a text editor for it to work.
.
-KML file
Enter the URL to your KML/KMZ file here or upload one.


It uses geoxml3.js from a library called geoxml3
geocodezip/geoxml3: Automatically exported from code.google.com/p/geoxml3 (github.com)

When the action has completed, the object state called KML extracted shapes becomes populated (as shown below). Depending on the shapes within the KML file, the relevant arrays will contain the coordinates.

Whilst I’m writing this, I’ve just had a thought… I can’t remember what happens now if more than one of the same type of shape is contained within the KML file. I think it will be handled but if you end up trying that, can you let me know what happens!

image

Hope that helps
Paul

1 Like

Yep, you use a normal Bubble address but extract the latitude / longitude values from it, then pass them into either one of the “Contains location” actions (there’s a client and server side version of it).

The actions take the coordinates which make up the shape, and the address coordinates, then it tells you if that address is inside it or not. These actions only deal with polygons by the way. A rectangle or circle can be converted into a polygon first and then passed if needed.

1 Like