Disclaimer: The Eat Out to Help Out scheme has now ended; the API is now out of service and so the project will no longer work.
A NextJS webapp showing restaurants taking part in the UK's Eat Out to Help Out scheme on a geographical OpenStreetMap map. It can help users find local restaurants that they may wish to try out because of the 50% discount.
Users can view local restaurants in other areas in the UK by dragging to change the centre of the map.
Technologies used: Node.js, Next.js, TailwindCSS, React
To demonstrate and setup the application, clone this project
$ git clone https://github.com/HilliamT/EotHo-Visualised.git
$ npm install
$ npm start
You will then be able to view the project at http://localhost:3000/
This webapp utilises a GOV.UK endpoint that provides a list of all participating non-chain restaurants within reason.
GET https://www.tax.service.gov.uk/eat-out-to-help-out/find-a-restaurant/results?lookup=POSTCODE`
Entering a correct POSTCODE
will display the 50 closests restaurants to that postcode, returning in the format:
{
data: [ distance: number, details: {
name: string,
address: {
line1: string
line2: string
town: string
postcode: string
},
location: [ latitude: number, longitude: number ]
}]
}
Making use of the Node.js module Leaflet
, a module for displaying interactive geographical maps using OpenStreetMap, one can display the geographical location and of nearby places. To default or set the location of the centre of the map, a pair of numerical latitude
and longitude
values are needed.
MapElem.state.currentLocation: [51.505, -0.09]
The MapElem React component keeps track of the centre of the map as currentLocation
and is updated via recalculation as the user drags the map to a different geographical location.
To search for local restaurants from the centre of the map, the location, currently in the numerical pair format of latitude
and longitude
, would have to be converted to an appropriate POSTCODE
to query the GOV.UK API. This is done using node-postcodes.io
.
For each of the 50 closests restaurants, a marker is displayed on the geographical map to mark their location.
MapElem.renderMarker
The wrapper library react-leaflet-universal
has been used to provide a predefined React component that will place itself at the correct location on the Leaflet
map when given a [latitude, longitude]
pair.
The marker has also been edited to use a custom marker design that I have personally designed for this project. This design can be found within the public/img
folder and can be changed by replacing marker images of the same name within that folder.