How to use the ol/Map function in ol

if (/right/.test(options.align))
				element.classList.add('ol-control-right');
			this.panel_ = document.createElement("div");
			this.panel_.classList.add("panel");
			element.appendChild(this.panel_);
			this.pointer_ = document.createElement("div");
			this.pointer_.classList.add("ol-pointer");
			element.appendChild(this.pointer_);
		}
		ol_control_Control.call(this, {
		element: element,
			target: options.target
		});
		// http://openlayers.org/en/latest/examples/sphere-mollweide.html ???
		// Create a globe map
		this.ovmap_ = new ol_Map({
		controls: new ol_Collection(),
			interactions: new ol_Collection(),
			target: this.panel_,
			view: new ol_View({
			zoom: 0,
				center: [0, 0]
			}),
			layers: options.layers
		});
		setTimeout(function () {
			self.ovmap_.updateSize();
		}, 0);
		this.set('follow', options.follow || false);
		// Cache extent
		this.extentLayer = new ol_layer_Vector({
		name: 'Cache extent',

// create map object with feature layer
    const layers = [
      //default OSM layer
      new TileLayer({
        source: new XYZ({
          url:
            'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',
        }),
      }),
    ]

    if (isDCDataExist) {
      layers.push(featuresLayer)
    }

    const map = new Map({
      target: this.refs.mapContainer,
      layers,
      view: new View({
        projection: 'EPSG:4326',
        center: [114.2029, 22.3844],
        zoom: 13,
      }),
      controls: [],
    })

    this.featureOverlay = new VectorLayer({
      source: new VectorSource(),
      map: map,
      style: function(feature) {
        highlightStyle
          .getText()

const resolutions = [];
for (let i = 0; i <= 8; ++i) {
  resolutions.push(156543.03392804097 / Math.pow(2, i * 2));
}
// Calculation of tile urls for zoom levels 1, 3, 5, 7, 9, 11, 13, 15.
function tileUrlFunction(tileCoord) {
  return ('https://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/' +
      '{z}/{x}/{y}.vector.pbf?access_token=' + key)
    .replace('{z}', String(tileCoord[0] * 2 - 1))
    .replace('{x}', String(tileCoord[1]))
    .replace('{y}', String(tileCoord[2]))
    .replace('{a-d}', 'abcd'.substr(
      ((tileCoord[1] << tileCoord[0]) + tileCoord[2]) % 4, 1));
}

const map = new Map({
  layers: [
    new VectorTileLayer({
      source: new VectorTileSource({
        attributions: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
          '© <a href="https://www.openstreetmap.org/copyright">' +
          'OpenStreetMap contributors</a>',
        format: new MVT(),
        tileGrid: new TileGrid({
          extent: getProjection('EPSG:3857').getExtent(),
          resolutions: resolutions,
          tileSize: 512
        }),
        tileUrlFunction: tileUrlFunction
      }),
      style: createMapboxStreetsV6Style(Style, Fill, Stroke, Icon, Text)
    })

var ol_Overlay_Magnify = function (options) {
	var elt = document.createElement("div");
			elt.className = "ol-magnify";
	this._elt = elt;

	ol_Overlay.call(this,
		{	positioning: options.positioning || "center-center",
			element: this._elt,
			stopEvent: false
		});
	// Create magnify map
	this.mgmap_ = new ol_Map(
	{	controls: new ol_Collection(),
		interactions: new ol_Collection(),
		target: options.target || this._elt,
		view: new ol_View({ projection: options.projection }),
		layers: options.layers
	});
	this.mgview_ = this.mgmap_.getView();

	this.external_ = options.target?true:false;

	this.set("zoomOffset", options.zoomOffset||1);
	this.set("active", true);
	this.on("propertychange", this.setView_.bind(this));
};
ol_ext_inherits(ol_Overlay_Magnify, ol_Overlay);

it('calls this.props.onSelect with the selected item', () => {
      //SETUP
      const dataSource = [{
        place_id: 752526,
        display_name: 'Böen, Löningen, Landkreis Cloppenburg, Niedersachsen, Deutschland'
      }];
      const map = new OlMap({
        layers: [new OlLayerTile({name: 'OSM', source: new OlSourceOsm()})],
        view: new OlView({
          projection: 'EPSG:4326',
          center: [37.40570, 8.81566],
          zoom: 4
        })
      });
      //SETUP END

      const selectSpy = jest.fn();
      const wrapper = TestUtil.mountComponent(NominatimSearch, {
        onSelect: selectSpy,
        map
      });
      wrapper.setState({
        dataSource: dataSource

it('returns true: layer (w/ maxResolution) & viewRes < l.maxres', () => {
      const layer = new OlLayerTile({
        maxResolution: 42
      });
      const view = new OlView({resolution: 41});
      const map = new OlMap({view: view});
      expect(MapUtil.layerInResolutionRange(layer, map)).toBe(true);
    });

protected createOLMap(options: MapOptions): any {
        return new Map(options);
    }
    private getCallback(): IMapViewerContextCallback {

createOlObject () {
        const map = new Map({
          loadTilesWhileAnimating: this.loadTilesWhileAnimating,
          loadTilesWhileInteracting: this.loadTilesWhileInteracting,
          pixelRatio: this.pixelRatio,
          moveTolerance: this.moveTolerance,
          keyboardEventTarget: this.keyboardEventTarget,
          maxTilesLoading: this.maxTilesLoading,
          controls: this._controlsCollection,
          interactions: this.$interactionsCollection,
          layers: this.$layersCollection,
          overlays: this.$overlaysCollection,
          view: this.$view,
        })

        setMapId(map, this.id)
        setMapDataProjection(map, this.dataProjection)
        this._featuresOverlay.setMap(map)

import VectorSource from 'ol/source/Vector';
import GeoJsonFormat from 'ol/format/GeoJSON';
import Map from 'ol/Map';
import View from 'ol/View';

import stylefunction from 'ol-mapbox-style/stylefunction';

const layer = new VectorLayer({
  declutter: true,
  source: new VectorSource({
    format: new GeoJsonFormat(),
    url: 'data/states.geojson'
  })
});

const map = new Map({
  target: 'map',
  view: new View({
    center: [-13603186.115192635, 6785744.563386],
    zoom: 2
  })
});

fetch('data/states.json')
  .then(r => r.json())
  .then((glStyle) => {
    stylefunction(layer, glStyle, 'states');
    if (map.getLayers().getArray().indexOf(layer) === -1) {
      map.addLayer(layer);
    }
  });