Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding labels to point data automatically #390

Open
jmgelman opened this issue Feb 21, 2018 · 1 comment
Open

Adding labels to point data automatically #390

jmgelman opened this issue Feb 21, 2018 · 1 comment

Comments

@jmgelman
Copy link

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!

@jmgelman
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant