Simple Weather App With Google Maps Using Blazor Server, HttpClient and Radzen Components

My favorite teacher for C# on Youtube is Tim Corey, and his latest material concerns HttpClient, using a Weather Forecast Api.
See his material, and check the code provided, as this is a the beginning step towards our application. https://youtu.be/cwgck1k0YKU
My application is live: https://httpclientwithmaps.azurewebsites.net
Final project is: https://github.com/zoltanhalasz/HttpClientWithMaps

The way the final application works:

1. map is centered in Central Europe
2. click on the map- we will see the neighboring cities with available weather data
3. click on a red bullet - (marker) - the available weather forecast will be displayed in the table on the right.

Prerequisites:

1. Dotnet Blazor Server Side Basics - see my previous tutorial
2. Check Radzen Controls for Maps - check the source https://blazor.radzen.com/googlemap
3. Check the Weather Api - it's the same source as mentioned by Tim https://www.metaweather.com/api/

Steps to follow:
A. Take the sample application as starting point from Tim (it's a Blazor Server Application) - see repo in his description https://leadmagnets.app/?Resource=HttpClient
B. Add Blazor Radzen to the project, as presented below:
https://blazor.radzen.com/get-started
C. Add the following Changes, described below:

I. Add another class to Model folder to track the locations (which will be represented as red dots on the map)

    public class LocationModel
    {
        public int distance { get; set; }      
        public string title { get; set; }
        public string location_type { get; set; }
        public int woeid { get; set; }
        public string latt_long { get; set; }
        public double latt { get; set; }
        public double _long { get; set; }
    }

II. The code from my repo is commented, in order to understand the main functions, you can copy the WeatherData.razor page content into your project. This contains the functionality described in the beginning.

Please check the map functionality and weather api in the prerequisites to understand it.

III. The left menu is slightly simplified versus the Tim version, you can copy or leave it.

Final result:

Enjoy! Let me know your comments.

Comments

[TheOnlyBeardedBeast]

Hi, what do you think about blazor in general, I found it quit hard to adapt because I miss features like scss support or automatic browser refresh. Are these issues somehow solvable?

[Hammed Oyedele]

I could not imagine using this Blazor without automatic browser refreshing after my experience with React and all that.

[TheOnlyBeardedBeast]

Same for me, but I found a way to overcome this with browsersync, and for the styles I found a package called blazor styled

[Hammed Oyedele]

Can you provide the steps?

[TheOnlyBeardedBeast]

I will, later today (CET), for now I have still some work to do.

[TheOnlyBeardedBeast]

So

1. instal browsersync globally with yarn
2. turn on your blazor app with dotnet watch run
3. navigate into you project folder with the terminal and run ` browser-sync start "--proxy localhost:3000/ " --files '*/.razor, */.css, */.cs, */.scss !./bin, !./obj' localhost:3000/ represent the blazor app url
4. open the browsersync management link in the terminal, copy the javascript from browser sync code into the html file in your wwwroot
5. open your blazor app in the browser

thats the first time setup every other time just run the dotnet watch run command and the browsersync command in a second terminal.

[Hammed Oyedele]

Thank you so much ✊✊✊

[TheOnlyBeardedBeast]

no problem, have a nice day ;)

[saint4eva]

Scss is just a tool that compiles down to plain CSS. You can reference your CSS file in your project as you want. And there are a lot of Blazor components out there you can use.

[TheOnlyBeardedBeast]

Thanks I know that, I just miss some automation tool which could do that in the background, like in react node-sass with the right babel config and loader

[Zoltan Halasz]

For me, it is just playground. I would stick to asp.net razor pages and html , css, javascript for the moment.

[saint4eva]

Whatever makes you happy. Razor Pages is as powerful as Blazor. Blazor, both server-side and client-side, is production ready.

[lenabojanowska]

Hi. Do you have any idea why while I am clicking on the Map I get an error that "Input string was not in a correct format."?