Keeping the polygon size same in Openlayers

Question

I have created some code to create two Polygons in Openlayers Map and tried to keep the size same while zooming it, but the size is also reducing when I zoomout of the map. My intention is to use Polygons as site markers. Could you please help me to use Polygons as site markers and to keep the size same while zoom out and zoom in?

I have used parcel bundler to create the test build. I have seen the OverLay example in your site where the marker stays at the same size while doing zoom In/Out of the Map ,similarly I am looking for possibility to make use of polygons as site markers.

For simplicity I have removed the import part of the below JS code.

Below is the JS Code:

//Position of our map center

var pos = fromLonLat([76.87403794962249, 8.569385045000772]);

//Position for our Triangle Polygon

var pos1 = fromLonLat([76.85860825505787, 8.575525035547585]);

//The below line is to check the Longitude and Latitude
//console.log(toLonLat(pos1));

var pos2 = fromLonLat([76.85286067404068, 8.56925661298456]);

var pos3 = fromLonLat([76.86300346314657, 8.56917303421666]);

//Position for arrow Polygon

var arrowOne = fromLonLat([76.86219331461274, 8.565926475435887]);

var arrowTwo = fromLonLat([76.86584111887299, 8.566053785302557]);

var arrowThree = fromLonLat([76.86566945749604, 8.56758150037902]);

var arrowFour = fromLonLat([76.87034723001801, 8.56456850087342]);

var arrowFive = fromLonLat([76.86635610300385, 8.562064722566959]);

var arrowSix = fromLonLat([76.86627027231538, 8.5638470749155]);

var arrowSeven = fromLonLat([76.86163541513764, 8.564016822322785]);

//OSM() Tile layer for our Map

var tileLayer = new TileLayer({
    source: new OSM()
});

//Setting View for our Map

var viewOne = new View({
    center: pos,
    zoom: 15
});

//Coordinates for our Polygons
var cordTriangle = [pos1, pos2, pos3, pos1];
var cordArrow = [arrowOne, arrowTwo, arrowThree, arrowFour, arrowFive, 
arrowSix, arrowSeven, arrowOne];

var polyTriangle = new Polygon([cordTriangle]);

var polyArrow = new Polygon([cordArrow])

//Adding the Feature for our Polygons
var featureTriangle = new Feature(polyTriangle);

var featureArrow = new Feature(polyArrow);

//vectorSource.addFeature(feature);

var vectorSource = new VectorSource({
    projection: 'EPSG:4326',
    features: [featureTriangle, featureArrow]
});

// The below Select is needed if we have to select a feature before move
//var select = new Select();

//The below will select all the Features and add it for Translate
var translate = new Translate();

//Setting custom styles for our Polygons

featureTriangle.setStyle(new Style({
    fill: new Fill({
        color: 'red'
    })
}));

featureArrow.setStyle(new Style({
    stroke: new Stroke({
        color: 'green',
        width: 2
    }),
    fill: new Fill({
        color: 'cyan'
    })
}));

var vectorLayer = new VectorLayer({
    source: vectorSource,
    updateWhileAnimating: true,
    updateWhileInteracting: true
});



// Adding all Layers and creating our Map
var map = new Map({
    interactions: defaultInteractions().extend([ /*select,*/ translate]),
    target: 'map',
    layers: [tileLayer, vectorLayer],
    view: viewOne
});


//To get the Lon and Lat of clicked location over map. This will be 
displayed in the console.

$(document).ready(function () {
    map.on('click', function (event) {
        let cordClick = toLonLat(event.coordinate);
        console.log(cordClick);
    });
});

Changes added on 31/08/2018:

var resol = viewOne.getResolution();

console.log('The Resolution is : ' + resol);

var cordVary = function () {

    for (var outer = 0; outer < cordArrow.length; outer++) {

        var cordArrow1 = [
            [0, 0],
            [0, 0],
            [0, 0],
            [0, 0],
            [0, 0],
            [0, 0],
            [0, 0],
            [0, 0]
        ];

        for (var inner = 0; inner < cordArrow[outer].length; inner++) {

            cordArrow1[outer][inner][0] = cordArrow[outer][inner][0] * resol;
            cordarrow1[outer][inner][1] = cordArrow[outer][inner][1] * resol;
            //console.log(outer, inner);
        }
    }
    return cordArrow1;
}

I am trying to update the coordinates when I zoom into the map to keep the same size for the Polygons

Answer 1

@ChaseChoi I and Mike from Stack Exchange worked together and found the solution.

Please find the answer here