This project involves developing a web application that allows users to view a map,create, edit,delete, and save points of interest, all while offering features like a login page for user authentication and a menu for easy navigation.
I chosed leaflet instead of google maps because it offers you full
control over map styling, markers, popups, and interactions,
while google maps have limitations in terms of styling and
branding, as it's designed to maintain a consistent Google Maps look.
The application can be started simply by running the command `npm start`.
When the user starts the app he's redirected to the home page.
The login form requests the user's email and password.
There is validation for incorrect input fields.
After a successful login, the user is redirected to the map page
with an updated navigation bar, and their current location is centered on the map.
When the user clicks on the map, a create form appears, allowing the user to enter
information and create a point of interest.
After successfully creating a point of interest, the new location is
added to the list view. When you click on the location on the map, a popup appears.
The list view of the points can be sorted by category and name.
Additionally, users can search for points by category.
If the user clicks the 'Locate' button for a point in the
list view, it centers the selected point on the map.
If the user clicks the 'Locate my position' button, it centers the map on
the user's current position.
If the user clicks the 'Edit' button, an edit form
will appear on the screen, allowing you to modify the information of the point.
If the user clicks the 'Delete' button, a delete confirmation dialog will appear
on the screen, asking the user to confirm whether they want to delete the point.
When user zooms out, points that are close to each other form a marker
cluster that displays the exact number of locations that are in close proximity.
- React
- HTML
- CSS
- Leaflet
- GitHub
- GitHub Desktop