How to use ol - 10 common examples

searchGeoLayer.getSource().clear();

    // SET STATE CURRENT ITEM
    this.setState({ value, searchResults: [item] });
    if (item.place_id !== undefined || item.location_id == null) {
      this.initsearchLayers();

      // SET STATE CURRENT ITEM
      this.setState({ searchResults: [item] });

      // HANDLE OSM RESULT
      let coords = [];
      let feature = null;
      if (item.place_id !== undefined) {
        coords = helpers.toWebMercatorFromLatLong([item.x, Math.abs(item.y)]);
        feature = new Feature(new Point(coords));
      } else feature = new Feature(new Point([item.x, item.y]));

      feature.setProperties({ isPlaceOrGeocode: true });

      // SET SOURCE
      searchIconLayer.getSource().addFeature(feature);

      searchGeoLayer.setZIndex(100);
      searchIconLayer.setZIndex(100);

      // SET STYLE AND ZOOM
      searchGeoLayer.setStyle(styles["point"]);
      window.map.getView().fit(feature.getGeometry().getExtent(), window.map.getSize(), { duration: 1000 });
      window.map.getView().setZoom(18);
    } else {
      // CALL API TO GET LOCATION DETAILS

}
      //console.log(duration, options.duration, s)
      distance += options.distance;
      duration += options.duration;
      options.distanceT = distance;
      options.durationT = duration;
      f = new ol_Feature(options);
      routing.features.push(f);
    }
  }
  routing.distance = parseFloat(data.distanceMeters);
  routing.duration = parseFloat(data.durationSeconds);

  // Full route
  route = new ol_geom_LineString(route);
  routing.feature = new ol_Feature ({
    geometry: route.transform('EPSG:4326',this.getMap().getView().getProjection()),
    start: this._search[0].getTitle(start),
    end: this._search[0].getTitle(end), 
    distance: routing.distance,
    duration: routing.duration
  });

  // console.log(data, routing);
  this.dispatchEvent(routing);
  this.path = routing;
  return routing;
};

const features = [];

  while ((curIndex = csv.indexOf('\n', prevIndex)) > 0) {
    const line = csv.substr(prevIndex, curIndex - prevIndex).split(',');

    prevIndex = curIndex + 1;
    if (prevIndex === 0) {
      continue; // skip header
    }

    const coords = fromLonLat([parseFloat(line[4]), parseFloat(line[3])]);

    features.push(new Feature({
      mass: parseFloat(line[1]) || 0,
      year: parseInt(line[2]) || 0,
      geometry: new Point(coords)
    }));
  }
  source.addFeatures(features);
};
client.send();

let prevIndex = 0;
    while ((curIndex = csv.indexOf('\n', prevIndex)) > 0) {
      const line = csv.substr(prevIndex, curIndex - prevIndex).split(',');
      prevIndex = curIndex + 1;

      // skip header
      if (prevIndex === 0) {
        continue;
      }

      const coords = fromLonLat([parseFloat(line[4]), parseFloat(line[3])]);

      features.push(new Feature({
        mass: parseFloat(line[1]) || 0,
        year: parseInt(line[2]) || 0,
        geometry: new Point(coords)
      }));
    }
    vectorSource.addFeatures(features);
  };
  client.send();

