How to use the ol/layer/Tile.js function in ol

* @return {boolean} `false` to stop the drag sequence.
 */
function handleUpEvent() {
  this.coordinate_ = null;
  this.feature_ = null;
  return false;
}


const lat = 50;
const lng = -70;
const zoom = 5;
//var extent = [-83, 44, -57, 55];
// const extent = [-9259955, 5467881, -6324773, 7424669];

const osmLayer = new TileLayer({
  source: new OSMSource(),
  visible: false
});

const map = new Map({
  // use OL3-Google-Maps recommended default interactions
  interactions: defaultInteractions().extend([
    new Drag()
  ]),
  layers: [
    osmLayer,
    new GoogleLayer()
  ],
  target: 'map',
  view: new View({
    center: transform([lng, lat], 'EPSG:4326', 'EPSG:3857'),

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import OSMSource from 'ol/source/OSM.js';
import XYZSource from 'ol/source/XYZ.js';
import OLGoogleMaps from 'olgm/OLGoogleMaps.js';
import GoogleLayer from 'olgm/layer/Google.js';
import {defaults as defaultInteractions} from 'olgm/interaction.js';


const center = [-10997148, 4569099];

const googleLayer = new GoogleLayer();

const osmLayer = new TileLayer({
  source: new OSMSource(),
  visible: false
});

const tmsLayer = new TileLayer({
  source: new XYZSource({
    url: 'http://v3.cartalib.mapgears.com/mapcache/tms/1.0.0/' +
        'mapgears_basemap@g/{z}/{x}/{-y}.'
  }),
  opacity: 1
});

const map = new Map({
  // use OL3-Google-Maps recommended default interactions
  interactions: defaultInteractions(),
  layers: [

});

  const busStopLayer = new olLayerImage({
    source: new olSourceImageWMS({
      projection: undefined, // should be removed in next OL version
      url: MAPSERVER_PROXY,
      params: {'LAYERS': 'bus_stop'}
    })
  });

  /**
   * @type {import("ol/Map.js").default}
   */
  this.map = new olMap({
    layers: [
      new olLayerTile({
        source: new olSourceOSM()
      }),
      informationLayer,
      busStopLayer
    ],
    view: new olView({
      projection: EPSG21781,
      resolutions: [200, 100, 50, 20, 10, 5, 2.5, 2, 1, 0.5],
      center: [537635, 152640],
      zoom: 0
    })
  });

  ngeoDataSources.map = this.map;

  ngeoDataSources.collection.push(new ngeoDatasourceOGC({

it('returns the current opacity background layer', () => {
      const activeBgLayer = new olLayerTile();
      ngeoBackgroundLayerMgr.set(map, activeBgLayer);
      const opacityBgLayer = new olLayerTile();
      ngeoBackgroundLayerMgr.setOpacityBgLayer(map, opacityBgLayer);
      const layer = ngeoBackgroundLayerMgr.getOpacityBgLayer(map);
      expect(layer).toBe(opacityBgLayer);
    });
  });

it('can change the opacity', () => {
    const layer = new olLayerTile({
      source: new olSourceOSM(),
      opacity: 0.5
    });
    ngeoMiscDecorateLayer(layer);
    layer.set('opacity', 0.7);
    expect(layer.getOpacity()).toBe(0.7);
  });
});

it('sets the opacity background layer', () => {
      const layer1 = new olLayerTile();
      ngeoBackgroundLayerMgr.set(map, layer1);
      const layer2 = new olLayerTile();
      ngeoBackgroundLayerMgr.setOpacityBgLayer(map, layer2);
      const bgGroup = ngeoLayerHelper.getGroupFromMap(map, BACKGROUNDLAYERGROUP_NAME);
      expect(bgGroup.getLayers().getLength()).toBe(2);
      expect(bgGroup.getLayers().item(0)).toBe(layer1);
      expect(bgGroup.getLayers().item(1)).toBe(layer2);
    });

it('sets the background layer #2', () => {
      const layer = new olLayerTile();
      ngeoBackgroundLayerMgr.set(map, layer);
      const bgGroup = ngeoLayerHelper.getGroupFromMap(map, BACKGROUNDLAYERGROUP_NAME);
      bgGroup.getLayers().setAt(1, new olLayerTile());
      expect(bgGroup.getLayers().getLength()).toBe(2);
      expect(bgGroup.getLayers().item(0)).toBe(layer);
    });

}, {
    code: EPSG21781,
    label: 'CH1903 / LV03',
    filter: 'ngeoNumberCoordinates:2:[{x} E; {y} N]'
  }, {
    code: 'EPSG:4326',
    label: 'WGS84',
    filter: 'ngeoDMSCoordinates:2'
  }];

  /**
   * @type {import("ol/Map.js").default}
   */
  this.map = new olMap({
    layers: [
      new olLayerTile({
        source: new olSourceOSM()
      })
    ],
    view: new olView({
      center: [828042, 5933739],
      zoom: 8
    })
  });
}

function MainController() {

  /**
   * @type {import("ol/Map.js").default}
   */
  this.map = new olMap({
    layers: [
      new olLayerTile({
        source: new olSourceOSM()
      })
    ],
    view: new olView({
      center: [0, 0],
      zoom: 4
    })
  });
}

export function getOSMLayer() {
  return new TileLayer({
    source: new OSM(),
    crossOrigin: "anonymous"
  });
}