79 lines
No EOL
2.5 KiB
Markdown
79 lines
No EOL
2.5 KiB
Markdown
# Demo Endpoint Implementation
|
|
|
|
## Overview
|
|
|
|
A new endpoint `/demo` has been added to the OpenEventDatabase API. This endpoint serves an interactive HTML page with a MapLibre map that displays current events from the database.
|
|
|
|
## Features
|
|
|
|
- Interactive MapLibre map showing current events
|
|
- Events are fetched from the `/event` endpoint with the current date
|
|
- Each event is displayed as a marker on the map
|
|
- Clicking on a marker shows a popup with event details
|
|
- The map automatically zooms to fit all displayed events
|
|
- Sidebar with links to other API endpoints and the GitHub repository
|
|
|
|
## Implementation Details
|
|
|
|
The implementation consists of the following components:
|
|
|
|
1. **DemoResource Class**: A new resource class in `oedb/resources/demo.py` that handles GET requests to the `/demo` endpoint and returns an HTML page.
|
|
|
|
2. **HTML Page**: The HTML page includes:
|
|
- MapLibre JS and CSS libraries
|
|
- Custom CSS for styling the page
|
|
- A full-screen map
|
|
- A sidebar with information and links
|
|
|
|
3. **JavaScript**: The JavaScript code:
|
|
- Initializes a MapLibre map
|
|
- Fetches events from the `/event` endpoint
|
|
- Displays events as markers on the map
|
|
- Creates popups with event details
|
|
- Fits the map view to include all events
|
|
|
|
4. **Route Registration**: The `/demo` endpoint is registered in `backend.py` with the line:
|
|
```python
|
|
app.add_route('/demo', demo)
|
|
```
|
|
|
|
5. **Documentation**: The root endpoint (`/`) has been updated to include information about the demo endpoint.
|
|
|
|
## How to Test
|
|
|
|
To test the demo endpoint:
|
|
|
|
1. Start the server:
|
|
```bash
|
|
python3 backend.py
|
|
```
|
|
|
|
2. Open a web browser and navigate to:
|
|
```
|
|
http://127.0.0.1:8080/demo
|
|
```
|
|
|
|
3. Verify that:
|
|
- The page loads correctly with a MapLibre map
|
|
- Events are displayed on the map (if there are events for the current date)
|
|
- Clicking on a marker shows a popup with event details
|
|
- Links to other endpoints work correctly
|
|
|
|
## Troubleshooting
|
|
|
|
If no events appear on the map:
|
|
|
|
1. Check if there are events for the current date in the database
|
|
2. Try adding a test event using the `/event` endpoint
|
|
3. Check the browser console for any JavaScript errors
|
|
4. Verify that the `/event` endpoint is working correctly by accessing it directly
|
|
|
|
## Future Improvements
|
|
|
|
Potential future improvements for the demo page:
|
|
|
|
1. Add date selection to view events from different dates
|
|
2. Add filtering options (by event type, location, etc.)
|
|
3. Add a search box to find specific events
|
|
4. Improve the mobile experience
|
|
5. Add more interactive features to the map |