Imagery Package

The @ansyn/Imagery Package give you the ability to create a map component in just a few step

Install

npm i @ansyn/imagery @ansyn/ol @angular/material @angular/cdk @types/geojson

This will install the imagery package and all of her peer dependencies packages.

Use

• declare it on app.module.ts

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {ImageryModule, MAP_PROVIDERS_CONFIG, MAP_SOURCE_PROVIDERS_CONFIG} from '@ansyn/imagery';
import {OL_CONFIG, OpenLayerOSMSourceProvider, OpenLayersMap} from '@ansyn/ol';

import {AppComponent} from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ImageryModule.provide({
      maps: [OpenLayersMap],
      mapSourceProviders: [OpenLayerOSMSourceProvider],
      plugins: []
    })
  ],
  providers: [
    {
      provide: OL_CONFIG,
      useValue: {}
    },
    {
      provide: MAP_PROVIDERS_CONFIG,
      useValue: {
        openLayersMap: {
          defaultMapSource: 'OSM'
        }
      }
    },
    {
      provide: MAP_SOURCE_PROVIDERS_CONFIG,
      useValue: {
        OSM: {
        }
      }
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

• define your map settings in app.component.ts

import { Component } from '@angular/core';
import {IMapSettings} from '@ansyn/imagery';
import {OpenlayersMapName} from '@ansyn/ol';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent {
  public settings: IMapSettings = {
    id: 'id',
    worldView: {
      mapType: OpenlayersMapName,
      sourceType: 'OSM'
    },
    flags: {},
    data: {
      position: {
        extentPolygon: {
          type: 'Polygon',
          coordinates: [
            [
              [ -180, 90 ],
              [180, 90 ],
              [ 180, -90 ],
              [ -180, -90 ],
              [ -180, 90]
            ]
          ]
        }
      }
    }
  };
}

Although is more recommended to import your map settings from a another file

• call it on your app.component.html

<div class="app">
  <div class="imagery">
    <div>
      <ansyn-imagery-view [settings]="settings"></ansyn-imagery-view>
    </div>
  </div>
</div>

• style it on app.component.less

div.app {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  height: 95vh;
}
.imagery {
  display: flex;
  flex: 1;
  box-sizing: border-box;
  padding: 50px 0;
  div {
    position: relative;
    flex: 1;
    text-align: center;
  }
}

how all of this happended? Let's Go Deeper