BusBee is a spatially enabled website that visualises bus routes, stops and timetables across Greater Manchester using the Leaflet and OpenLayers libraries.
This project was created as part of IS3S665 - GIS and the Spatial Web at the University of South Wales (USW).
The curriculum for the module can be found here: IS3S665 - GIS and the Spatial Web
A deployed version of the tool is available to try at: busbee.totaldwarf.dev.
Note: The above URL redirects you to Vercel deployment of the website.
- Interactive map visualisations of bus routes and stops across Greater Manchester.
- Integration of bus timetables for easy access to schedule information.
- Use of Leaflet and OpenLayers libraries for advanced mapping capabilities.
- View pollution emission layers using WMS services.
To get started with the BusBee project, you can simply clone the repository and open the index.html file in your web browser.
For information on the datasets used in this project, please refer to the README in the datasets directory.
Unfortunately, a few changes have been made to the project in order to get it working on the USW student webserver. These changes are noted below:
- File Types: The student webserver has restrictions on certain file types, geojson files in particular. To work around this, all geojson files have been converted to standard
.jsonfiles. - Leaflet TrackPlayer Plugin: The Leaflet TrackPlayer plugin used in this project makes use of a
.cjsfile, which is not supported by the student webserver. To resolve this, the plugin has been modified to use a standard.jsfile instead.
This project uses GitHub Actions to run Prettier and Markdownlint on push and pull requests to the main branch. These action can be found in the .github/workflows directory.
These action will check for formatting and linting issues in the codebase. If any issues are found, the action will fail and provide feedback on what needs to be fixed.
To fix any issues, you will need to run the tools locally using the instructions below.
Credit:
To run Prettier locally, you will need to have Node.js and npm installed. You can then install Prettier using the following command:
npm install --global prettierNote: This installs Prettier globally on your system. If you prefer to install it locally to the project, you can run npm install --save-dev prettier instead.
Once Prettier is installed, you can run it on the project using the following command:
prettier --write .To run Markdownlint using Docker, you will need to have Docker or Podman installed. You can then run the following command from the root of the project:
docker run -v $PWD:/workdir ghcr.io/igorshubovych/markdownlint-cli:latest "**/*.md"If using Podman, simply replace docker with podman in the command above.
To run Markdownlint locally, you will need to have Node.js and npm installed. You can then install Markdownlint using the following command:
npm install --global markdownlint-cliNote: This installs Markdownlint globally on your system. If you prefer to install it locally to the project, you can run npm install --save-dev markdownlint-cli instead.
Once Markdownlint is installed, you can run it on the project using the following command:
markdownlint . --fix- Bus Routes: GM Bus Routes
- Bus Stops: GM Bus Stopping Points
- Bus Timetables: Bus Stops and Schedules
- OpenStreetMap: OpenStreetMap
- Esri World Imagery: Esri World Imagery
- Stadia Alidade Smooth (Dark and Light): Stadia Maps
- Stadia Stamen Toner Labels: Stadia Maps
- Emission WMS Layers: Air quality pollutant emission maps for the UK and Devolved Governments
- These are used to display a range of emission layers on maps.
- The authors also host a web GIS service which I have used to validate the WMS layers in BusBee: NAEI Emissions App.
To find out more about my experience working with WMS services, see Working with WMS Services.
Leaflet (v1.9.4): Leaflet
This is the latest stable version of Leaflet at the time of writing.
- Leaflet.markercluster: Clusters markers for improved performance and usability on maps with many markers.
- Leaflet HeatCanvas: Adds heatmap layer support to Leaflet using HTML5 canvas.
- Leaflet.TrackPlayer: Plays GPS tracks on Leaflet maps (Animation along a path).
OpenLayers (v6.15.1): OpenLayers
An older version of OpenLayers is used here since the use of Node Package Manager (NPM) is not used in the module curriculum. Version 6.15.1 is the latest version that does not require NPM for installation, and can instead use a simple script tag in the HTML.
- ol-layerswitcher: Adds a layer switcher control to OpenLayers maps.
- Dev.css: Dev.css