feat(map-ol): allow to pass olViewOptions to create map

Author: boeckMt

CHANGELOG.md

@@ -7,6 +7,7 @@
 * **@dlr-eoc/map-ol:**
  - Use `projjson` or `proj4js` to create projection if defined on `IProjDef`.
  - Use all `IListMatrixSet` options in `getTileGrid` to create `WMTSTileGrid`.
+ - Allow to pass `olViewOptions` to map-ol component.
 
 * **@dlr-eoc/services-layers:**
  - More options to create `WMTSTileGrid` on `IListMatrixSet`. The new optional options are `extent?: TGeoExtent`, `origin?: number[]`, `origins?: [number, number][]`, `tileSizes?: number[]` and `sizes?: [number, number][];`.

projects/map-ol/src/lib/map-ol.component.ts

@@ -40,6 +40,7 @@ import olVectorLayer from 'ol/layer/Vector';
 import { applyStyle } from 'ol-mapbox-style';
 import { collectionItemSetIndex, layerOrGroupSetOpacity, layerOrGroupSetVisible, layerOrGroupSetZIndex } from '@dlr-eoc/utils-maps';
 import { defaults as defaultInteractions } from 'ol/interaction/defaults';
+import { ViewOptions as olViewOptions } from 'ol/View';
 
 import VectorSource from 'ol/source/Vector';
 
@@ -79,6 +80,7 @@ export class MapOlComponent implements OnInit, AfterViewInit, AfterViewChecked,
   @Input('layersSvc') layersSvc: LayersService;
   @Input('mapState') mapStateSvc: MapStateService;
   @Input('controls') controls: IMapControls;
+  @Input('viewOptions') viewOptions: olViewOptions;
 
   map: Map;
   subs: Subscription[] = [];
@@ -96,7 +98,7 @@ export class MapOlComponent implements OnInit, AfterViewInit, AfterViewChecked,
   ngOnInit() {
     /** Subscribe to mapStateSvc before map is created */
     this.subscribeToMapState();
-    this.initMap();
+    this.initMap(this.viewOptions);
     /** subscribe to layers oninit so they get pulled after view init */
     this.subscribeToLayers();
     // TODO: refactor to signals
@@ -585,8 +587,8 @@ export class MapOlComponent implements OnInit, AfterViewInit, AfterViewChecked,
   }
 
 
-  private initMap() {
-    const olMapView = this.mapSvc.createMap();
+  private initMap(viewOptions?: olViewOptions) {
+    const olMapView = this.mapSvc.createMap(undefined, viewOptions);
     this.map = olMapView.map; //
     const oldInteractions = this.map.getInteractions();
     const interactions = defaultInteractions();

projects/map-ol/src/lib/map-ol.service.ts

@@ -154,7 +154,7 @@ export class MapOlService {
    * if this is used in an angular component then set the target after the view is created
    * e.g. this.map.setTarget(this.mapDivView.nativeElement) in ngAfterViewInit()
    */
-  public createMap(target?: HTMLElement) {
+  public createMap(target?: HTMLElement, options?: olViewOptions) {
     const zoom = 0;
     const center = {
       lat: 0,
@@ -256,6 +256,10 @@ export class MapOlService {
     if (this.view['zoomFactor']) {
       this.viewOptions.zoomFactor = this.view['zoomFactor'];
     }
+
+    if (options) {
+      this.viewOptions = Object.assign(this.viewOptions, options);
+    }
     const tempview = new olView(this.viewOptions);
 
     /** define map in constructor so it is created before to use it in projects onInit Method  */