Open Layer + GeoJson: place label in polygon - label

Question

I try for a while to put Labels in my Open Layers map.
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.1.1/build/ol.js">
I managed to make a map with polygons filled in red. And when you hover over a polygon with your mouse; that polygon turns green. Now I want that it also displayes the name of the area as a Text label to feature. Just in the center of that polygon is fine.
what I tried:
I found this example (https://openlayers.org/en/latest/examples/vector-labels.html) but it is too complicated for me. I don't understand where in this example they make the connection to the file with the names related to the polygon.
And I believe that this solution is outdated:
open layer: display a label from properties in geojson file
Below is the hoverStyle which makes the area turn green when you hover over it:
in index.html under <script>
var hoverStyle = new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(0, 255, 0, 0.6)' // green
}),
stroke: new ol.style.Stroke({
width: 3,
color: 'rgba(0, 0, 0, 1)' // black
}),
//Something with the Labels here? :
text: new ol.style.Text({
text: feature.get('Area_Name'), *//I believe I have to make the connection to the Feature Area_Name here*
align: 'center',
weight: 'normal',
placement: 'line',
overflow: 'false',
color: 'rgba(0, 0, 0, 1)' // black
})
Below are the first lines of my json file with the Features and Geometry:
in the file: PS2019.json
{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::28992" } },
"features": [
{ "type": "Feature", "properties": { "Area_Name": "Amsterdam", /* more attributes of the Polygon and the polygon geometry */ },
I have no clue anymore. I hope one of you can give me a step in the right direction.

Answer 1

If your hoverstyle is shared by all the polygons you will need a style function to set the text value
In this example https://openlayers.org/en/latest/examples/vector-layer.html where you see
style: function(feature) {
style.getText().setText(feature.get('name'));
return style;
}
and
style: function(feature) {
highlightStyle.getText().setText(feature.get('name'));
return highlightStyle;
}
you would need
style: function(feature) {
hoverStyle.getText().setText(feature.get('Area_Name'));
return hoverStyle;
}