How to build a fast and reliable community mapping tool with GatsbyJS and Firebase

Marc Fehr
10 min readMar 23, 2020

What acrazy time to be alive. Following the coronavirus pandemic, I became aware how crucial a connected community can become once everybody has to stay in self-isolation.

About this project
This community map has initially been developed by Simon Huwiler, who works as a developer for the Zurich editorial team at Tages-Anzeiger, which is lead by Mario Staeuble. The map was built on the TA Interaktiv React Base which was designed and maintained by Kaspar Manz for the Tages-Anzeiger Interaktiv Team over the last couple of years. I’m utterly grateful for all money and time that has been spoken and invested to build this map tool––once it was published, I was granted access to the repository and transformed it into this open source GatsbyJS site––which I’ll explain to you in this article.

An open source community mapping project for isolated times:

Having been a part for the Interaktivteam at Tages-Anzeiger in Zurich for a few years, their project called “Zurich Delivers” instantly caught my attention. Its main piece is an interactive map (I know, nobody likes interactive maps anymore), filled with home-delivery services available in Zurich:

Let’s begin!

The “Zurich Delivers” map that was created by the Interaktivteam in Zurich.

So far, so good. Marc Brupbacher, who is leading the Interaktivteam, justified the need for an interactive map on Twitter. “We all need to support near-by services, that’s why we put together a map — even if I personally hate interative maps”.

I then started adapting the project for the needs in our small community in Muizenberg, South Africa, where we’re now just about to get ready to isolate against the coronavirus. This is the result:

The feedback inside the community was really good––what made me think that this should become an open source project, so other developers in other neighbourhoods can set it up themselves. And here we are––follow the tutorial and set up your own “Community Isolation Map”.

What the map, what it is not:

  • It’s made for small communities––so it stays manageable for few people to run it, rather…
Marc Fehr

Outdoor enthusiast and full stack web developer specialised in frontend engineering, user experience design, digital storytelling and data visualisation.