Angular Binding Geographic Data Models

    The Ignite UI for Angular map component is designed to display geo-spatial data from shape files and/or geographic locations from data models on geographic imagery maps. The ItemsSource property of geographic series is used for the purpose of binding to data models. This property can be bound an array of custom objects.

    Demo

    The following table summarized data structures required for each type of geographic series:

    Geographic Series Properties Description
    IgxGeographicSymbolSeriesComponent longitudeMemberPath, latitudeMemberPath Specifies names of 2 numeric longitude and latitude coordinates
    IgxGeographicHighDensityScatterSeriesComponent longitudeMemberPath, latitudeMemberPath Specifies names of 2 numeric longitude and latitude coordinates
    IgxGeographicProportionalSymbolSeriesComponent longitudeMemberPath, latitudeMemberPath, radiusMemberPath Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for size/radius of symbols
    IgxGeographicScatterAreaSeriesComponent LongitudeMemberPath, LatitudeMemberPath, colorMemberPath Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for triangulation of values
    IgxGeographicContourLineSeriesComponent LongitudeMemberPath, LatitudeMemberPath, valueMemberPath Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for triangulation of values
    IgxGeographicShapeSeriesComponent shapeMemberPath Specifies the name of data column of ItemsSource items that contains the geographic points of shapes. This property must be mapped to an array of arrays of objects with x and y properties.
    IgxGeographicPolylineSeriesComponent shapeMemberPath Specifies the name of data column of ItemsSource items that contains the geographic coordinates of lines. This property must be mapped to an array of arrays of objects with x and y properties.

    Code Snippet

    The following code shows how to bind the IgxGeographicSymbolSeriesComponent to a custom data model that contains geographic locations of some cities of the world stored using longitude and latitude coordinates. Also, we use the IgxGeographicPolylineSeriesComponent to plot shortest geographic path between these locations using the WorldUtility