BlazorLeaflet icon indicating copy to clipboard operation
BlazorLeaflet copied to clipboard

Full screen page mode not working

Open losbaltica opened this issue 4 years ago • 0 comments

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 = "&copy; <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.

losbaltica avatar Oct 09 '20 15:10 losbaltica