@using System.Text.Json

@inject IJSRuntime js

<PageTitle>Index</PageTitle>

<TelerikMap Center="@Center"
            OnPanEnd="@OnPanEnd"
            OnZoomEnd="@OnZoomEnd"
            Zoom="3">
    <MapLayers>
        <MapLayer Type="@MapLayersType.Tile"
                  Attribution="@Attribution"
                  Subdomains="@Subdomains"
                  UrlTemplate="@UrlTemplate">
        </MapLayer>
    </MapLayers>
</TelerikMap>

<h3>Map Extent</h3>
<pre>@MapExtent</pre>

<script suppress-error="BL9992">
    function zoomMap() {
        document.querySelector(".k-map .k-zoom-in").click();
    }
</script>

@code {
    private string[] Subdomains { get; set; } = new string[] { "a", "b", "c" };
    private string UrlTemplate { get; set; } = "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png";
    private string Attribution { get; set; } = "&copy; <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>";
    private double[] Center { get; set; } = new double[] { 30.268107, -97.744821 };

    private string MapExtent { get; set; }

    private void OnPanEnd(MapPanEndEventArgs args)
    {
        var center = args.Center;
        var extent = args.Extent;

        MapExtent = JsonSerializer.Serialize(extent, new JsonSerializerOptions() { WriteIndented = true });
    }

    private void OnZoomEnd(MapZoomEndEventArgs args)
    {
        var center = args.Center;
        var extent = args.Extent;

        MapExtent = JsonSerializer.Serialize(extent, new JsonSerializerOptions() { WriteIndented = true });
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await Task.Delay(1); // ensure the HTML is rendered in the browser
            await js.InvokeVoidAsync("zoomMap");
        }

        await base.OnAfterRenderAsync(firstRender);
    }
}