Git Product home page Git Product logo

toiletmap's Introduction

toiletmap.org.uk

Public Convenience Ltd's Great British Public Toilet Map

Powered by Vercel

What is the Toilet Map?

Everyone will, at some point in the day, need to use the toilet. Some people will need facilities more than others, and some will need to find toilets sooner rather than later.

The Great British Public Toilet Map aims to be a complete, up-to-date, sustainable source of toilet locations. It's the UK's largest database of publicly-accessible toilets, with over 14,000 facilities.

The project is completely open source and is supported by a fantastic set of Sponsors who help us make the service as good as it can possibly be.

This documentation is oriented towards developers, if you'd like to learn more about our data and how to access it please refer to Toilet Map Explorer.

Getting Started

The following is a "quick start" guide aimed at getting you started with a development environment to start hacking on the map. If you'd like to configure Auth0 for local authentication or run our end to end tests locally please take a look at our more in-depth setup documentation.

Prerequisites

  • fnm (or a node version matching the one specified in .nvmrc)
  • pnpm
  • Docker to spin up a local postgres database to develop against.
  • Vercel CLI (optional)

Installation

Clone or download and unpack the project and change into its directory and then use your favourite node version manager to switch to the version defined in our .nvmrc. We use fnm as a demonstration, although alternative are available such as asdf and nvm:

fnm use

Now we install the dependencies using the pnpm package manager:

pnpm install

Run, Toiletmap, Run

First we need a set of local environment variables:

cp .env.local.example .env.local

Next you'll need to set up a local instance of Postgres based on our mocked loo data. This is so that you can load something on your local instance of the Toilet Map. We use the Supabase development container to spin up a local version of the same platform that we currently use in stage and production.

Note It's also possible to connect directly to our staging database, although you'll need to ask for those credentials should you need them.

pnpm supabase:start

When you run this command, 5000 mock toilets and UK area boundaries will be loaded from seed.sql. The loos in use here are pre-generated using faker.js in generateMocks.ts.

Because the faker generation is set with a static seed, the values remain the same between generations. This is important, because we depend upon the values remaining the same in our cypress tests so we have a deterministic set of data to rely upon across our test runs.

Once you have a local Postgres instance running you'll then be able to spin up a local development server using the following command:

pnpm dev

If all is well, upon navigation to http://localhost:3000 you will be presented with your very own instance of the Toilet Map that is connected to the local Postgres database that you have just set up.

If you'd like to make contributions to the project this is a good time to read our contributing guidelines and our code of conduct.

Architecture

The Toilet Map UI is built with Next.js. The API is written in GraphQL with GraphQL Yoga Server and data is stored in a Postgres database hosted by Supabase. We connect to the database through the Prisma ORM. Authentication is handled by Auth0 and the site is deployed to vercel

Sponsors

Our brilliant sponsors help us to bring a stable and high quality service to our users.

Vercel

Powered by Vercel

Vercel sponsor the hosting and deployment of the Next.js based Toilet Map, allowing us to scale confidently and iterate quickly using their versatile platform.

Sentry

Logging is kindly sponsored by Sentry

Our client and server side logging in production is kindly sponsored by Sentry.

Cypress

Cypress dashboard enhances our development workflow when working with our Cypress test suite

Cypress Dashboard speeds up and enhances our testing workflow, helping us to deliver changes faster and with fewer bugs.


Looking to help? Let us know

toiletmap's People

Contributors

adrianclay avatar charlesstrange2 avatar dependabot[bot] avatar edpe avatar falconx avatar greenkeeperio-bot avatar hannahouazzane avatar hoolean avatar jthistle avatar majewskim avatar marxian avatar mxdvl avatar nikomus avatar ob6160 avatar ocoldwell avatar renovate-bot avatar renovate[bot] avatar robopython avatar robpre avatar rosejbon avatar sarikawirtz avatar stphnnnn avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

toiletmap's Issues

Feature Review

Conduct a feature review in an attempt to list the features of the current site as accurately as possible.

We'd use this to discuss future developments and also to guide our efforts to write a more thorough test suite...

Styling Issues

FIREFOX

  • Styling of More info on Firefox eg St. Andrews.
  • No scroll on Nearest Toilets selection

Set preferences text

"Hi!
The 5 nearest toilets are listed below. Click more info to find out about each toilet's features.

You can set preferences to highlight toilets that meet your specific needs".

Text is misleading, User expected to see these loos on the map or for loo's that didn't match preferences to not appear.

Baby-changing data wrong

Baby-changing stat is showing majority as 'no' and very few are 'unknown'.
Could this data from when the field was incorrectly made a boolean and any edit was defaulting to 'no'?

Babychanging data by area - active toilets

The baby-changing column in the 'By Area' statistics of the Explorer is showing # of baby-changing for all toilet reports when it should just show the 'active' toilet reports.

Hopefully the headline stats also use 'active' toilets, not 'all' for baby-changing, accessible, public/restricted...?

Learn about Electron

And think about how we'd use it to make a desktop management and data explorer app for GBPTM

We start work on that in August ;-)

Safari -User testing

@marxian @Hoolean

