Video Demo: Watch on YouTube
Live Demo: Access the Canadian Wildfire Map
This project is my CS50 Final Project. As the wildfire season in Canada worsens each year, I developed a web app that allows users to track the current wildfires in Canada. The app utilizes the NRCAN Open Data API to retrieve the latest information on wildfires in Canada.
The wildfire data is displayed on an interactive web map using Leaflet and OpenStreetMap.
The app prompts the user for their location and automatically zooms to that location if location access is permitted and available. In case the user denies location access or the location cannot be determined, the map defaults to Canada's coordinates (latitude 60, longitude -95) with a zoom level of 4.
When a user clicks on a wildfire marker, a popup displays the wildfire name, the agency in charge, the fire size and status, and the distance between the wildfire and the user's location.
Additionally, users can search for specific locations using the search input. The app utilizes the NRCAN Geolocation Service to obtain the geographic coordinates of the named feature. The map then zooms to the searched location and displays the wildfires in that area.
- App.svelte - The main component containing the map and the search input.
- Map.svelte - The component responsible for rendering the Leaflet map.
- Locator.svelte - The component enabling users to search for a specific location.
- Location.svelte - A component displaying a potential location for the user to select from the dropdown menu in the Locator.
I opted to use Svelte for this project to learn a new framework. Svelte appealed to me due to its compilation process, lightweight nature, speed, and reputation for being enjoyable to use.
To practice TypeScript, I chose it as the programming language for this project, even though I have more experience developing web applications with JavaScript.
For the map functionality, I selected Leaflet due to its simplicity and user-friendly nature. Additionally, Leaflet is an open-source library with a large community.
To provide map tiles, I utilized OpenStreetMap, which is open-source, widely supported by the community, and free of charge.
To retrieve wildfire data, I employed the NRCAN Open Data API because it offers extensive data, including information about the current wildfires in Canada, and it is freely accessible.
Using a web map to display the wildfires allows users to visualize the wildfires in relation to their own location, enabling them to assess their proximity to the fires and make informed decisions regarding their safety. To emphasize wildfires within close range (within 100 km), I added a header to the map displaying the number of wildfires within 100 km of the user's location.
Overall, this project was an enjoyable learning experience. I gained valuable knowledge about Svelte and TypeScript, although I encountered challenges with nesting Svelte components and implementing message passing between them. Additionally, integrating the Leaflet map with Svelte presented difficulties since the chosen svelte-leafletjs library lacked certain methods and events. I had to handle them within onMount and other handlers by directly accessing the Leaflet map object.
The app is built using Svelte with TypeScript, Leaflet, and OpenStreetMap. It relies on the NRCAN Open Data for retrieving current wildfire data in Canada and the NRCAN Web Mapping Service for wildfire boundaries and point location icons. The NRCAN Geolocation Service is used to obtain geographic coordinates for named features.
- Clone the repo
- Install the dependencies
npm install
- Run the app
npm run dev
- Open http://localhost:8080 in your browser to view the app.
npm run start
- Open http://localhost:8080 to view it in the browser.
- Allow the app to access your location.
- Click on a wildfire marker to view more information about the wildfire.
- Use the search input to find specific locations.
npm run svelte-check
npm run test
npm run test:ui
npm run coverage
npm run build
- Create a new repository on GitHub.
- Push the app to GitHub.
git remote add origin
git push -u origin main
- Create a new app on DigitalOcean.
- Connect the app to the GitHub repository.
- Deploy the app selecting the main branch and the static site option.
- Fork the repo.
- Create a new branch.
git checkout -b <branch name>
- Make changes and commit them.
git add .
git commit -m "commit message"
- Push the changes to GitHub.
git push origin <branch name>
- Create a pull request.
This project is licensed under the MIT License. For details, see the LICENSE.md file.