tombatossals/angular-openlayers-directive

Adding labels to point data automatically

Opened this issue · 1 comments

I have a KML dataset that is a collection of lat, lon, and name values. For example, one of the points is:

<Placemark id="1000010">
  <name>Point 1</name>
  <Point>
    <coordinates>-80.517615,40.910141,0</coordinates>
  </Point>
</Placemark>

I'd like to add this dataset to a map and automatically add labels containing the name attribute of the point.

In plain OL, I am able to do this by creating a style function, and assigning it to the style property of the layer. So, for example, I might have a simple style function like this:

let labelStyle = new ol.style.Style({
    text: new ol.style.Text({
        font: '10px Calibri, sans-serif',
        fill: new ol.style.Fill({
            color: '#000'
        }),               
    })
});

And use it like this:

let layer = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: 'dataset.kml',
        format: new ol.format.KML({
            "extractStyles": false
        }),
    }),
    style: function(feature) {
        labelStyle.getText().setText(feature.get('name'));
        return labelStyle;
    }
});

I tried to do this using angular-openlayers-directive, but couldn't get it to work. I tried to follow the same pattern as plain OL, so with the same labelStyle method in scope, I tried:

var layer = {
    name: "Data Layer",
    source: {
        url: "data.kml",
    },
    style: function(feature) {
        $scope.labelStyle.getText().setText(feature.get('name'));
        return $scope.labelStyle;
    }
};

But this does not work. Is it possible to do this some other way? Thank you!

So after further fiddling, I discovered that I wasn't specifying the type property in the source object. After doing that, I got labels to appear.

That said, my style function still was not working. So I converted the KML dataset to GeoJSON, and changed the type property in the source object accordingly. Then my style function began to work. So it appears that, in my case, the style function is not getting used when the dataset is KML. But it does work when I do this in plain OL.

I'll have to look into the source a little more to see if I'm missing something.