Diamond Light Source Work Experience

Project Overview

This project is an interative map of the facilities available at Diamond Light Source. It uses Leaflet to make the map. This project was developed by myself and was undertaken by A-Level students as a week long work experience project at Diamond Light Source. This repository presents the complete solution, but the project can be progressively constructed following the steps below.

Base Project Development Steps

1. Initialize a basic HTML project with a "Hello World" template, including elements such as 'h1', 'p', and 'div' – Reference: w3 schools.
2. Introduction to the concept of identifiers (IDs) in HTML.
3. Illustration of CSS styling applicable to all elements (e.g., body).
4. Further discussion about the usage and benefits of IDs in web development.
5. Demonstrate how to apply specific styles to selected elements.
6. Introduction to JavaScript by creating a simple "Hello World" alert in the same HTML file.
7. Progression to using a separate JavaScript file for script execution.
8. Demonstration of a "Hello World" alert triggered by a click on a text element.
9. Explanation of JavaScript variable syntax and its importance.
10. Implementation of Leaflet to display a map on the webpage.
11. Placement of a marker on the map indicating Diamond's location.
12. Addition of a popup dialog associated with the Diamond location marker.
13. Based on the student's proficiency with JavaScript, introduce the concepts of 'fetch' and 'JSON parsing'. If the concepts are too advanced, directly paste the required JSON into the file.
14. Addition of markers on the map for all beamline locations at Diamond Light Source.

Additional Feature Set 1

15. Integration of popup dialogs for each of the beamline markers.
16. Grouping of markers into overlays for toggle-based visibility control.
17. Addition of Diamond Light Source attribution to the map.

Additional Feature Set 2

18. Implementation of a user location marker on the map.
19. Upload the project to GitHub pages and perform on-site testing at Diamond Light Source.

Additional Feature Set 3

20. Addition of a feature to find the nearest marker on the map.
21. Styling enhancement for the "Find Closest Marker" button.

Additional Feature Set 4

22. [Not implemented] Inclusion of a feature for location marker rotation based on user's facing direction.

Usage

Simpily start a http server in the same directory and go to the index.html

Here is an example of how you can do this using python

python -m http.server

This will allow you to access the website on localhost:8000