CODEWITHSUNDEEP
openlayersopenlayers-6
Teeseesee
Teeseesee

Reputation: 31

Features are tiny

I am moving my map from taking the url directly in the source to a model where I fetch the data separately and add them in manually. Taking the Url directly in the source like the below worked perfectly fine.

var vectorSource = new ol.source.Vector({
    url: `${document.ApiRoot}/api/features/${this.Zoom}?coordinateList=${this.ViewportCoordinates.join(",")}`,
    format: new ol.format.GeoJSON()
});
await this.mainLayer.setSource(vectorSource);

So now I create a single vector source for my layer which is no longer replaced. I use the below code to update the map with new features.

const features = await Api.GetFeatures(this.Zoom, this.ViewportCoordinates);

this.featureVectorSource.clear();
var geojsonFormat = new ol.format.GeoJSON();
const olFeatures = geojsonFormat.readFeatures(JSON.stringify(features));
this.featureVectorSource.addFeatures(olFeatures);

I have inspected the results using the browser debugging tools and all looks about correct. The features are correctly parsed and added to the map. If I inspect the layer and get its features then they are there. The map looks virtually empty, however in exasperation I scrolled around looking for something and sure enough I found my features. The feature on an empty map

That dot is a feature, I can select it and read data off it like I could before.

I have tried messing about with projections but I'm not entirely clear on what I'm doing. It seems like the feature is having its coordinates transformed in some manner when I don't need them to. I have enabled the coordinates to show on the map with the mouse pointer and that seems fine as well.

I'm at a loss. Any help is appreciated, thank you.

Upvotes: 1

Views: 144

Answers (1)

Teeseesee
Teeseesee

Reputation: 31

As it always happens, I struggle on something for days and post a question and then find the answer within half an hour.

For me, I had to readFeatures using the options. You can define the data projection and the feature projection. Once I fiddled with this I got my features back. I still don't understand how it "just worked" using the url and not when manually updating features, but I'm finally past this.

        static madoobry = {
            dataProjection: 'EPSG:4326',
            featureProjection: 'EPSG:3857'
        };
        private async updateMapWithNewFeatures(): Promise<void> {
            if (Number.isNaN(this.ViewportCoordinates[0])) return;
            debugger;
            const features = await Api.GetFeatures(this.Zoom, this.ViewportCoordinates);

            this.featureVectorSource.clear();
            var geojsonFormat = new ol.format.GeoJSON();
            const olFeatures = geojsonFormat.readFeatures(JSON.stringify(features), Globe.madoobry);
            this.featureVectorSource.addFeatures(olFeatures);
        }

Excuse the silly name of the properties. The key change is the madoobry and using it when calling readFeatures.

Upvotes: 1

Related Questions