#57-feat(frontend): Laying Groundwork for Front End Concept

[XavierGuertin]

Summary

This PR introduces a new map component using OpenLayers to visualize wildfire data. The map includes various controls for zooming, panning, and toggling fullscreen mode.

Changes Made

• Added MapView component using OpenLayers for map rendering.
• Integrated Toolbar component for map controls (zoom, pan, reset view, fullscreen).
• Updated Navbar to include a button for toggling the Sidebar.
• Implemented Sidebar component to manage map layers and datasets.
• Sidebar and Toolbar are draggable.
• Created a logo for wildfire project
• Added icons to the navbar

Testing Instructions

1. Start the application using npm start.
2. Navigate to the main page.
3. Verify that the map is displayed correctly with the initial view centered at Ottawa.
4. Use the toolbar to zoom in, zoom out, reset the view, and pan the map in different directions.
5. Toggle fullscreen mode using the toolbar button.
6. Open the sidebar using the layers button in the navbar

Screenshots (if applicable)

Additional Notes

The map was made using OpenLayers for rendering and managing map layers.

[sonarqubecloud]

Quality Gate passed

Issues
6 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[nx-cloud]

☁️ Nx Cloud Report

CI is running for commit 332a9e5.

📂 Click to track the progress, see the status, the terminal output, and the build insights.

---

Sent with 💌 from NxCloud.

[GetGabed]

Amazing work! Just comment open to discussion. Shouldn't we use a library for the icons? (filter, location, etc.) That way we have a more consistent design

[XavierGuertin]

Amazing work! Just comment open to discussion. Shouldn't we use a library for the icons? (filter, location, etc.) That way we have a more consistent design

yes good point. We can implement that next. We will merge this first to allow everyone to start working on the UI.

[PFratt]

This is a fantastic base to continue building the frontend on. Another point to discuss with the team, we may not need the zoom and pan controls since OpenLayers handles those actions with the mouse. Either way, great work!

[XavierGuertin]

This is a fantastic base to continue building the frontend on. Another point to discuss with the team, we may not need the zoom and pan controls since OpenLayers handles those actions with the mouse. Either way, great work!

yes 100%, we could only keep the fullscreen button in the right bottom corner with an icon instead