0

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.

ThomasHaarlem
  • 5
  • 4

1 Answers1

0

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;
  }
Mike
  • 16,042
  • 2
  • 14
  • 30
  • thanks for your link to the latest example. I'm not sure I put your help in the right place since I don't yet see the label in my map. Is it maybe easier if I try to make the Labels visible in all Polygons at once? – ThomasHaarlem Mar 09 '20 at 10:12
  • You would still need to set the text. It could be that using `placement: 'line', overflow: false,` is preventing the labels appearing. Try using 'point' and true https://codesandbox.io/s/vector-layer-u7bb4 – Mike Mar 09 '20 at 11:11
  • thank you for your patience. I was in the wrong part of my script. I had to go down to the part where I define the geojsonLayer. https://stackoverflow.com/questions/59262927/openlayers-6-show-geojson-label-on-line – ThomasHaarlem Mar 09 '20 at 11:48