Forum Academy Marketplace Showcase Pricing Features

[PLUGIN] - What3Words Advanced + Google Map (drawing/geometry)

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.