[PLUGIN] - Google Maps Geometry/Drawing + W3W

The grey map area which some of you had noticed has now been resolved. It was happening because the map was loading before the options were ready so that’s no longer the case and as far as I can see, it’s not happening anymore.

I’ve pushed the update which also includes an action for adding either a list of word address or a list of lat/lng coordinates with some other options like labels and marker id’s.

To find out if a marker is contained within the boundries of a polygon, there’s also an action which does this that doesn’t require the map to be loaded so can run within backend workflows.

Demo page updated.

New update - v1.15.0

Draw shape action changes

  • added ‘Fit to bounds’ option which allows you to navigate directly to the shape after it’s been drawn
  • added ‘Update state’ option which allows you to update the corresponding states that hold the latitude/longitude coordinates when the shape is clicked, dragged or edited in any other way
  • added ‘Stroke weight’ and ‘Fill opacity’ options to set additional styling on the shape
  • bug fix: the polyline option now draws a polyline and not a polygon!
  • bug fix: shape can now be removed using the ‘Remove selected shape’ action (previously this only worked for shapes that were drawn using the tools)

Remove selected shape action changes

  • added ‘Clear state’ option that will clear the corresponding “Drawing clip to…” state which hold the latitude and longitudes

Extras

  • When a shape is drawn using the drawing tools, resizing that shape by moving its vertices will now update the corresponding state for that shape, so long as the editable or draggable options are set to yes that is
  • Grid now displays from a minumum zoom level of 17 rather than 15, since it was so small the map display just looked grey
  • You can now set the position of the drawing tools control in the ‘Enable drawing tools’ action
  • New action called ‘Clear map’ that removes all markers and shapes which have been added to the map

For anyone following (and to keep the documentation up to date in this thread) here is a full list of new features and fixes since the original post. These are additions only to the Map element. All bugs have now been resolved and support for all the various shapes and controls which come with the Google Drawing library are now supported.

What3Words (map)

  • Disable UI
    This disables any UI control buttons from the map.

  • Delete button label
    This is the text seen on the delete button when the drawing tools are enabled. If this text is empty then the button will be hidden and you can use the “Remove selected shape” action instead.

  • Fix for
    This option should ONLY be used if you see a console error (c.Qk is not a constructor) appear when enabling the drawing tools. If you have multiple map elements on your page, you’ll need the same option set on all maps.


EVENTS

  • A What3Words (map) - error has occurred
    Fires when any of the actions return an error, containing the error code and message.

  • A What3Words (map) - marker has been drawn
    Fires when a marker has been drawn onto the map.

  • A What3Words (map) - polyline has been drawn
    Fires when a polyline has been drawn onto the map.

  • A What3Words (map) - rectangle has been drawn
    Fires when a rectangle has been drawn onto the map.

  • A What3Words (map) - circle has been drawn
    Fires when a circle has been drawn onto the map.

  • A What3Words (map) - polygon has been drawn
    Fires when a polygon has been drawn onto the map.


