oedb-backend/doc/demo_endpoint.md

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:

   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:

   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