3

I created a style with pin SVG and text (ID of my feature) on top, but when I zoom out, the text overlaps other pins as well. Below is the code of style

style: function (feature) {
  return [new ol.style.Style({
    image: new ol.style.Icon( /** @type {olx.style.IconOptions} */ ({
      anchor: [0.5, 0.5],
      anchorXUnits: 'fraction',
      anchorYUnits: 'fraction',
      scale: 1,
      src: '/static/images/best-places/place_icon.svg'
    })),
    text: new ol.style.Text({
      text: feature.getId().toString(),
      fill: new ol.style.Fill({
        color: '#fff'
      }),
    })
  })]
}

when I'm zoomed out, it looks good

zoomed out

when I zoom in, the text overlaps on other features icon

zoomed in

I'm okay with pins getting overlapped, but I'm expecting text will also get overlapped liked the following example https://www.trulia.com/for_sale/37.81634,37.83096,-122.28107,-122.26081_xy/16_zm/

9

1 Answer 1

3

In your function all the features will have the same zIndex, try giving them a unique zIndex:

style: function (feature) {
  return [new ol.style.Style({
    image: new ol.style.Icon( /** @type {olx.style.IconOptions} */ ({
      anchor: [0.5, 0.5],
      anchorXUnits: 'fraction',
      anchorYUnits: 'fraction',
      scale: 1,
      src: '/static/images/best-places/place_icon.svg'
    })),
    text: new ol.style.Text({
      text: feature.getId().toString(),
      fill: new ol.style.Fill({
        color: '#fff'
      }),
    }),
    zIndex: feature.getId()
  })]
}

Creating a new style each time the style function is called can lead to poor performance. It would be more efficient to declare a base style

var baseStyle = new ol.style.Style({
    image: new ol.style.Icon( /** @type {olx.style.IconOptions} */ ({
      anchor: [0.5, 0.5],
      anchorXUnits: 'fraction',
      anchorYUnits: 'fraction',
      scale: 1,
      src: '/static/images/best-places/place_icon.svg'
    })),
    text: new ol.style.Text({
      fill: new ol.style.Fill({
        color: '#fff'
      }),
    })
  });

then simply update it in your style function

style: function (feature) {
  baseStyle.getText().setText(feature.getId().toString());
  baseStyle.setZIndex(feature.getId());
  return baseStyle;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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