Skip to content

Commit ae1141c

Browse files
UmaMaheswariChandraboseUmaMaheswariChandrabose
authored
Merge pull request #1 from subaa1492/main
Added Blazor Maps Annotations Sample
2 parents eede675 + c6a93af commit ae1141c

36 files changed

+1341
-1
lines changed

‎App.razor

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<Router AppAssembly="@typeof(Program).Assembly">
2+
<Found Context="routeData">
3+
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
4+
</Found>
5+
<NotFound>
6+
<LayoutView Layout="@typeof(MainLayout)">
7+
<p>Sorry, there's nothing at this address.</p>
8+
</LayoutView>
9+
</NotFound>
10+
</Router>

‎Blazor Samples.csproj

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<Project Sdk="Microsoft.NET.Sdk.Web">
2+
3+
<PropertyGroup>
4+
<TargetFramework>netstandard2.1</TargetFramework>
5+
<RazorLangVersion>3.0</RazorLangVersion>
6+
</PropertyGroup>
7+
8+
<ItemGroup>
9+
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="3.2.1" />
10+
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Build" Version="3.2.1" PrivateAssets="all" />
11+
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="3.2.1" PrivateAssets="all" />
12+
<PackageReference Include="Syncfusion.Blazor.Maps" Version="19.4.0.38" />
13+
<PackageReference Include="System.Net.Http.Json" Version="3.2.0" />
14+
</ItemGroup>
15+
16+
</Project>

‎Pages/Counter.razor

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@page "/counter"
2+
3+
<h1>Counter</h1>
4+
5+
<p>Current count: @currentCount</p>
6+
7+
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
8+
9+
@code {
10+
private int currentCount = 0;
11+
12+
private void IncrementCount()
13+
{
14+
currentCount++;
15+
}
16+
}

‎Pages/FetchData.razor

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
@page "/fetchdata"
2+
@inject HttpClient Http
3+
4+
<h1>Weather forecast</h1>
5+
6+
<p>This component demonstrates fetching data from the server.</p>
7+
8+
@if (forecasts == null)
9+
{
10+
<p><em>Loading...</em></p>
11+
}
12+
else
13+
{
14+
<table class="table">
15+
<thead>
16+
<tr>
17+
<th>Date</th>
18+
<th>Temp. (C)</th>
19+
<th>Temp. (F)</th>
20+
<th>Summary</th>
21+
</tr>
22+
</thead>
23+
<tbody>
24+
@foreach (var forecast in forecasts)
25+
{
26+
<tr>
27+
<td>@forecast.Date.ToShortDateString()</td>
28+
<td>@forecast.TemperatureC</td>
29+
<td>@forecast.TemperatureF</td>
30+
<td>@forecast.Summary</td>
31+
</tr>
32+
}
33+
</tbody>
34+
</table>
35+
}
36+
37+
@code {
38+
private WeatherForecast[] forecasts;
39+
40+
protected override async Task OnInitializedAsync()
41+
{
42+
forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");
43+
}
44+
45+
public class WeatherForecast
46+
{
47+
public DateTime Date { get; set; }
48+
49+
public int TemperatureC { get; set; }
50+
51+
public string Summary { get; set; }
52+
53+
public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
54+
}
55+
}

