React vinculando archivos CSV con ubicaciones geográficas
Con el componente de mapa Ignite UI for React, puede trazar datos geográficos cargados desde varios tipos de archivos. Por ejemplo, puede cargar ubicaciones geográficas desde un archivo de valores separados por comas (CSV).
React Binding CSV Files with Geographic Locations Example
Data Example
Aquí hay un ejemplo de datos del archivo 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
Code Snippet
El siguiente código carga y vincula IgrGeographicHighDensityScatterSeries
en el componente de mapa a una matriz de objetos creados a partir de un archivo CSV cargado con ubicaciones geográficas.
import { IgrGeographicHighDensityScatterSeries } from 'igniteui-react-maps';
// ...
public componentDidMount() {
// fetching CSV data with geographic locations from public folder
fetch(url + "/Data/UsaCities.csv")
.then((response) => response.text())
.then(data => this.onDataLoaded(data));
}
public 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(",");
// using CSV columns: City,Lat,Lon,State,Code,County,Density,Population
const location = {
name: columns[0],
latitude: Number(columns[1]),
longitude: Number(columns[2]),
state: columns[3],
code: columns[4],
county: columns[5],
density: Number(columns[6]),
population: Number(columns[7])
};
geoLocations.push(location);
}
// creating HD series with loaded data
const geoSeries = new IgrGeographicHighDensityScatterSeries( { 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);
}