Blazor muestra imágenes de mapas de Open Street

Blazor IgbOpenStreetMapImagery es un servicio gratuito de mapeo de imágenes geográficas creado en colaboración por colaboradores de OpenStreetMap© de todo el mundo. Proporciona mosaicos de imágenes geográficas del mundo únicamente en estilo de mapa de carreteras sin opciones de configuración. Se puede acceder a este servicio de imágenes geográficas directamente en el sitio web www.OpenStreetMap.org. De manera predeterminada, el componente de mapa Ignite UI for Blazor ya muestra imágenes geográficas de Open Street Maps. Por lo tanto, no es necesario configurar el control para que muestre imágenes geográficas de Open Street Maps.

Blazor Displaying Imagery from Open Street Maps Example

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbGeographicMapModule),
                typeof(IgbDataChartInteractivityModule)
            );
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical">

    <div class="container vertical">
        <IgbGeographicMap Height="100%" Width="100%" Zoomable="true" BackgroundContent="@OSMImagery"/>
    </div>
</div>

@code {

    private IgbOpenStreetMapImagery OSMImagery;
    private IgbGeographicMap MapRef { get; set; }

    protected override void OnInitialized()
    {

        this.OSMImagery = new IgbOpenStreetMapImagery();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && this.MapRef != null)
        {
            Rect zoomRect = new Rect() { Left = -150, Top = -60, Width = 315, Height = 140 };
            await this.MapRef.EnsureReady();
            await this.MapRef.UpdateWorldRectAsync(zoomRect);
        }
    }
}razor

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css

Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

Code Snippet

Este ejemplo de código establece explícitamente BackgroundContent del componente de mapa en el objeto IgbOpenStreetMapImagery que proporciona imágenes geográficas de los contribuyentes de OpenStreetMap©.

<IgbGeographicMap Height="100%" Width="100%" Zoomable="true"
    BackgroundContent="OSMImagery" />

@code {

    public IgbOpenStreetMapImagery OSMImagery;

    protected override void OnInitialized()
    {
        this.OSMImagery = new IgbOpenStreetMapImagery();
    }
}
razor

Blazor muestra imágenes de mapas de Open Street

Blazor Displaying Imagery from Open Street Maps Example

Code Snippet

API References