‎Pages/Index.razor

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
@page "/"
2+
3+
<SfMaps>
4+
<MapsTitleSettings Text="Africa"></MapsTitleSettings>
5+
<MapsAnnotations>
6+
<MapsAnnotation X="70%" Y="5%">
7+
<ContentTemplate>
8+
<div>
9+
<img src="images/maps/directions.png" style="height: 75px; width: 75px;"/>
10+
</div>
11+
</ContentTemplate>
12+
</MapsAnnotation>
13+
<MapsAnnotation VerticalAlignment="AnnotationAlignment.Far" X="15%" Y="0%">
14+
<ContentTemplate>
15+
<div class="annotationTemplate">
16+
<div>
17+
<p style="margin-left:10px;font-size:13px;font-weight:500">
18+
Facts about Africa
19+
</p>
20+
</div>
21+
<hr style="margin-top:-3px;margin-bottom:10px;border:0.5px solid #DDDDDD" />
22+
<div>
23+
<ul style="list-style-type:disc; margin-left:-20px;margin-bottom:2px; font-weight:400">
24+
<li>Africa is the second largest and second most populated continent in the world.</li>
25+
<li style="padding-top:5px;">
26+
Africa has 54 sovereign states and 10 non-sovereign territories.
27+
</li>
28+
<li style="padding-top:5px;">
29+
Algeria is the largest country in Africa, where as Mayotte is the smallest.
30+
</li>
31+
</ul>
32+
</div>
33+
</div>
34+
</ContentTemplate>
35+
</MapsAnnotation>
36+
</MapsAnnotations>
37+
<MapsLayers>
38+
<MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/africa.json"}'
39+
TValue="string">
40+
<MapsShapeSettings Fill="url(#grad1)" />
41+
</MapsLayer>
42+
</MapsLayers>
43+
</SfMaps>
44+
45+
<svg height="30" width="400">
46+
<defs>
47+
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
48+
<stop offset="0%" style="stop-color:#C5494B;stop-opacity:1" />
49+
<stop offset="100%" style="stop-color:#4C134F;stop-opacity:1" />
50+
</linearGradient>
51+
</defs>
52+
</svg>
53+
54+
55+
56+
57+
58+
59+
60+
61+
62+
63+
64+
65+
66+
67+
68+
69+
<style>
70+
.annotationTemplate {
71+
color: #DDDDDD;
72+
box-shadow: 0px 2px 5px #666;
73+
-webkit-box-shadow: 0px 2px 5px #666;
74+
-moz-box-shadow: 0px 2px 5px #666;
75+
font-size: 12px;
76+
width: 300px;
77+
width: 300px;
78+
border-radius: 2px;
79+
-moz-border-radius: 2px;
80+
-webkit-border-radius: 2px;
81+
font-family: Roboto;
82+
background: #3E464C;
83+
margin: 20px;
84+
padding: 10px;
85+
}
86+
</style>
87+

‎Program.cs

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
2+
using Microsoft.Extensions.Configuration;
3+
using Microsoft.Extensions.DependencyInjection;
4+
using Microsoft.Extensions.Logging;
5+
using System;
6+
using System.Collections.Generic;
7+
using System.Net.Http;
8+
using System.Text;
9+
using System.Threading.Tasks;
10+
using Syncfusion.Blazor;
11+
12+
namespace Blazor_Samples
13+
{
14+
public class Program
15+
{
16+
public static async Task Main(string[] args)
17+
{
18+
Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("NTU3OTM5QDMxMzkyZTM0MmUzMEJhY3BPZTZkbDBXSTdENjYyY0p5QlBjKzliRVZ6TEF3V3FXNkRGOXA2OWc9");
19+
var builder = WebAssemblyHostBuilder.CreateDefault(args);
20+
builder.RootComponents.Add<App>("app");
21+
22+
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
23+
24+
builder.Services.AddSyncfusionBlazor();
25+
26+
await builder.Build().RunAsync();
27+
}
28+
}
29+
}

‎Properties/launchSettings.json

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"iisSettings": {
3+
"windowsAuthentication": false,
4+
"anonymousAuthentication": true,
5+
"iisExpress": {
6+
"applicationUrl": "http://localhost:13251",
7+
"sslPort": 44318
8+
}
9+
},
10+
"profiles": {
11+
"IIS Express": {
12+
"commandName": "IISExpress",
13+
"launchBrowser": true,
14+
"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
15+
"environmentVariables": {
16+
"ASPNETCORE_ENVIRONMENT": "Development"
17+
}
18+
},
19+
"Blazor Samples": {
20+
"commandName": "Project",
21+
"launchBrowser": true,
22+
"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
23+
"applicationUrl": "https://localhost:5001;http://localhost:5000",
24+
"environmentVariables": {
25+
"ASPNETCORE_ENVIRONMENT": "Development"
26+
}
27+
}
28+
}
29+
}

