DEV Community 👩‍💻👨‍💻

Cover image for Simple Weather App With Google Maps Using Blazor Server, HttpClient and Radzen Components
Zoltan Halasz
Zoltan Halasz

Posted on

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; }
    }
Enter fullscreen mode Exit fullscreen mode

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:

Maps
Enjoy! Let me know your comments.

Top comments (13)

Collapse
 
theonlybeardedbeast profile image
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?

Collapse
 
devhammed profile image
Hammed Oyedele

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

Collapse
 
theonlybeardedbeast profile image
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

Thread Thread
 
devhammed profile image
Hammed Oyedele

Can you provide the steps?

Thread Thread
 
theonlybeardedbeast profile image
TheOnlyBeardedBeast

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

Thread Thread
 
theonlybeardedbeast profile image
TheOnlyBeardedBeast • Edited on

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.

Thread Thread
 
devhammed profile image
Hammed Oyedele

Thank you so much ✊✊✊

Thread Thread
 
theonlybeardedbeast profile image
TheOnlyBeardedBeast

no problem, have a nice day ;)

Collapse
 
saint4eva profile image
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.

Collapse
 
theonlybeardedbeast profile image
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

Collapse
 
zoltanhalasz profile image
Zoltan Halasz Author

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

Collapse
 
saint4eva profile image
saint4eva

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

Collapse
 
lena profile image
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."?

🌚 Life is too short to browse without dark mode