What3Words (free plugin)

Hey all,

FYI @patrick12

So recently I put together a rather comprehensive plugin which gives all the functionality for a company here in London (UK) called What3Words. For those of you don’t know, they came up with the idea a few years back to split the entire globe into a 3x3 meter square grid which consists of somewhere in the region of 57 trillion squares where each square has a unique set of 3 words applied to it, making it outstandingly accurate if you know the 3 word address for the location you’re at.

The “paid for” version of this plugin includes almost everything they have to offer plus a maps element that opens up the geometry/drawing libraries from Google, allowing the two elements to seamlessly work with one another. I’ve just released a free version to demo their “search element tool” (auto-correct) and shows how you can convert both a word address to a set of GPS latitude/longitude coordinates and vice versa.

DEMO
https://paul-testing-3.bubbleapps.io/version-test/what_3_words_search

EDITOR
https://bubble.io/page?type=page&name=what_3_words_search&id=paul-testing-3&tab=tabs-1

PLUGIN
https://bubble.io/plugin/what3words-search-1647680911541x774144629408792600

Normally, I would write this post to outline all the instructions needed for any plugins I create but this time I’ve put most of it into the demo page instead.

The image below shows the W3W (search) element tool on the left, and on the right a custom built input field styled using Bubble elements, utilising the actions to return the data.

When you click on a returned set of words, the map will open up showing where that reference is located.

Since the “paid for” version of this plugin includes the map element with the grid overlay option included, I’ve set this up and you can see it by clicking the red button in the top left corner of the page. Grid isn’t included in the free version.

image

Then you should see something like this

All the descriptions for the element options, actions, events and states are detailed within the demo page.

I’ve included a second element called W3W (instant text) and it’s designed to return the value from an input element immediately without having to wait for that slight delay from bubble before it recognises the entered value. This can be handy if you do decide on creating your own type of interface because you can utilise the event and run either of the convert actions as soon as the input field has been updated. There’s an example on how to conditionally trigger a workflow (using regex) so it only runs when a valid 3 word address has been recognised.


(?:[A-Za-z]+\.){2}[A-Za-z]+

Paul

3 Likes

wow. Really interesting stuff.

How big are the smallest squares?

So all the squares are an exact 3 x 3 meter square, all the same sizes. Although the grid image above has the 45 degree tilt applied to it which makes them look not square.

Without that tilt, you’d see this (Bubble HQ) :slight_smile:

2 Likes

thanks! super helpful

1 Like

@pork1977gm
Hi Paul,

If you could remove the global HTML header, the plugin would become much lighter to use, especially for single page apps.

This way the w2w JS file would only load on pages/groups where the input boxes are.

e.g. checkout this implementation -Bubble Plugin Editor - Wonderful Image Slider

Ah yes, good catch, I’ll do that now.

ok all done you can update

Just wanted to stop by and say what a great, well documented, free plugin :+1: Thank you!

2 Likes

You’re welcome! and thank you.