Mapa de símbolos geográficos Angular

    En el componente de mapa Angular, puede usar IgxGeographicSymbolSeriesComponent para mostrar datos geoespaciales usando puntos o marcadores en un contexto geográfico. Este tipo de serie geográfica se utiliza a menudo para representar una colección de ubicaciones geográficas como ciudades, aeropuertos, terremotos o puntos de interés.

    Angular Geographic Symbol Map Example

    Data Requirements

    De manera similar a otros tipos de series geográficas en el componente de mapa, IgxGeographicSymbolSeriesComponent tiene la propiedad ItemsSource que se puede vincular a una matriz de objetos. Además, cada elemento de datos de este objeto debe tener dos columnas de datos numéricos que almacenen una ubicación geográfica (longitud y latitud). Luego, estas columnas de datos se asignan a las propiedades latitudeMemberPath y longitudeMemberPath. IgxGeographicSymbolSeriesComponent utiliza valores de estas columnas de datos mapeados para trazar elementos de símbolo en el componente de mapa geográfico.

    Code Snippet

    El siguiente código muestra cómo vincular IgxGeographicSymbolSeriesComponent a ubicaciones de ciudades cargadas desde un archivo de forma usando IgxShapeDataSource.

    <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>
            <div *ngIf="item.org;then hasOrg; else notOrg" ></div>
            <span [style.color]="series.brush">
                {{item.name}}
            </span>
            <br/>
            <span>
                Population {{item.pop}} M
            </span>
        </div>
        <ng-template #hasOrg>
            <span>
                Population {{item.pop}} M
            </span>
            <br />
        </ng-template>
         <ng-template #notOrg>
            <span>
            </span>
         </ng-template>
</ng-template>

    import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
import { MarkerType } from 'igniteui-angular-charts';
import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
import { IgxGeographicSymbolSeriesComponent } from "igniteui-angular-maps";
import { WorldLocations } from "../../utilities/WorldLocations";

@Component({
  selector: "app-map-geographic-scatter-symbol-series",
  styleUrls: ["./map-geographic-scatter-symbol-series.component.scss"],
  templateUrl: "./map-geographic-scatter-symbol-series.component.html"
})

export class MapTypeScatterSymbolSeriesComponent implements AfterViewInit {

    @ViewChild ("map")
    public map: IgxGeographicMapComponent;
    @ViewChild("template")
    public tooltip: TemplateRef<object>;

    constructor() {
    }

    public ngAfterViewInit(): void {
      this.addSeriesWith(WorldLocations.getCities(), "Gray");
      this.addSeriesWith(WorldLocations.getCapitals(), "rgb(32, 146, 252)");
    }

    public addSeriesWith(locations: any[], brush: string) {
        const symbolSeries = new IgxGeographicSymbolSeriesComponent ();
        symbolSeries.dataSource = locations;
        symbolSeries.markerType = MarkerType.Circle;
        symbolSeries.latitudeMemberPath = "lat";
        symbolSeries.longitudeMemberPath = "lon";
        symbolSeries.markerBrush  = "White";
        symbolSeries.markerOutline = brush;
        symbolSeries.tooltipTemplate = this.tooltip;
        this.map.series.add(symbolSeries);
    }
}

    API References