ACTIONS

  • Enable drawing tools
    Enables the drawing tools.
    -Color palette
    Position of the color palette.
    -Drawing tools
    Position of the drawing tools.
    -Show tools
    Shows the drawing tools on the map.
    -Show palette
    Shows the color palette on the map.
    -Show marker
    Option to show the marker drawing tool.
    -Show polyline
    Option to show the polyline drawing tool.
    -Show rectangle
    Option to show the rectangle drawing tool.
    -Show circle
    Option to show the circle drawing tool.
    -Show polygon
    Option to show the polygon drawing tool.
    -Editable
    Make the shape editable (applies to all shapes).
    -Draggable
    Make the shape draggable (applies to all shapes, including markers).

  • Draw shape
    Allows you to draw a shape onto the map using a set of coordinates.
    -Shape type
    This is the type of shape that you want to draw onto the map.
    -Shape coordinates
    Enter the 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 color
    Fill color for the shape.
    -Fill opacity
    Fill opacity for the shape, use a value between 0.0 and 1.0.
    -Stroke weight
    Stroke weight for the shape in pixels. For a Polyline, a value of 0 will be replaced with 1 otherwise you cannot see the line. Other shapes can have a value of 0.
    -Editable
    Make the shape editable.
    -Draggable
    Make the shape draggable.
    -Fit to bounds
    This will zoom the map to the appropriate position and pan to the shape.
    -Update state
    Each of the 4 shapes have a corresponding "Drawing clip to..." state which hold the latitude/longitude coordinates. If you want to update this state when the shape is clicked, dragged or edited then set this option to Yes. This will also update the state when drawn onto the map.

  • Add KML data
    Allows you to use the data within a KML file to import onto a map.
    -KML file
    Enter the URL to your KML file here or upload one.
    -Clickable
    If set to Yes, the layer will be clickable and will also trigger the 'marker is clicked' event. Having this option set to No will not show the info window.
    -Preserve viewport
    By default, the input map is centred and zoomed to the bounding box of the contents of the layer. If this option is set to Yes, the viewport is left unchanged, unless the map's center and zoom were never set.
    -Screen overlays
    Whether to render the screen overlays.
    -Suppress info window
    Suppress the rendering of info window when layer features are clicked.
    -ID attribute
    If you specify an ID attribute to an element here, you can display any info data directly in that element.

  • Set list of markers
    Adds a list of markers at locations specified.
    -List word addresses
    Use a list of What3Word word addresses to show on the map, for example: relay.clots.teach, mobile.landed.half, parts.logo.keys, boats.mess.sting.
    -List of latitudes
    List of latitude coordinates.
    -List of longitudes
    List of longitude coordinates.
    -Zoom
    Map zoom level.
    -Go to coordinates
    Set the map position to these coordinates after the list of locations have been added. Value must be latitude,longitude, for example: 51.20911516189098,-1.5825777840614275
    -Marker icon
    Use your own customized marker for all markers. You should keep to a size no larger than 64 x 64px.
    -List of labels
    This is the label text seen when hovering over the marker. Leaving this field blank will show no label.
    -List of marker Id’s
    If specified, you can use this Id to delete the marker at a later time by using the 'Remove marker' action. Leaving this field blank will result in you not being to remove it at a later time. Best to use unique id here.

  • Clear map
    Clears all markers and shapes from a map.

  • Select drawing mode
    Selects the drawing mode for a particular shape to be drawn onto a map.
    Drawing mode
    Choose a shape to draw onto the map. This sets the drawing mode to a particular shape, valid values are: marker, polyline, rectangle, circle and polygon.
    Fill color
    Fill color for the shape.
    Fill opacity
    Fill opacity for the shape, use a value between 0.0 and 1.0.


EXPOSED STATES

  • Error
    This is populated with an error code and description if an error occurs.

Zoom levels have been changed so you can now zoom in higher around certain areas and the minimum zoom level for which the grid displays at has been changed from 15 to 17 to stop the grid being so small it was just covering the map with a slightly faded grey overlay.

Demo page updated mainly to show how you might customize your own drawing tools without having to use the default Google tools.

Paul

Hi Paul.

