I Need Toilet

An unofficial listing of toilets rated by the Restroom Association (Singapore).

Why?

I wanted to learn Svelte by building something other than a to-do list or pomodoro timer. I came across the website of the Restroom Association in Singapore and decided to build a nice listing for them. Obviously this app is only relevant to Singapore.

How?

Tools used:

• Svelte with Rollup
• Mapbox
• Tailwind

1. Toilet information was scrapped from here using webscraper.io.

2. As only addresses were available, I used this batch geocoder to get lat lng coordinates of each toilet. There are probably some errors 😉

3. The resulting csv data file needs to be converted to geojson format to be consumed by Mapbox. I used geojson.io.

Try

The site is hosted at https://sgtoilet.app

If you want to run it locally, Node.js is required. Clone the repo and

npm install

Get a free Mapbox public key by creating an account. Put your key in the src/keys.js file like this

export const mapBoxKey = YOUR_OWN_KEY;

Start by

npm run dev

and go to localhost:5000.

Build for production using

npm run build

and serve the dist folder.

Contribute

✋ Feel free to submit an issue or PR if you notice any wrongly geocoded entries!
✋ Mapbox has a comprehensive styling API with many opportunities for customization

Disclaimer: This is my first Svelte app so there is certainly room for improvement!

License

MIT
👍 Thanks to the Restroom Association (Singapore) for the data