https://github.com/W-Maxo/OpenStreetMapForBlazor мне понравился этот репозиторий и я решил использовать этот компонент OpenStreetMap в своем проекте. Сам проект из репозитория я перевел на net8.0 и все работает. Как только начал добавлять зависимости в свой проект ничего не работает, хотя запускается без ошибок.
Я добавил все зависимости, классы, css и js. Они подгружаются, но как я заметил не все. OSMap.js не работает и не загружает остальные js и css файлы.
@page "/"
@inject IConfiguration config;
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<div style="height: 500px;">
<OSMap Click="@MapClickEvent" CenterMap="@defPosition" />
</div>
@code {
public MapPosition position;
public bool btnActive;
MapPosition? defPosition;
protected override async Task OnInitializedAsync()
{
defPosition = new MapPosition() { Lat = config.GetValue<double>("Main:DefLat"), Lng = config.GetValue<double>("Main:DefLng") };
}
public void MapClickEvent(MapClickEventArgs args)
{
//events.Add(DateTime.Now, $"Map clicked at Lat: {args.Position.Lat}, Lng: {args.Position.Lng}");
if (args != null) position = args.Position;
//btnActive = !(position.Lng == defPosition.Lng && position.Lat == defPosition.Lat);
//actualJson = JsonConvert.SerializeObject(args);
//StateHasChanged();
}
}
вот Prorgam.cs моего проекта
// Add services to the container.
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents();
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Error", createScopeForErrors: true);
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseRouting();
app.UseStaticFiles();
app.UseAntiforgery();
app.MapRazorComponents<App>()
.AddInteractiveServerRenderMode();
app.Run();
и Program.cs проекта из репозитория:
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using OpenStreetMapForBlazor.Data;
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Error");
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.MapBlazorHub();
app.MapFallbackToPage("/_Host");
app.Run();
Еще прошу заметить что проект из репозитория использует разметку cshtml и razor так как это темплейт из net7.0. А в моем проекте только razor.
вот _Layout.cshtml
@using Microsoft.AspNetCore.Components.Web
@namespace OpenStreetMapForBlazor.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
<link href="OpenStreetMapForBlazor.styles.css" rel="stylesheet" />
<component type="typeof(HeadOutlet)" render-mode="Server" />
</head>
<body>
@RenderBody()
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.server.js"></script>
<script src="js/OSMap.js"></script>
</body>
</html>
и App.razor моего проекта\
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<base href="/"/>
<link rel="stylesheet" href="bootstrap/bootstrap.min.css"/>
<link rel="stylesheet" href="app.css"/>
<link rel="stylesheet" href="BlazorApp1.styles.css"/>
<link rel="icon" type="image/png" href="favicon.png"/>
<HeadOutlet/>
</head>
<body>
<Routes/>
<script src="js/OSMap.js"></script>
<script src="_framework/blazor.web.js"></script>
</body>
</html>
вот код домашней страницы и все конфигурации работают, но по прежденему не высвечивается OSMap component