Is the 3x3 map grid static or interactive (as shown here: what3words /// The simplest way to talk about location)?

Devan

Hi Deven,

It’s just the static overlay on the map. I did ask the guys over at W3W about that and it’s their own custom code which they wouldn’t really share.

I’ll have a look at trying to do something similar.

1 Like

Thank you for your lovely plugin!

I have a question/feature request!
Is it possible to make the workflow capable of zooming into more than level 19?
I can manually zoom in quite a long way, but not through the workflows or settings.
It’s useful to have the “very zoomed in” image when working with w3w squares as it allows more precision.

Thank you!

Sure no probs, I’ve just pushed an update for you and set the max zoom level to 21 in the element options and various actions which have the zoom option.

Amazing stuff! Thank you for being so responsive! <3

not a problem :slight_smile:

Hi @pork1977gm great plugin I have a few questions or maybe feature suggestions I could use.

  • Ability to get length between coordinates? Additionally, Length of a line, etc.?
  • Ability to get the area(measurement) of a set of coordinates?
  • Ability to rotate items?
  • Ability to add text to shapes drawn?
  • Ability to add text at coordinates? (like custom street names)

Thanks!

Hi @justinnnnnn,

Thanks, I shall see what I can do with those additions. I’m a bit strapped for time at the moment but I’ll certainly have a look at adding these and let you know when I get a chance to.

Cheers!
Paul

Awesome thanks please let me know.

Hi @justinnnnnn I’m making a start on these this week. Will keep you updated as I make progress.

Getting the area of drawn circle or shape would be great for sure!

I got most of these done (including the area of shapes) so just in the process of tidying things up and will then write up the docs

:star_struck: nice!

@court, @justinnnnnn

I’m making progress and have one last thing to do now (I think)
Although I haven’t written up the new features yet (and I will do soon) you can check the live demo site to see a number of changes. Check all the tooltips.

I’ll feed back soon, trying to get it done by the end of today as I’m busy over the weekend.
Just wanted to give you guys some update.

Paul

@pork1977gm thanks for the update! looks great so far and its exactly the information I want out of the plugin.

Another quick feature I thought of is ability to rotate the map in top town view. (go to google maps website and ctrl + click & drag, you can tilt & rotate. Not sure if you’re able to get that worked in but it could be handy.

Ah I see that. So to get that functionality working, you need to use a “vector” map. Most Google maps you’ll see (including the ones through Bubble) use the standard “raster” map and to enable this new map you have to essentially create it within your own Google API section and then the URL needs modifying and the new map Id has to be passed into the plugin. Not as easy as you might have thought!

I might be able to support it though, it may be tricky because Bubble will load the Google API URL as soon as you start using features such as the search box and although I’m doing a number of things programmatically to control the drawing and geometry libraries, I might not be able to control all aspects of that URL just to get this vector map initialized, but I will take a look at it anyway as I’d love to make it work.

Read this here and then click on the blue button that says “Get started with Vector Maps” and you’ll understand how it works.

Vector Maps | Maps JavaScript API | Google Developers

Update v1.23.0

@court, @justinnnnnn, @renwagner

I’ve just pushed a huge update which has a lot of new additions and changes included, mainly around the geometry side of things. I’m pleased to get all these extra things in and I hope they’ll be of use. It’s taken some considerable time to make sure they all work as expected and all the calculations are correct and tested.

There’s been a significant increase to both the number of actions and exposed states in this update and because there’s essentially 2 ways you can draw shapes onto a map (through the tools or through the action) both ways now update the corresponding states accordingly. Marker’s should now always update the What 3 Word addresses when moved also.

I haven’t been able to complete all the requests that I’ve had yet, but I will get them included. I’m still working on this and have plans to get them all added.

The items I have left to work on are these:

the ability to select multiple map markers by drawing a shape over them - all markers within the boundaries of the drawn shape will go into a state of “list of markers” and you’ll be able to then save them or load them all in one action

make the selected shape’s border/stroke weight configurable

ability to add text to shapes drawn, need to think more about this

ability to add text at coordinates (like custom street names), also need to think about this
did we want to replace a marker with some sort of custom text control? might be easier to make up your own text within an image and use that as the map marker perhaps

rotating shapes… I’ve tested it and it looks awful, you don’t want it!
it’s not something that is supported but if you really want a way to do this then let me know

Here are the details…


New actions to the What3Words element

  • Measure length
    Measures the total length between a pair of markers or points along a line. This action will populate the corresponding ‘Measured length’ exposed state with a value in the specified units.
    -Shape type
    Select the type of shape you want to measure the length for. Note: Selecting a circle will return the circumference. If you want to measure the distance between multiple markers, select Polyline.
    -Coordinates
    Use the various 'Drawing ... coordinates' states here to supply the coordinates needed for the shape selected.
    -Units
    Select the unit to measure the length in. Values are Meters, Miles and Kilometers.

  • Measure area
    Measures the area of a shape and returns a value in square meters. This action will populate the corresponding ‘Measured area’ exposed state with a value in square meters.
    -Shape type
    Select the type of shape you want to measure the area for.
    -Coordinates
    Use the various 'Drawing ... coordinates' states here to supply the coordinates needed for the shape selected.

  • Center of shape
    Returns the center coordinates of a shape. This action will populate the ‘Center coordinates’ exposed states with a set of latitude/longitude coordinates.
    -Shape type
    Select the type of shape you want to retrieve the center coordinates for.
    -Coordinates
    Use the various 'Drawing ... coordinates' states here to supply the coordinates needed for the shape selected.


Changes to existing actions

  • Draw shape
    This action is responsible for drawing shapes onto the map without having to use the tools that appear on the map. It has a whole new section added to it that allows for a “buffer” area to be drawn around any shape within a specified number of meters.
    .
    These options will only be used when the ‘Generate buffer’ option below is set to Yes. Corners will be rounded to maintain the same distance from all sides and output will always be a polygon regardless of the initial shape selected.
    .
    -Generate buffer
    Allows you to calculate a buffer (contingency area) around the shape which is essentially a second polygon that can be set to be X number of meters away from all sides. A positive number will calculate the buffer outwards by X meters, a negative number will calculate the size inwards by X meters.
    -Distance
    Enter a value in meters that is used to generate the buffer. Values can be positive or negative to determine the outward/inward distance from all sides.
    -Fill color
    Fill color for the buffer shape.
    -Stroke weight
    Stroke weight for the buffer shape in pixels.
    -Stroke color
    Stroke color for the buffer shape, this is the border.
    -Editable
    Make the buffer shape editable.
    -Draggable
    Make the buffer shape draggable.

  • ‘Set marker’ and ‘Set list of markers’
    Both these actions will now associate each marker with the click, hover and drag events which are responsible for updating each marker’s hovered, clicked, drawing coordinates and word states. Markers now have a draggable option associated to them (true/false).

  • Contains location
    The exposed state called ‘Inside shape’ will be updated to Yes/No.
    Previously this action would only determine if a marker was inside a polygon, this now applies to all shapes which includes polygons, rectangles and circles.


New exposed states

The following states have been added.

  • Drawing buffer rectangle coordinates
    Contains a set of buffer coordinates that is generated when selecting a rectangle using the ‘Draw shape’ action and the generate buffer option is set to yes.

  • Drawing buffer circle coordinates
    Contains a set of buffer coordinates that is generated when selecting a circle using the ‘Draw shape’ action and the generate buffer option is set to yes.

  • Drawing buffer polygon coordinates
    Contains a set of buffer coordinates that is generated when selecting a polygon using the ‘Draw shape’ action and the generate buffer option is set to yes.

  • Drawing buffer polyline coordinates
    Contains a set of buffer coordinates that is generated when selecting a polyline using the ‘Draw shape’ action and the generate buffer option is set to yes.

  • Measured area (polygon)
    Contains an area measured in square meters of a polygon.

  • Measured area (rectangle)
    Contains an area measured in square meters of a rectangle.

  • Measured area (circle)
    Contains an area measured in square meters of a circle.

  • Measured length (polyline)
    Contains the total length of a polyline.

  • Measured length (polygon)
    Contains the total length of a polygon.

  • Measured length (rectangle)
    Contains the total length of a rectangle.

  • Measured length (circle)
    Contains the total length (circumference) of a circle.

  • Clicked map latitude
    Contains the latitude coordinates when clicked anywhere on the map.

  • Clicked map longitude
    Contains the longitude coordinates when clicked anywhere on the map.

  • Center coordinates (latitude)
    Contains the center (latitude) coordinate for a shape.

  • Center coordinates (longitude)
    Contains the center (longitude) coordinate for a shape.

  • Selected shape
    Text value set to polygon, polyline, circle or rectangle depending on the shape selected.


Other changes

  • Zoom controls
    Actions that have a zoom control now have 0 added to the list.
    If 0 is selected then no zoom will happen.

  • State renames
    Drawing clip to bounding box - renamed to: Drawing rectangle coordinates
    Drawing clip to circle - renamed to: Drawing circle coordinates
    Drawing clip to polygon - renamed to: Drawing polygon coordinates
    Drawing clip to polyline - renamed to: Drawing polyline coordinates
    Inside polygon - renamed to: Inside shape

If I’ve missed anything just let me know.

I haven’t decided yet but since I plan to add a lot more geometry calculations in within the near future and deal with as many requests as I can, the price may increase.

Paul

1 Like