Vinculación de archivos JSON con ubicaciones geográficas Blazor

    Con la Ignite UI for Blazor, puede representar gráficamente datos geográficos cargados desde varios tipos de archivos. Por ejemplo, puede cargar ubicaciones geográficas desde un archivo de notación de objetos JavaScript (JSON).

    Blazor Ejemplo de enlace de archivos JSON con ubicaciones geográficas

    EXAMPLE
    MODULES
    RAZOR
    CSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Blazor completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Ejemplo de datos

    Aquí hay un ejemplo de datos del archivo JSON:

    [
       { "name": "Sydney Island", "lat": -16.68972, "lon": 139.45917 },
       { "name": "Sydney Creek",  "lat": -16.3,     "lon": 128.95 },
       { "name": "Mount Sydney",  "lat": -21.39864, "lon": 121.193 },
     // ...
    ]
    json

    Fragmento de código

    El siguiente código carga y vincula IgbGeographicHighDensityScatterSeries en el componente de mapa a una matriz de objetos creados a partir de un archivo JSON cargado con ubicaciones geográficas:

    @using System.Net.Http.Json
    @using IgniteUI.Blazor.Controls
    
    @inject HttpClient Http
    
    <IgbGeographicMap Height="100%" Width="100%" Zoomable="true">
        <IgbGeographicSymbolSeries DataSource="DataSource"
            MarkerType="MarkerType.Circle"
            LatitudeMemberPath="Lat"
            LongitudeMemberPath="Lon"
            MarkerBrush="LightGray"
            MarkerOutline="Black" />
    </IgbGeographicMap>
    
    @code {
    
        private WorldPlaceJson[] DataSource;
    
        protected override async Task OnInitializedAsync()
        {
            var url = "https://static.infragistics.com/xplatform/data/WorldCities.json";
            var http = new HttpClient();
            this.DataSource = await http.GetFromJsonAsync<WorldPlaceJson[]>(url);
    
            await Task.Delay(1);
        }
    
        public class WorldPlaceJson {
    
            public string Name { get; set; }
            public double Lat { get; set; }
            public double Lon { get; set; }
            public double Pop { get; set; }
            public string Country { get; set; }
            public bool Cap { get; set; }
        }
    }
    razor

    Referencias de API