See his material, and check the code provided, as this is a the beginning step towards our application. 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)
B. Add Blazor Radzen to the project, as presented below:
https://blazor.radzen.com/get-started
C. Add the following Changes, described below:
1. 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; }
}
2. The code is commented, 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.
3. The left menu is slightly simplified versus the Tim version, you can copy or leave it.
Enjoy! Let me know your comments.
