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:
https://youtu.be/ontX4zfVqK8
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: Link
Github Repo with code: https://github.com/zoltanhalasz/WildFiresBlazor
Steps for the application:
- Create a Blazor Server App with Asp.Net Core 3.1
- Install Blazor Radzen for Server: https://blazor.radzen.com/get-started
- See the tutorial for the Httpclient in Blazor from Tim Corey: https://www.youtube.com/watch?v=cwgck1k0YKU&feature=emb_err_woyt
- 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.
- 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.
- The page with the wildfires, will be using Google Maps Component, please study that also on Radzen Blazor https://blazor.radzen.com/googlemap
- 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.
Top comments (0)