How to use openlayers - 10 common examples

drawBorderedRectangle(rectangle) {
    if (this.vectorLayer) {
      this.map.removeLayer(this.vectorLayer)
    }

    if (!rectangle) {
      // handles case where model changes to empty vars and we don't want to draw anymore
      return
    }

    this.billboard = new ol.Feature({
      geometry: rectangle,
    })

    this.billboard.setId(this.model.cid)

    const color = this.model.get('color')

    const iconStyle = new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: color ? color : '#914500',
        width: 3,
      }),
    })
    this.billboard.setStyle(iconStyle)

    const vectorSource = new ol.source.Vector({

ngOnInit() {
    this.instance = new Feature();
    if (this.id !== undefined) {
      this.instance.setId(this.id);
    }
    this.host.instance.addFeature(this.instance);
  }

setRangePolygon = (vertices, center) => {
    const polygon = new ol.geom.Polygon([vertices]);
    const feature = new ol.Feature({
      geometry: polygon
    });
    feature.getGeometry().transform('EPSG:4326', 'EPSG:3857');
    const source = new ol.source.Vector({ features: [feature] });
    this.state.map
      .getLayers()
      .getArray()[6]
      .setSource(source);
    this.state.map.getView().fit(polygon, this.state.map.getSize(), { padding: [20, 20, 20, 40] });
    this.state.map.getView().setCenter(center);
  };

}, function() {
            if (map && vm.marker) {
                var markerFeature = new ol.Feature({
                    geometry: new ol.geom.Point(ol.proj.fromLonLat(vm.marker.point, projection.srs)),
                    message: vm.marker.message
                });
                markerFeature.setStyle(markerStyle);
                var vectorSource = new ol.source.Vector({
                    features: [markerFeature]
                });

                var vectorLayer = new ol.layer.Vector({
                    source: vectorSource
                });
                map.addLayer(vectorLayer);
                map.getView().fit(vectorLayer.getSource().getExtent());
                map.getView().setZoom(vm.marker.zoom || 6);
            }
        });

)
    const turfCircle = new TurfCircle(
      point,
      rectangle.getRadius() *
        this.map
          .getView()
          .getProjection()
          .getMetersPerUnit(),
      64,
      'meters'
    )
    const geometryRepresentation = new ol.geom.LineString(
      translateToOpenlayersCoordinates(turfCircle.geometry.coordinates[0])
    )

    this.billboard = new ol.Feature({
      geometry: geometryRepresentation,
    })

    this.billboard.setId(this.model.cid)

    const color = this.model.get('color')

    const iconStyle = new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: color ? color : '#914500',
        width: 3,
      }),
    })
    this.billboard.setStyle(iconStyle)

    const vectorSource = new ol.source.Vector({

event.features.forEach(function(f) {
                var original = f.getGeometry();

                if (typeof original.getPolygons === 'function') {
                    var polys = original.getPolygons();
                    for (var i = 0; i < polys.length; i++) {
                        geometries.push(new ol.Feature({geometry: polys[i]}));
                    }
                } else {
                    geometries.push(new ol.Feature({geometry: original}));
                }
            });

this.draw.on('drawend', (e: any) => {
      const feat = new ol.Feature({
        geometry: e.target
      });
      this._getLengthOrArea(feat);
    });
    this.draw.setActive(true);

private addOverlay(coordinates: [number, number]) {
    const geometry = new ol.geom.Point(
      ol.proj.transform(coordinates, this.projection, this.map.projection));
    const extent = geometry.getExtent();
    const feature = new ol.Feature({geometry: geometry});

    this.map.moveToExtent(extent);
    this.map.addOverlay(feature);
  }

function setPinOnMap(evt) {
        var latLong = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
        $timeout(function() {
            vm.form.latitude = latLong[1];
            vm.form.longitude = latLong[0];
        }, 0);

        if (vm.dynamicPinLayer !== undefined) {
            vm.iconGeometry.setCoordinates(evt.coordinate);
        } else {
            vm.iconGeometry = new ol.geom.Point(evt.coordinate);
            var iconFeature = new ol.Feature({
                geometry: vm.iconGeometry
            });
            var iconStyle = new ol.style.Style({
                image: new ol.style.Icon(({
                    anchor: [0.5, 41],
                    anchorXUnits: 'fraction',
                    anchorYUnits: 'pixels',
                    size: [25, 41],
                    opacity: 1,
                    src: '/img/marker.png'
                }))
            });

            iconFeature.setStyle(iconStyle);

            var vectorSource = new ol.source.Vector({

addPointWithText(point, options, useCustomText = false) {
      const pointObject = convertPointCoordinate(point)
      const feature = new Openlayers.Feature({
        geometry: new Openlayers.geom.Point(pointObject),
      })
      feature.setId(options.id)

      feature.setStyle(
        new Openlayers.style.Style({
          image: new Openlayers.style.Icon({
            img: DrawingUtility.getCircleWithText({
              fillColor: options.color,
              text: useCustomText ? options.id : options.id.length,
            }),
            imgSize: [44, 44],
          }),
        })
      )