Mapa de símbolos geográficos Blazor

    En el componente de mapa Blazor, puede usar IgbGeographicSymbolSeries 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.

    Blazor Geographic Symbol Map Example

    Data Requirements

    De manera similar a otros tipos de series geográficas en el componente de mapa, IgbGeographicSymbolSeries tiene la propiedad DataSource 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. IgbGeographicSymbolSeries 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 IgbGeographicSymbolSeries a ubicaciones de ciudades cargadas desde un archivo de forma utilizando IgbShapeDataSource.

    @using IgniteUI.Blazor.Controls
    
    
    <IgbGeographicMap Height="100%" Width="100%" Zoomable="true">
        <IgbGeographicSymbolSeries DataSource="Cities"
            MarkerType="MarkerType.Circle"
            LatitudeMemberPath="Lat"
            LongitudeMemberPath="Lon"
            MarkerBrush="White"
            MarkerOutline="Gray" />
        <IgbGeographicSymbolSeries DataSource="Capitals"
            MarkerType="MarkerType.Circle"
            LatitudeMemberPath="Lat"
            LongitudeMemberPath="Lon"
            MarkerBrush="White"
            MarkerOutline="rgb(32, 146, 252)" />
    </IgbGeographicMap>
    
    @code {
    
        private List<WorldCity> Cities;
        private List<WorldCity> Capitals;
    
        protected override void OnInitialized()
        {
            this.Cities = WorldLocations.GetCities();
            this.Capitals = WorldLocations.GetCapitals();
        }
    }
    

    API References