How to import and use control.defaults in Angular?

Question

I'm very new in Openlayers and I'm trying to create my first map component. I'm trying to set the map controls but without success. The code throws an error when try to import the 'ol/control'. I saw a lot exemplo using defaultControls, but not in Angular.

Could anyone helpe-me, please?

My code:

import { Component, OnInit } from '@angular/core';

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

import Zoom from 'ol/control/Zoom';
import ZoomSlider from 'ol/control/ZoomSlider';
import FullScreen from 'ol/control/FullScreen';
import ScaleLine from 'ol/control/ScaleLine';
import Attribution from 'ol/control/Attribution';
import {default as defaultControls} from 'ol/control';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {

  public map;
  constructor() { }

  ngOnInit() {
    this.initMap();
  }

  private initMap(){
    this.map = new Map({
      target: 'map',
      controls: defaultControls.defaults({attribution: false}),
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        center: [-4485855.10165787, -2310027.3183776503],
        zoom: 15,
        minZoom: 3,
        maxZoom: 19
      })
    });

    //this.map.addControl(new FullScreen());
    //this.map.addControl(new ScaleLine());
  }

}

Error mensage:

AppComponent.html:2 ERROR TypeError: Cannot read property 'defaults' of undefined

The import should be `defaults` (plural), it is a method so no further method is needed in the call: `import {defaults as defaultControls} from 'ol/control';` `controls: defaultControls({attribution: false}),` — Mike, Feb 14 '19 at 18:51
Also you don't need to import `Zoom` and `Attribution`, they are included in `defaultControls` — Mike, Feb 14 '19 at 19:16

score 1 · Answer 1 · answered Feb 18 '19 at 13:02

Now it is working fine... thanks guys.

import { Component, OnInit } from '@angular/core';

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import {defaults as defaultControls, ScaleLine, FullScreen} from 'ol/control.js';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {

  public map;
  constructor() { }

  ngOnInit() {
    this.initMap();
  }

  private initMap(){
    this.map = new Map({
      target: 'map',
      controls: defaultControls({attribution: false, zoom: true,}).extend([
        new ScaleLine(),
        new FullScreen()
      ]),
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        center: [-4485855.10165787, -2310027.3183776503],
        zoom: 15,
        minZoom: 3,
        maxZoom: 19
      })
    });
  }
}

How to import and use control.defaults in Angular?

1 Answers1