DEV Community

Cover image for Showing Wildfires on Google Maps with Blazor Server
Zoltan Halasz
Zoltan Halasz

Posted on

Showing Wildfires on Google Maps with Blazor Server

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:

  "NasaAPI": "https://eonet.sci.gsfc.nasa.gov/api/v2.1/categories/8"
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)