Is there a way to prevent the openlayers (4) map from redrawing when overflowing at the edges?

At the moment, my map keeps redrawing itself when I overflow the view, as shown in the image here:

https://i.sstatic.net/xpyiP.png

The countries displayed on the map are represented by simple geojson polygons.

However, I want the map to stay fixed and not redraw no matter how much I zoom out.

I have tried adjusting settings like extent in the view, 

minResolution, maxResolution, min-/maxZoom
, but nothing seems to be working.

This is the current configuration for the view (although I have experimented with other options as well):

new View({
        center: proj.fromLonLat([6.131935, 49.611622]),
        zoom: 4,
        projection: 'EPSG:3857',
        minZoom: 0,
        maxZoom: 19,
        minResolution: 1024,
        maxResolution: 4096,
        extent: proj.get('EPSG:3857').getExtent()
    });
typescriptopenlayers

Answer №1

To prevent data duplication when zoomed out, the source level employs the wrapX attribute.

If we refer to the OL example showcasing GeoJson data, the following script can be used:

var vectorSource = new ol.source.Vector({
  wrapX:false,
  features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The 'ngModel' property cannot be bound to a 'textarea' element because it is not recognized as a valid property

When I run Karma with Jasmine tests, I encounter the following error message: The issue is that 'ngModel' cannot be bound since it is not recognized as a property of 'textarea'. Even though I have imported FormsModule into my app.modu ...

angulartypescriptjasminekarma-runner

What is the rationale behind TypeScript's decision to implement two checks for its optional chaining and null-coalescing operators during compilation?

What is the reason behind the way the TypeScript compiler translates its optional chaining and null-coalescing operators, found here, from: // x?.y x === null || x === void 0 ? void 0 : x.y; // x ?? y x !== null && x !== void 0 ? x : y as opposed ...

typescriptlanguage-design

Creating dynamic components with constructor parameters in Angular 9

Having trouble passing a value to the constructor in the component generation code. Check out the original code here: https://stackblitz.com/edit/angular-ivy-tcejuo private addComponent(template: string) { class TemplateComponent { @ViewChild( ...

javascriptangulartypescriptwebcomponents

I've tried using a ControlValueAccessor, but for some reason the value isn't getting passed to the form

Currently, I am experimenting with reactive forms in Angular, and I'm encountering difficulties with updating the form from custom components. As an example, take a look at the date-input component created using flatpickr in the linked Plunker demo. ...

angulartypescriptflatpickr

Utilize devextreme for uploading files

Currently, I am trying to implement an upload document feature using Dev-Extreme, but I keep encountering an error https://i.sstatic.net/dLxWx.png onFileUpload(event){ this.file = event.target.files[0] } <dxi-column [showInColumnChooser]="fa ...

angulartypescriptdevextreme

Move on to a different screen in a React Component once the data has been fetched

Currently, I am delving into the world of React and TypeScript and attempting to utilize "react-router-dom" in order to create a login component that will interact with my backend server. Essentially, my goal is to develop a "Login" class that, upon form ...

javascriptreactjstypescriptreact-router

"Despite the inability to use the clear input field function in Angular, users can still effectively clear

Why does the X button not clear and refresh the field when clicked, but using backspace does? I want it to clear when the X button is clicked. <mat-form-field appearance="standard" fxFill> <mat-label style="font-size: 12 ...

angulartypescript

Initialization of an empty array in Typescript

My promises array is structured as follows: export type PromisesArray = [ Promise<IApplicant> | null, Promise<ICampaign | ICampaignLight> | null, Promise<IApplication[]> | null, Promise<IComment[]> | null, Promise<{ st ...

javascripttypescriptpromise

Discovering the array item by its ID using Angular 2 with Typescript

Hey everyone, I'm currently working with asp.net mvc 5 and running into an issue. When attempting to retrieve an object by its id, it keeps returning undefined. The strange thing is that the objects display fine when checking console.log(this.vtypes). ...

arraysangulartypescript

How can Observables be designed to exhibit both synchronous and asynchronous behavior?

From: Understanding the Contrasts Between Promises and Observables In contrast, a Promise consistently operates asynchronously, while an Observable can function in synchronous or asynchronous manners. This presents the opportunity to manipulate code in ...

javascriptangulartypescriptasynchronousrxjs

What is the solution for resolving this Angular issue: Expected argument expression.ts(1135)?

While following a CRUD tutorial, I encountered an issue with the code. Even though I have verified that my code matches the tutorial's code, I am getting an error message saying "Argument expression expected. ts(1335)" in the submit method onSubmit(). ...

angulartypescriptvisual-studio-codeangular7crud

Associative TypeScript Arrays

I'm attempting to organize reservations based on business ID in order to achieve a specific end result. Here is the desired output: [ [businessID1] => [Object1,Object2, Object3], [businessID2] => [Object1,Object2], [businessID3] => [Obje ...

javascriptangulartypescriptionic-framework

one-time occurrence of $mdToast injection within a parent class

Seeking advice on how to efficiently place a single instance of $mdToast (from Angular Material) into a base class (Typescript). In my UI, I have five tabs with separate controller instances and it seemed logical to centralize the $mdToast declaration in a ...

angularjstypescriptangular-material

Retrieve the most recent data selected from a dropdown menu upon clicking the back button while utilizing Angular15

I am new to Angular and could really use some assistance with a problem I'm facing. Situation: I'm currently working on angular15 and have implemented a dropdown list. When selecting an option from the first dropdown, it populates values in the ...

angulartypescript

Can one validate a single route parameter on its own?

Imagine a scenario where the route is structured as follows: companies/{companyId}/departments/{departmentId}/employees How can we validate each of the resource ids (companyId, departmentId) separately? I attempted the following approach, but unfortunate ...

javascriptnode.jstypescriptnestjsclass-validator

A helpful guide to adjusting the cursor placement within a contenteditable div using React

I am developing a custom text editor using a contenteditable div. Each time a user modifies the text inside it, I aim to enclose all the new text with a strong element and update the div's innerHTML accordingly. Here is what I have attempted (utilizi ...

javascripthtmlreactjstypescriptcontenteditable

What is the best way to transfer the userId from the browser to protractor?

Using *ngFor in my angular2 component to render users has been successful. <ul> <li *ng-for="let user of users"> <input [(ng-model)]="user.name"> <button (click)="remove(user._id)">Remove</button> ...

javascriptnode.jsangulartypescriptprotractor

Is it possible to duplicate a response before making changes to its contents?

Imagine we are developing a response interceptor for an Angular 4 application using the HttpClient: export class MyInterceptor implements HttpInterceptor { public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<an ...

javascriptangulartypescript

Attempting to integrate WebdriverIO into an Angular Electron application

Context: Currently, I am in the process of implementing the fundamental WebdriverIO example within an Angular Electron App. My application is built on the foundation of the Angular Electron Boilerplate. To set up, I have installed webdriverio and @types/we ...

angulartypescriptelectronwebdriver-io

Serialising and deserialising TypeScript types in local storage

I'm currently working on a Typescript application where I store objects using local storage for development purposes. However, I've run into some trouble with deserialization. Specifically, I have an object called meeting of type MeetingModel: ...

jsontypescriptlocal-storage