Archivos CSV de enlace Angular con ubicaciones geográficas

    Con el componente de mapa Ignite UI for Angular, 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).

    Angular 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 IgxGeographicHighDensityScatterSeriesComponent en el componente de mapa a una matriz de objetos creados a partir de un archivo CSV cargado con ubicaciones geográficas.

    <div className="sampleRoot" >
    <igx-geographic-map #map
        width="700px"
        height="500px"
        zoomable="true" >
    </igx-geographic-map>
    </div>
    
    <ng-template let-series="series" let-item="item" #template>
        <div>
            <span>
                County: {{item.county}}
            </span>
        <br/>
            <span>
                Population: {{item.density}} K
            </span>
        </div>
    </ng-template>
    
    import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
    import { IgxGeographicHighDensityScatterSeriesComponent } from "igniteui-angular-maps";
    import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
    
    @Component({
      selector: "app-map-binding-geographic-csv_files",
      styleUrls: ["./map-binding-geographic-csv_files.component.scss"],
      templateUrl: "./map-binding-geographic-csv_files.component.html"
    })
    
    export class MapBindingDataCsvComponent implements AfterViewInit {
    
        @ViewChild ("map")
        public map: IgxGeographicMapComponent;
        @ViewChild("template")
        public tooltip: TemplateRef<object>;
        constructor() {
        }
    
        public ngAfterViewInit(): void {
            this.componentDidMount();
        }
    
        public componentDidMount() {
            // fetching JSON data with geographic locations from public folder
            fetch("assets/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(",");
                const location = {
                    code: columns[4],
                    county: columns[5],
                    density: Number(columns[6]),
                    latitude:  Number(columns[1]),
                    longitude: Number(columns[2]),
                    name:  columns[0],
                    population: Number(columns[7]),
                    state: columns[3]
                };
                geoLocations.push(location);
            }
    
            // creating HD series with loaded data
            const geoSeries = new IgxGeographicHighDensityScatterSeriesComponent();
            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.tooltipTemplate = this.tooltip;
            geoSeries.mouseOverEnabled = true;
    
            // adding symbol series to the geographic amp
            this.map.series.add(geoSeries);
        }
    }
    

    API References