지리적 위치를 사용하여 Blazor 바인딩 JSON 파일

    Ignite UI for Blazor 사용하면 다양한 파일 형식에서 로드된 지리 데이터를 그릴 수 있습니다. 예를 들어 JSON(JavaScript Object Notation) 파일에서 지리적 위치를 로드할 수 있습니다.

    Blazor Binding JSON Files with Geographic Locations Example

    Data Example

    다음은 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 },
     // ...
    ]
    

    Code Snippet

    다음 코드는 지도 구성 요소의 IgbGeographicHighDensityScatterSeries 지리적 위치가 포함된 로드된 JSON 파일에서 생성된 객체 배열에 로드하고 바인딩합니다.

    @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; }
        }
    }
    

    API References