Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cerivitos/INeedToilet
An unofficial listing of toilets rated by the Restroom Association (Singapore)
https://github.com/cerivitos/INeedToilet
javascript mapbox singapore svelte toilet-map
Last synced: 11 days ago
JSON representation
An unofficial listing of toilets rated by the Restroom Association (Singapore)
- Host: GitHub
- URL: https://github.com/cerivitos/INeedToilet
- Owner: cerivitos
- License: mit
- Created: 2019-06-03T16:10:46.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T02:30:50.000Z (almost 2 years ago)
- Last Synced: 2024-10-14T08:29:31.761Z (24 days ago)
- Topics: javascript, mapbox, singapore, svelte, toilet-map
- Language: JavaScript
- Homepage: https://sgtoilet.app
- Size: 7.54 MB
- Stars: 11
- Watchers: 2
- Forks: 2
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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](https://www.toilet.org.sg) in Singapore and decided to build a nice listing for them. Obviously this app is only relevant to Singapore.
## How?
Tools used:
* [Svelte](https://svelte.dev) with [Rollup](https://rollupjs.org)
* [Mapbox](https://mapbox.com)
* [Tailwind](https://tailwindcss.com)
1) Toilet information was scrapped from [here](https://www.toilet.org.sg/loomapdirectory) using [webscraper.io](https://webscraper.io).
2) As only addresses were available, I used this [batch geocoder](https://geocode.localfocus.nl/) to get lat lng coordinates of each toilet. There are probably some errors :wink:
3) The resulting csv data file needs to be converted to geojson format to be consumed by Mapbox. I used [geojson.io](https://geojson.io).
## Try
The site is hosted at [https://sgtoilet.app](https://sgtoilet.app)
If you want to run it locally, [Node.js](https://nodejs.org) is required. Clone the repo and
```bash
npm install
```
Get a free Mapbox public key by creating an account. Put your key in the `src/keys.js` file like this
```javascript
export const mapBoxKey = YOUR_OWN_KEY;
```
Start by
```bash
npm run dev
```
and go to [localhost:5000](http://localhost:5000).
Build for production using
```bash
npm run build
```
and serve the `dist` folder.
## Contribute
:raised_hand: Feel free to submit an issue or PR if you notice any wrongly geocoded entries!\
:raised_hand: Mapbox has a comprehensive [styling API](https://docs.mapbox.com/mapbox-gl-js/api/) with many opportunities for customization
*Disclaimer: This is my first Svelte app so there is certainly room for improvement!*
## License
MIT\
:+1: Thanks to the Restroom Association (Singapore) for the data