Welcome to the Road Accident Map Marker application, a powerful tool designed for tracking and visualizing road accident locations using an interactive map. This application provides an easy way to record accident details such as the date, vehicles involved, and additional notes. Leveraging Leaflet.js for map functionality, users can mark accident sites by simply clicking on the map, which automatically updates latitude and longitude coordinates. Each accident marker is stored in a MySQL database, allowing for organized and retrievable accident data managed through PHP.

The application’s user-friendly interface and responsive design make it ideal for use across various devices, enabling users to conveniently add, view, and delete accident records as needed. Marked locations are displayed in a list and on the map, where users can review accident details with just a click. Whether for personal use, data analysis, or community safety initiatives, the Road Accident Map Marker is an efficient and practical solution for logging and visualizing road accidents geographically.

You may also check some simple PHP projects:

• Profile Registration without Refresh/Reload
• Drag and Drop Image Upload
• Leads Manager Tool
• Contact Manager with Export to VCF
• Accounts Manager App

Features:

1. Interactive Map with Location Marking: Users can click on the map to select accident coordinates. The application automatically populates latitude and longitude fields based on the clicked location.
2. Accident Details Logging: The app records the accident date, vehicles involved, and additional details, saving this data to a MySQL database.
3. View Marked Locations: Previously saved accident markers are displayed on the map with detailed popups, allowing users to view information about each incident.
4. Dynamic Data Management: Users can add, view, and delete accident markers, with data managed via PHP and MySQL.
5. Responsive Interface: The app is styled with CSS, ensuring it is accessible and visually appealing on various devices.

Technologies Used:

• HTML & CSS: Provides the structure and styling for the user interface.
• JavaScript (Leaflet.js): Renders the interactive map and handles marker placements and popups.
• PHP: Processes data and interacts with the MySQL database for storing and retrieving accident information.
• MySQL: Stores accident records, including date, involved vehicles, details, and coordinates, allowing for efficient data retrieval and management.
• Google Fonts: Adds custom fonts for a modern and clean design aesthetic.

How to Use:

1. Marking an Accident Location: Click on the desired location on the map to set the coordinates. The latitude and longitude fields in the form will automatically fill with the selected coordinates.
2. Filling Accident Details: Input details such as the date of the accident, the vehicles involved, and any additional information.
3. Saving the Marker: Once the form is complete, click "Save Marker" to store the accident details in the database.
4. Viewing Saved Markers: Existing accident markers are listed in the "Marked Locations" section and displayed on the map. Click "View Location" next to each marker to pan the map to that specific location and view accident details.
5. Deleting a Marker: Click the delete icon next to a marker in the "Marked Locations" list to remove it. You will be prompted to confirm before the deletion is processed.

Sample Screenshots of the Project:

Road Accident Map Marker

How to Run?

• Download and Install XAMPP.
• Download the provided source code zip file.

Note: The  database is included on the provided zip file.

Installation/Setup:

• Create a  database named "accident_marker_db" in phpMyAdmin  MySQL.
• Extract the provided source code to the htdocs folder.
• Import the provided  SQL file into the created  database.
• Open your browser with the link "http://localhost/road-accident-map-marker/".

Video Demonstration for Installation/Setup:

Conclusion: