1

In my project there are two GeoJSON point layer, both has the same attribute 'name'. I would like to use this attribute for labeling all points.

I've found this similar question but it is for OpenLayers 3. However I've used a part of code:

var getText = function(feature) {
    var text = feature.get('name');
    return text;
};

var style = new ol.style.Style({
      image: new ol.style.Circle({
          radius: 7,
          stroke: new ol.style.Stroke({
            color: 'rgba(200,200,200,1.0)',
            width: 3,
          }),
          fill: new ol.style.Fill({
            color: 'rgba(255,0,0,1.0)'
          })
      }),
      text: new ol.style.Text({
          text: getText(feature),
          font: 'bold 11px "Open Sans", "Arial Unicode MS", "sans-serif"',
          placement: 'point',
          fill: new ol.style.Fill({color: '#fff'}),
          stroke: new ol.style.Stroke({color: '#000', width: 2}),
      }),
  });

var addPointsSource = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: '{% url 'points_geojson' %}',
    format: new ol.format.GeoJSON(),
  }),
  style: style,
});

var freezedPoints = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: '{% url 'points_freezed_geojson' %}',
    format: new ol.format.GeoJSON(),
  }),
  style: style,
});

This is an example of GeoJSON:

{
  "type": "FeatureCollection",
  "crs": {
    "type": "name",
    "properties": {
      "name": "EPSG:4326"
    }
  },
  "features": [
    {
      "type": "Feature",
      "properties": {
        "name": "Napoli",
        "publishing_date": "2019-07-30T08:14:57",
        "updating_date": "2019-07-30T08:15:15.317",
        "timestamp": "2019-07-30T08:15:15.317",
        "pk": "1"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          14.254760740203487,
          40.855370527204315
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "name": "New York",
        "publishing_date": "2019-07-30T08:15:15",
        "updating_date": "2019-07-30T08:15:49.464",
        "timestamp": "2019-07-30T08:15:49.464",
        "pk": "2"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -73.99017332954408,
          40.738933236426014
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "name": "Petra",
        "publishing_date": "2019-07-30T08:15:49",
        "updating_date": "2019-07-30T08:19:56.621",
        "timestamp": "2019-07-30T08:19:56.621",
        "pk": "3"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          35.44249534113302,
          30.33036084747055
        ]
      }
    }
  ]
}

When I use that code I see this error:

Uncaught ReferenceError: style is not defined

My map is based on GeoDjango and I know that my knowledge of javascript are very very low.

2

style is defined in the code you have provided, so the error may be in the code for getText(feature) which you haven't shown. It is more efficient to define a single style and use a style function to set the text for each feature:

var style = new ol.style.Style({
      image: new ol.style.Circle({
          radius: 7,
          stroke: new ol.style.Stroke({
            color: 'rgba(200,200,200,1.0)',
            width: 3,
          }),
          fill: new ol.style.Fill({
            color: 'rgba(255,0,0,1.0)'
          })
      }),
      text: new ol.style.Text({
          font: 'bold 11px "Open Sans", "Arial Unicode MS", "sans-serif"',
          placement: 'point',
          fill: new ol.style.Fill({color: '#fff'}),
          stroke: new ol.style.Stroke({color: '#000', width: 2}),
      }),
  });

var styleFunction = function(feature) {
  style.getText().setText(feature.get('name'));
  return style;
}

var addPointsSource = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: '{% url 'points_geojson' %}',
    format: new ol.format.GeoJSON(),
  }),
  style: styleFunction,
});

var freezedPoints = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: '{% url 'points_freezed_geojson' %}',
    format: new ol.format.GeoJSON(),
  }),
  style: styleFunction,
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.