i have a vectorSource that contains some features.i know how to get the extent of the vectorSource, but i do not know how to get the extent of each individual feature in that vectorSource. i googled some posts and questions, and i tried to achieve that using the code posted below.

At run time, i receive the following error:

:179 Uncaught TypeError: Cannot read properties of undefined (reading 'getGeometry')

as if the vectorSource does not contain any features.

please let me know how to get the extent of each indivisual feature in the 'vectorSource` code:

const selectedFeatures = this.#vectorSource.getFeatures()
const extent = selectedFeatures[0].getGeometry().getExtent();


for some reason, it did not work with on('featuresloadend', and after checking the docs, i found the event to be fired should have been of type vectorSourceEvent, hence addfeature is used to listen to the fired event.

this.listenToMapFeaturesReadersInstance().value.getVectorSource().on('addfeature', () => {
    var features = this.listenToMapFeaturesReadersInstance().value.getVectorSource().getFeatures();
    features.forEach((feature) => {
        var extent = feature.getGeometry().getExtent();
        this.#msg = JSON.stringify({msg:verboseTag + 'evtListenerOnDrawEnd().', extent: extent});

1 Answer 1


You are probably trying to get features from source before features are loaded. You have to wait for source featuresloadend event and then request features.

Sample code could then look something like this:

const style = new ol.style.Style({
  fill: new ol.style.Fill({
    color: '#eeeeee',

const vectorSource = new ol.source.Vector({
  url: 'https://openlayers.org/data/vector/ecoregions.json',
  format: new ol.format.GeoJSON(),
vectorSource.on('featuresloadend', function() {
  var features = vectorSource.getFeatures();
  features.forEach(function(feature) {
    var extent = feature.getGeometry().getExtent();

const vector = new ol.layer.Vector({
  source: vectorSource,
  background: 'white',
  style: function (feature) {
    const color = feature.get('COLOR') || '#eeeeee';
    return style;

const map = new ol.Map({
  layers: [vector],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 2,

Here is working JSFiddle: https://jsfiddle.net/TomazicM/9qswahbf/

  • Thank you, tomorrow I will test it and then acknowledge. But would you please tell me how did you get this piece of information?I checked the official doc but could not attain it
    – Amr
    Feb 26 at 17:20
  • Vector source events are described here: openlayers.org/en/latest/apidoc/…
    – TomazicM
    Feb 26 at 17:26
  • would you please check the update section added above? can you please explain why featuresloadend did not get fired despite it is mentioned in the docs? and how to use it please. i know that ``addfeature` event works, but i would like to know how to get featuresloadend working
    – Amr
    Feb 27 at 6:13
  • Your are obviously working in some framework. Since I'm not familiar with any of those, not event with node.js, I don't know why it doesn't work for you. See modified answer with complete plain JS code and working JSFiddle.
    – TomazicM
    Feb 27 at 8:30
  • Would you please have a look at this question : gis.stackexchange.com/questions/478956/…
    – Amr
    Mar 23 at 16:28

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.