OpenLayers 4 Modify - There is an option to show the feature vertexes as point always?(not hover)

Question

Using the modify interaction - the default behaviour is to show existing vertex as point when hover it.

(When the mouse is hovered over the left bottom vertex - the vertex is shown)

Is there an option to always show the existing vertices?

link: https://jsfiddle.net/cc742av3/

      var polygon  = new ol.Feature(
            {
                geometry: new ol.geom.Polygon([
                [[37154.73247527378,6059120.393550643],
                [503114.85690170806,6060343.386003206],
                [525128.7210478389,5637187.99741647],
                [29816.777759896824,5656755.876657475],
                [37154.73247527378,6059120.393550643]]
                ])
            }
        );
       var layer = new ol.layer.Vector({ source: new ol.source.Vector({features: [polygon]})})
var modifyInteraction =  new ol.interaction.Modify(
  { features: new ol.Collection([polygon])
  });

var map = new ol.Map({
        target: 'map',
        interactions:[modifyInteraction],
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          }),
          layer
        ],
        view: new ol.View({
          center: [227941.55507507361 , 5912361.299243105],
          zoom: 6
        })
      });

Answer 1

Here I updated your fiddle: https://jsfiddle.net/cc742av3/3/

Code is from this example: http://openlayers.org/en/master/examples/polygon-styles.html

The trick is, you define two styles, one of them is a function to retrieve the points from your geometry:

  var styles = [
    /* We are using two different styles for the polygons:
     *  - The first style is for the polygons themselves.
     *  - The second style is to draw the vertices of the polygons.
     *    In a custom `geometry` function the vertices of a polygon are
     *    returned as `MultiPoint` geometry, which will be used to render
     *    the style.
     */
    new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'blue',
        width: 3
      }),
      fill: new ol.style.Fill({
        color: 'rgba(0, 0, 255, 0.1)'
      })
    }),
    new ol.style.Style({
      image: new ol.style.Circle({
        radius: 5,
        fill: new ol.style.Fill({
          color: 'orange'
        })
      }),
      geometry: function(feature) {
        // return the coordinates of the first ring of the polygon
        var coordinates = feature.getGeometry().getCoordinates()[0];
        return new ol.geom.MultiPoint(coordinates);
      }
    })
  ];

Then you apply these styles to your layer:

var layer = new ol.layer.Vector({
  source: new ol.source.Vector({features: [polygon]}),
  style: styles

});