Address autocomplete without third-party services like Mapbox or Google Maps? It's possible!

Hey there 😁,

Thanks for clicking on this article, I hope you'll enjoy it 😝.

So today, we're going to talk about address forms and how to autocomplete an address, it seems like a good addition to LFMaps .

Are you ready? Let's go!

Why this article?

Making a freemium is hard.

Let's start from the beginning, ViteUneTable is now a freemium, for various reasons I've talked about on Twitter. Overall, spending my time with restaurant owners is not my thing.

I prefer to make a version with basic features for free, rather than hassling myself chasing after them, facing solutions that have big sales teams and everything, anyway, I don't stand a chance.

So I came up with the freemium idea, but a freemium isn't that simple actually...

For hosting, no problem there, I have my little infrastructure that will handle everything just fine, but the problem I encounter is with external APIs...

That's actually why LFMaps came out this summer 😁 (for another project actually, we'll talk about it later)

During registration, I wanted the restaurant address input to be super simple... but I didn't want to use an external API like Google Maps or Mapbox, because if that happens, I could get hit with a massive bill, and I prefer completely predictable costs rather than crazy invoices.

A simple trip to the hairdresser

Then one day, leaving the hairdresser, I had to add an item to my calendar, and my calendar is Hey Calendar .

I noticed something, they have address autocomplete but it doesn't look anything like what I know in the results, it's not Google API... 😛.

When I got home, I thought "Let's take a look at what's happening, where are the HTTP requests going?"

And of course, everything goes to their own servers, so they have something internally that allows them to do this, probably based on open source software...

From there, I told myself I had to find something equivalent, and it works, that's the gif you saw above 😁.

Photon, not great with French addresses...

First, I tested Photon, it offers a worldwide database but it's possible to choose only one country, in my case, France.

As far as I'm concerned, to run it, I simply used this Docker image.

Regarding the docker-compose:

Here, we only download France 😀, for the rest of the world, just comment out the "region".

The first launch will be slow, it will download all the necessary data for operation, once that's done.

Go here to see the requests to make to find addresses

Addok, the best for France?

After testing Photon and being disappointed with it, I tried my luck with Addok

Let's not lie to ourselves, it's night and day... Addok works much better for French addresses, it's the gif you saw at the beginning of the article.

Just like for Photon, there's a Docker container for Addok .

A little docker-compose? Come on, this one is the one I use in production, it's a gift.

Just like Photon, before working properly, it needs to download the data, it's about 7 GB.

Regarding its use, you'll find the API documentation here .

The little bonus, the Stimulus controller.

Well yes... you know my love for Hotwired, so yes, I have my little Stimulus controller.

It's nothing fancy, and I used AI to help make it, but it's a good base 😁.

Conclusion

And there you have it, now you can self-host your address autocomplete 🙂.

See you soon for another article, in the meantime, have a great day 😁.