How can I get drawn polygon coordinate in Openlayers?

Question

I have an openlayers project. When I draw the any place in the map, I want to get drawn polygon coordinate and information about drawn place such as neighborhood name. I tried many solution in the here and also another advices but I cant get drawn coordinate. How can I get drawn polygon coordinate.

Here is my html code

   <div id="map" class="map"></div>
    <select id="layer-select" class="layer-select">

        <option value="AerialWithLabelsOnDemand" selected>Aerial with labels</option>

    </select>
    <form class="form-inline">
        <label for="type">Geometry type: &nbsp;</label>
        <select class="form-control mr-2 mb-2 mt-2" id="type">
            <option value="Point">Point</option>
            <option value="LineString">LineString</option>
            <option value="Polygon">Polygon</option>
            <option value="Circle">Circle</option>
            <option value="None">None</option>
        </select>
        <input class="form-control mr-2 mb-2 mt-2" type="button" value="Undo" id="undo">
    </form>

Here is js code

  "use strict";
        var TileLayer = ol.layer.Tile;
        var OSM = ol.source.OSM;
        var VectorSource = ol.source.Vector;
        var VectorLayer = ol.layer.Vector;
        var Style = ol.style.Style;
        var Fill = ol.style.Fill;
        var Stroke = ol.style.Stroke;
        var CircleStyle = ol.style.Circle;
        var View = ol.View;
        var Modify = ol.interaction.Modify;
        var Draw = ol.interaction.Draw;
        var Snap = ol.interaction.Snap;
        var Overlay = ol.Overlay;
        var toStringHDMS = ol.coordinate.toStringHDMS;
        var fromLonLat = ol.proj.fromLonLat;
        var toLonLat = ol.proj.toLonLat;

        var raster = new TileLayer({

            preload: Infinity,
            source: new ol.source.BingMaps({
                key: '------------------',
                imagerySet: 'AerialWithLabelsOnDemand',     
            })
        });
        var source = new VectorSource({ wrapX: false });

        var vector = new VectorLayer({
            source: source,

        });


        var map = new ol.Map({
            layers: [
                raster, vector
            ],
            target: 'map',
            view: new View({
                center: fromLonLat([34.9744, 39.0128]),
                zoom: 6,

            })
        });

        var typeSelect = document.getElementById('type');

        var draw; // global so we can remove it later
        function addInteraction() {
            var value = typeSelect.value;
            if (value !== 'None') {
                draw = new Draw({
                    source: source,
                    type: typeSelect.value,
                    
                });
                map.addInteraction(draw);
            }
        }

        typeSelect.onchange = function () {
            map.removeInteraction(draw);
            addInteraction();
        };

        document.getElementById('undo').addEventListener('click', function () {
            draw.removeLastPoint();

        });


        var popup = new Overlay({
            element: document.getElementById('popup'),
        });
        map.addOverlay(popup);

        map.on('click', function (evt) {
            var element = popup.getElement();
            var coordinate = evt.feature;

            var hdms = toStringHDMS(toLonLat(coordinate));

            $(element).popover('dispose');
            popup.setPosition(coordinate);
            $(element).popover({
                container: element,
                placement: 'top',
                animation: false,
                html: true,
                content: '<p>The location you clicked was:</p><code>' + hdms + '</code>',
            });
            $(element).popover('show');
        });

Answer 1

map.on('click', function (evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
         return feature;
     });
if (feature) {
     var coord = feature.getGeometry().getCoordinates();
     var props = feature.getProperties();
    console.log(props.yourAttributeName);                 
    }        
});