‎README.md

+13-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,14 @@
1-
# adding-annotations-to-blazor-maps
1+
# Adding Annotations to Blazor Maps
22
A quick start Blazor project that shows how to add annotations to a Syncfusion Blazor Maps in a Blazor WebAssembly app.
3+
4+
Examples: https://blazor.syncfusion.com/demos/maps/annotation?theme=bootstrap5
5+
6+
Documentation: https://blazor.syncfusion.com/documentation/maps/annotations
7+
8+
## Project pre-requisites
9+
Make sure that you have the compatible versions of Visual Studio 2019 or 2022 and .NET Core SDK latest version in your machine before starting to work on this project.
10+
11+
## How to run this application?
12+
To run this application, you need to first clone the adding-annotations-to-blazor-maps repository and then open it in Visual Studio 2019. Now, simply build and run your project to view the output.
13+
14+

‎Shared/MainLayout.razor

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@inherits LayoutComponentBase
2+
3+
<div class="sidebar">
4+
<NavMenu />
5+
</div>
6+
7+
<div class="main">
8+
<div class="top-row px-4">
9+
<a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
10+
</div>
11+
12+
<div class="content px-4">
13+
@Body
14+
</div>
15+
</div>

‎Shared/NavMenu.razor

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<div class="top-row pl-4 navbar navbar-dark">
2+
<a class="navbar-brand" href="">Blazor Samples</a>
3+
<button class="navbar-toggler" @onclick="ToggleNavMenu">
4+
<span class="navbar-toggler-icon"></span>
5+
</button>
6+
</div>
7+
8+
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
9+
<ul class="nav flex-column">
10+
<li class="nav-item px-3">
11+
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
12+
<span class="oi oi-home" aria-hidden="true"></span> Home
13+
</NavLink>
14+
</li>
15+
<li class="nav-item px-3">
16+
<NavLink class="nav-link" href="counter">
17+
<span class="oi oi-plus" aria-hidden="true"></span> Counter
18+
</NavLink>
19+
</li>
20+
<li class="nav-item px-3">
21+
<NavLink class="nav-link" href="fetchdata">
22+
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
23+
</NavLink>
24+
</li>
25+
</ul>
26+
</div>
27+
28+
@code {
29+
private bool collapseNavMenu = true;
30+
31+
private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
32+
33+
private void ToggleNavMenu()
34+
{
35+
collapseNavMenu = !collapseNavMenu;
36+
}
37+
}

‎Shared/SurveyPrompt.razor

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<div class="alert alert-secondary mt-4" role="alert">
2+
<span class="oi oi-pencil mr-2" aria-hidden="true"></span>
3+
<strong>@Title</strong>
4+
5+
<span class="text-nowrap">
6+
Please take our
7+
<a target="_blank" class="font-weight-bold" href="https://go.microsoft.com/fwlink/?linkid=2127996">brief survey</a>
8+
</span>
9+
and tell us what you think.
10+
</div>
11+
12+
@code {
13+
// Demonstrates how a parent component can supply parameters
14+
[Parameter]
15+
public string Title { get; set; }
16+
}

‎_Imports.razor

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
@using System.Net.Http
2+
@using System.Net.Http.Json
3+
@using Microsoft.AspNetCore.Components.Forms
4+
@using Microsoft.AspNetCore.Components.Routing
5+
@using Microsoft.AspNetCore.Components.Web
6+
@using Microsoft.AspNetCore.Components.WebAssembly.Http
7+
@using Microsoft.JSInterop
8+
@using Blazor_Samples
9+
@using Blazor_Samples.Shared
10+
@using Syncfusion.Blazor.Maps

0 commit comments

Comments
 (0)