Skip to content

Commit c6a93af

Browse files
subaa1492subaa1492
authored
Added Maps Annotations Sample
1 parent 622490c commit c6a93af

35 files changed

+1328
-0
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+
}

‎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)