it('moves feature to the new position', () => {
        // the next line show this test isn't testing anything
        // expect.assertions(1);
        const coords = [0, 0];
        const geom = new OlGeomPoint(coords);
        const featToMove = new OlFeature(geom);

        let map = TestUtil.createMap();

        AnimateUtil.moveFeature(
          map, featToMove, 100, 50, new OlStyleStyle()
        ).then((feat) => {
          expect(feat.getGeometry().getCoordinates()).toEqual([50, 50]);
        });
        TestUtil.removeMap(map);
      });
    });

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,
      }),
    })

    this.featureOverlay = new VectorLayer({
      source: new VectorSource(),
      map: map,
      style: function(feature) {
        highlightStyle.getText().setText(`${feature.getProperties().CNAME}`)
        return highlightStyle
      },
    })

    if (isDCDataExist) {
      // Fit to feature
      const features = this.featureSource.getFeatures()
      for (let i = 0; i < features.length; i++) {
        if (features[i].getProperties().CACODE === code) {
          const extent = features[i].getGeometry().getExtent()
          map.getView().fit(extent, {
            size: map.getSize(),
            padding: [10, 10, 10, 10],

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',

var ol_interaction_CenterTouch = function(options)
{	options = options || {};

	// LIst of listerner on the object
	this._listener = {};
	// Filter event
	var rex = /^pointermove$|^pointerup$/;

	// Default style = cross
	this.targetStyle = options.targetStyle ||
		[	new ol_style_Style({ image: new ol_style_RegularShape ({ points: 4, radius: 11, radius1: 0, radius2: 0, snapToPixel:true, stroke: new ol_style_Stroke({ color: "#fff", width:3 }) }) }),
			new ol_style_Style({ image: new ol_style_RegularShape ({ points: 4, radius: 11, radius1: 0, radius2: 0, snapToPixel:true, stroke: new ol_style_Stroke({ color: "#000", width:1 }) }) })
		];
	if (!(this.targetStyle instanceof Array)) this.targetStyle = [this.targetStyle];
	this.composite = options.composite || '';

	// Interaction to defer center on top of the interaction 
	// this is done to enable other coordinates manipulation inserted after the interaction (snapping)
	this.ctouch = new ol_interaction_Interaction(
		{	handleEvent: function(e) 
				{	if (rex.test(e.type) && this.getMap()) 
					{	e.coordinate = this.getMap().getView().getCenter();
						e.pixel = this.getMap().getSize();
						e.pixel = [ e.pixel[0]/2, e.pixel[1]/2 ];
					}
					return true; 
				}

static prepProjection() {
        // define the projection for this application and reproject defaults
        Ol_Proj.setProj4(proj4js);
        proj4js.defs(appConfig.DEFAULT_PROJECTION.code, appConfig.DEFAULT_PROJECTION.proj4Def);

        // Ol3 doesn't properly handle the "urn:ogc:def:crs:OGC:1.3:CRS84"
        // string in getCapabilities and parses it into "OGC:CRS84". This
        // hopefully adds that as an equivalent projection
        let epsg4326Proj = Ol_Proj.get("EPSG:4326");
        let ogcCrs84Proj = new Ol_Proj_Projection({
            code: "OGC:CRS84",
            units: epsg4326Proj.getUnits(),
            extent: epsg4326Proj.getExtent(),
            global: epsg4326Proj.isGlobal(),
            metersPerUnit: epsg4326Proj.getMetersPerUnit(),
            worldExtent: epsg4326Proj.getWorldExtent(),
            getPointResolution: function(res, point) {
                return Ol_Proj.getPointResolution("EPSG:4326", res, point);
            }
        });
        Ol_Proj.addProjection(ogcCrs84Proj);
        Ol_Proj.addEquivalentProjections([ogcCrs84Proj, epsg4326Proj]);

        let mapProjection = Ol_Proj.get(appConfig.DEFAULT_PROJECTION.code);
        mapProjection.setExtent(appConfig.DEFAULT_PROJECTION.extent);

ngAfterContentInit() {

    this.view = new OlView({
      center: [0, 0],
      zoom: 16
    });

    this.map = new OlMap( {
      layers: [
        new OlTileLayer({
          source: new OlOSM()
        })
      ],
      target: 'map',
      view: this.view
    });

    this.geolocation = new Geolocation({
      // enableHighAccuracy must be set to true to have the heading value.
      trackingOptions: {
        enableHighAccuracy: true
      },
      projection: this.view.getProjection()
    });

    const coord = [28.232592, -25.755710]; // TUKS IT BUILDING COORDS