One of my favorite web programming YT channels presented this idea during the past weeks. Traversy Media's tutorial was about showing Wildfires using React and Google Maps.
Please, have a look on his approach:
As I am checking out Blazor Server, I decided to give it a try, to reproduce something similar, using C# and Blazor Server.
The aim of this app is just to show the wildfires of the world, on a map centered on California, using the above mentioned technlogies.
Prerequisites:
- basics of Blazor server
- intermediate C#
- using free component for maps from Radzen Blazor
- using Nasa Web Api
The application is live: wildfires.zoltanhalasz.net
Github Repo with code: https://github.com/zoltanhalasz/WildFiresBlazor
Steps for the application:
1. Create a Blazor Server App with Asp.Net Core 3.1
2. Install Blazor Radzen for Server: https://blazor.radzen.com/get-started
3. See the tutorial for the Httpclient in Blazor from Tim Corey:
4. Our Api will be inserted in appsettings.json
"NasaAPI": "https://eonet.sci.gsfc.nasa.gov/api/v2.1/categories/8"
Please visit the link to examine the structure of json data, that will be deserialized.
5. Create folder Data in the project and insert class named Event.cs
Have a look on my approach, how to deserialize the json string coming from Nasa, by preparing the corresponding structure of classes.
6. The page with the wildfires, will be using Google Maps Component, please study that also on Radzon Blazor https://blazor.radzen.com/googlemap
7. The main logic of the display is presented in the Index.razor component. I will not reproduce it here, since would be just a copy paste from my repo.
I hope this was useful and somebody learnt a bit of Blazor from this.
