Web Components CSV ファイルを地理的な場所にバインド
Ignite UI for Web Components Map コンポーネントを使用すると、さまざまな種類のファイルからロードされた地理データをプロットできます。たとえば、カンマ区切り値 (CSV) ファイルから地理的な場所を読み込むことができます。
Web Components CSV ファイルを地理的な場所にバインドの例
データ例
CSV ファイルからのデータの例:
City,Lat,Lon,State,Code,County,Density,Population
New York,40.7856,-74.0093,New Jersey,NJ,Hudson,21057,54227
Dundee,42.5236,-76.9775,New York,NY,Yates,579,1650
コード スニペット
以下のコードは、マップコンポーネント内の IgcGeographicHighDensityScatterSeriesComponent を、ロードされた CSV ファイルから作成された地理的位置を含むオブジェクトの配列にバインドします。
<igc-geographic-map id="geoMap" width="100%" height="100%">
</igc-geographic-map>
connectedCallback() {
this.geoMap = document.getElementById("geoMap") as IgcGeographicMapComponent;
const url = "/data/UsaCitiesPopulation.csv";
fetch(url)
.then((response) => response.text())
.then(data => this.onDataLoaded(data));
}
onDataLoaded(csvData: string) {
const csvLines = csvData.split("\n");
// parsing CSV data and creating geographic locations
const geoLocations: any[] = [];
for (let i = 1; i < csvLines.length; i++) {
const columns = csvLines[i].split(",");
const location = {
latitude: Number(columns[1]),
longitude: Number(columns[2]),
name: columns[0],
population: Number(columns[3])
};
geoLocations.push(location);
}
// creating HD series with loaded data
const geoSeries = new IgcGeographicHighDensityScatterSeriesComponent();
geoSeries.name = "hdSeries";
geoSeries.dataSource = geoLocations;
geoSeries.latitudeMemberPath = "latitude";
geoSeries.longitudeMemberPath = "longitude";
geoSeries.heatMaximumColor = "Red";
geoSeries.heatMinimumColor = "Black";
geoSeries.heatMinimum = 0;
geoSeries.heatMaximum = 5;
geoSeries.pointExtent = 1;
geoSeries.mouseOverEnabled = true;
// adding symbol series to the geographic amp
this.geoMap.series.add(geoSeries);
// zooming to bound of lower 48-states
const geoBounds = {
left: -130,
top: 15,
width: Math.abs(-130 + 65),
height: Math.abs(50 - 15)
};
this.geoMap.zoomToGeographic(geoBounds);
}