BlazorLeaflet
BlazorLeaflet copied to clipboard
Full screen page mode not working
I am trying to create a simple web map using Blazor and OSM. A single page that will have 100% covered with OSM map. When width and height values are fixes to certain values all work well. However, when I try to set width and height attributes to 100% page is completely blank.
MainLayout.razor
@inherits LayoutComponentBase
@Body
Index.razor
@page "/"
@using System.Drawing
@using BlazorLeaflet
@using BlazorLeaflet.Models
@using BlazorWebMap.Data
@inject IJSRuntime jsRuntime
<div id="map">
<LeafletMap Map="_map" />
</div>
<style>
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
width: 100%;
}
</style>
@code
{
private Map _map;
protected override void OnInitialized()
{
_map = new Map(jsRuntime)
{
Center = _startAt,
Zoom = 12.2f
};
_map.OnInitialized += () =>
{
_map.AddLayer(new TileLayer
{
UrlTemplate = "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
Attribution = "© <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
});
};
}
private LatLng _startAt = new LatLng(53.13344f, 23.15026f);
}
I know that is possible to do it by using only HTML but I would like to do it in Blazor using your package.