Some feedback from a user who is not particularly tech savvy and is/maybe dyslexic, using an iPad Air on safari browser

  • Landscape - Only shows first nearest toilet, user didn't know they could scroll
  • User didn't read info, looked at map then struggled to work out where they were
  • Do I log in?
  • How do I know where I am?
  • How do know how many toilets work? - User selected a toilet which had a big queue. Needed to find another quickly. What's the quickest route?
  • Individual toilet selection. Didn't understand the logic of going from map with many toilets to an individual selection
  • I'm not familiar with the area. Directions to toilet
  • Make map more user friendly
  • Map didn't load when selecting full size icon #204
  • User didn't know what the symbols meant on the map. Thought the "find me" icon was for directions
  • User walked with the iPad expecting the map to highlight the route
  • User couldn't find Norwich Market toilets on map
  • User works with drug users and commented on this in relation to public toilets and drug users
  • User runs https://www.map.uk.net/get-help/gender/ and requested that Non-gender specific details are added as an option for the Facilities list

Broken search button

The geolookup works, but the ๐Ÿ” button does nothing. You have to press enter.

AddEditLooPage is mistitled in edit mode

We use the same component for add/edit, and it works, but it renders the same headings/rubric in both modes.

I suggest a mode prop we can pass in from index.js

Unwanted location change when navigating to the report screen

replicate:

load the site
move the map away from your geolocation
hit "Add a toilet"
see the report screen load
note that the map has reverted to your current geolocation

A variant of this behaviour in current production has resulted in a lot of loos being added in the wrong place.

LGA data

Hello - Did you add this in the end? I can't spot it. I'm submitting the final data/story to the ODI on Monday for them to consider do if we can include it there's not much time left.

Remove report de-duplication

The process of trying to update existing reports on a specific location from the same user is over-complicated.

Instead we should:

  • Not do this
  • deduplicate the array of contributors on the loo instead.

Blank radio fields default to 'no'.

Leaving the Attended/Baby-changing/Automatic/Radar fields on 'Don't know' when adding a new toilet defaults to No.

Not possible to change a field from Yes/No back to Don't know.

Tidying repos.

Please consider tidying up the GBPTM repos so we only have those for the current version open, and they are public.

Opening Hours bug

"Hi Gail

There's a bug in the map in that if you choose 'other' in the opening hours, it doesn't save it but just reverts to unknown.

Hope all is well

Phillip."

API incorrectly calculates what loos are in a given radius / bounding box

Problem

At present, metres are converted into radians before being passed to Mongo's $geoNear.

We don't really want to represent our distance as radians while providing an interface that uses metres, however, as the amount of metres a radian represents in longitude varies greatly at different latitudes. Our simple conversion method doesn't take this into account and so the results returned are misleading.

As we use $geoNear with a radius to do our bounding box queries too, using the same method of conversion, searches within a bounding box of coordinates are also affected.

Suggested Remedy

Do we want to be using metres for toilet range searches in our API?

  • For nearby toilets, almost definitely, as this represents how accessible toilets are for a user far better than coordinates could. Mongo has support for metre radii, which we should try and use here.
  • For coordinate bounds, it is more complicated. We should see how this could be used on the front-end before fixing this implementation but, to fix this, either:
    • The approach for nearby toilets could be used as previously (and clipped to the bounding box, which is not done at the moment, although this is a separate issue) or
    • Simple numerical conditions could be tested against the toilet's coordinates (greater than / less than) to eliminate toilets outside the bounds, assuming they are rectangular, which is not checked for at present)

opening_hours dependency is too heavy

We currently depend on the opening_hours module to check if loos are open at the time of viewing.

It adds at least 200K (uncompressed) to our payload.

Given that our app allows the use of precisely 5 opening hours variants we can probably slim this down a lot with an implementation of our own.

API near loos endpoint's limit parameter includes inactive loos, which aren't given in the response

Unexpected Behaviour

GET /api/loos/near/0/52?limit=5 gives 4 loos.
GET /api/loos/near/0/52?limit=100, with the same default radius, gives 96 loos. This shows that the previous request should have provided 5 loos instead of 4.

Suspected Cause

The limit parameter is applied before inactive loos are filtered out.

Suggested Remedy

The $geoNear query must be first in the aggregation, so a fix is not as simple as changing the order.

We should consider the function of the limit parameter, as it is currently been worked around in our front end by being given an arbitrarily large value instead of being useful.

Perhaps it makes more sense to limit the radius of the search instead of the quantity of results, as this would pertain to how the endpoint is actually used better.

Testing questions/Issues

  • IE11 Toilet pin doesn't fire?
  • Toilet preferences doesn't seem to do anything eg Gurney Road toilets doesn't have baby changing but appears on map after making preference.
  • Map centre dot might get confused for a loo?
  • Where does initial data come from
  • Styling of More info on Firefox eg St. Andrews.
  • Updating credentials ?

Zooming behaves strangely in Add Mode

Expected Behaviour

In Add Mode, the user is either not allowed to zoom at all or can zoom as normal.

Actual Behaviour

On finishing a zoom, the user is immediately and disconcertingly returned to their previous zoom level, although not always in the same location.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.