Angular Map Overview

    The Ignite UI for Angular map component allows you to display data that contains geographic locations from view models or geo-spatial data loaded from shape files on geographic imagery maps.

    Angular Map Example

    The following sample demonstrates how display data in IgxGeographicMapComponent using IgxGeographicProportionalSymbolSeriesComponent also known as Bubble Series.

    The map component allows you to render geographic imagery from Bing Maps™, and Open Street Maps. The map provides plotting of tens of thousands of data points, and updates them every few milliseconds so that the control can handle your real-time feeds.

    The map's Series property is used to support rendering an unlimited number of geographic series. This property is a collection of geographic series objects and any type of geographic series can be added to it. For example, IgxGeographicSymbolSeriesComponent can be added for plotting geographic locations such as cities and the IgxGeographicPolylineSeriesComponent for plotting connections (e.g. roads) between these geographic locations.

    The map provides customizable navigation behaviors for navigating map content using mouse, keyboard, or code-behind.

    Dependencies

    The Angular geographic map component, you need to first install these packages:

    npm install --save igniteui-angular-core
npm install --save igniteui-angular-charts
npm install --save igniteui-angular-maps

    Component Modules

    The IgxGeographicMapComponent requires the following modules, however the DataChartInteractivityModule is only required for mouse interactions, such as panning and zooming the map content.

    // app.module.ts
import { IgxGeographicMapModule } from 'igniteui-angular-maps';
import { IgxDataChartInteractivityModule } from 'igniteui-angular-charts';

@NgModule({
    imports: [
        // ...
        IgxGeographicMapModule,
		IgxDataChartInteractivityModule
        // ...
    ]
})
export class AppModule {}

    import { AfterViewInit, Component, ViewChild } from "@angular/core";
import { IgxGeographicMapComponent } from 'igniteui-angular-maps';

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

export class MapOverviewComponent implements AfterViewInit {

    @ViewChild ("map")
    public map: IgxGeographicMapComponent;
    constructor() {
    }

    public ngAfterViewInit(): void {
        this.map.windowRect = { left: 0.2, top: 0.1, width: 0.7, height: 0.7 };
    }
}

    Usage

    Now that the map module is imported, next step is to create geographic map. The following code demonstrates how to do this and enable zooming in the map.

    <div className="sampleRoot" >
    <igx-geographic-map #map
        width="700px"
        height="500px"
        zoomable="true" >
    </igx-geographic-map>
</div>

    Additional Resources

    You can find more information about related Angular map features in these topics:

    API References

    The following is a list of API members mentioned in the above sections: