Imagery Lets Go Deeper

Imagery Module

Let's give a look on the imagery module we import inside our app.module

ImageryModule.provide({
      maps: [OpenLayersMap],
      mapSourceProviders: [OpenLayerOSMSourceProvider],
      plugins: [AnnotationsVisualizer]
    })

Now we can use the ansyn-imagery-view tag, to show a map in our web app. This module include 3 metadata:

Maps

define the Map container our web app will use.
@ansyn/ol give us an Imagery map based on Open Layers maps.
see the tutorial on how to create your own map.

MapSourceProviders

define the map source for display the world map @ansyn/ol provide us number of sources:

1. BING
2. OSM
3. ESRI_4326
4. TileWMS

Plugins

Define the plugins we can use with our map.
@ansyn/ol provide us an AnnotationsVisualizer plugin for draw annotations on the map.
click here to learn how to create a new plugins.

Providers

The Imagery module has number of config that must be define we pass them in our root module.
let's look inside our app.module.ts we see something like this:

providers: [
    {
      provide: MAP_PROVIDERS_CONFIG,
      useValue: {
        openLayersMap: {
          defaultMapSource: 'OSM'
        }
      }
    },
    {
      provide: MAP_SOURCE_PROVIDERS_CONFIG,
      useValue: {
        OSM: {}
      }
    }
  ]

MAP_PROVIDERS_CONFIG

Tell our app in which map we use in what our default source provider it must be according to what we provide to our imagery module.

MAP_SORUCE_PROVIDERS_CONFIG

Pass necessaries config for our source provider see list of ol source provider and their config