Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Full screen page mode not working #49

Open
losbaltica opened this issue Oct 9, 2020 · 0 comments
Open

Full screen page mode not working #49

losbaltica opened this issue Oct 9, 2020 · 0 comments

Comments

@losbaltica
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant