Skip to content

Adding labels to point data automatically #390

Description

@jmgelman

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!

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions