openlayers | An R Interface to OpenLayers | Map library

I have the following main.ts file in Vue3:

In a web map application, I am trying to render a GeoTIFF file as an overlay layer on a OSM layer using OpenLayers 6. The layer is rendered on the exact location and it seems fine. Here is the screenshot of my results:

But if I zoom in, in some areas I could see smooth (simplified) edges which is not what I want:

Here is my code:

I'm new to Openlayers and have little experience with leaflet. A GeoJSON which worked in leaflet is at the completly wrong place (little red dot)

I can understand that it has something to do with projection, but as i'm new i could not find a working projection. As the GeoJSON worked perfectly in leaflet, i'm assuming its EPSG:3857 the file can be found here

and if you zoom very far in, it is projected

I'm using OpenLayers to draw a UK Ordnance Survey map. I have working examples, but they use a less secure method of accessing the UKOS servers by giving a key in the URL, whereas I'd like to use the more secure OAuth2 arrangement instead. To this end, I already have a CGI script querying the servers to get a session token, and returning this as JSON. The problem is making the map drawing page WAIT for its return, as follows:

I have noticed that OpenLayers will not "load" source unless it is assigned to a layer which is assigned to map.

This code does console.log() with number of features in a KML layer:

I am writing an application using osm in Openlayers. I'm having trouble adjusting the direction. I determine the direction of the device. Keeping the icon fixed and rotating the map shows the ridiculous places. However, using the device's orientation, it only shows the right place when you rotate the icon. It may be related to the first aspect of the icon, but I couldn't solve the problem. How can I solve this problem?

I'm trying to replicate the "singleselect-hover" feature in this example from the OpenLayers site.

When I tried to use this implementation, the hit detection was very poor with vtLayer.getFeatures(event.pixel). The documentation for the function states:

The hit detection algorithm used for this method is optimized for performance, but is less accurate than the one used in map.getFeaturesAtPixel()

Indeed, when I switched to map.getFeaturesAtPixel, the performance increased, but the features still does not work entirely as expected.

When I move my pointer over a vector boundary from the outside, it (usually) behaves as expected:

However, when I move to an adjacent boundary and then back, the feature no longer works:

I have geoserver (v2.18.1) serving up MapBox Vector tiles. It works nicely and the data is coming back and rendering on the client. I have the MBTiles plugin installed.

The issue I have is that the protobuf responses containing the date with each tile are very large in size. Some are over 2mb - even with GZip compression turned on. When rendering in OpenLayers the application starts to bog down - not to mention the bandwidth usage.

I've noticed that other online services are (i.e. https://api.maptiler.com) have tile sizes under 200kb. That's a massive difference.

Is there some way to configure Geoserver to filter the data returned to the client based on the zoom level? For example, exclude place names at low zoom levels. I've tried applying an MB Style document but that didn't seem to work.

Is it possible to do a server side filter on the Vector data before returning it to the client?

I am trying to create a for loop that at each iteration updates the params of an OpenLayers map and once it is renderedcomplete it extracts the context of the mapcanvas and adds it to a GIF object. I need these to run synchronously as to always allow the map and layers to rendered and only then for the context to be added. My hacky solution at the moment is to use a fixed time setInterval, but as suggested in this question I should use async/await/Promises. My question is how would I go about wrapping my functions in a Promise and ensure they execute in a sequence while maintainning access to the context (this) of the vue app?

My for loop would look something like :