Leafletjs circle turning oval the larger it goes

Question

I am using Leafletjs in Nuxt by using a NPM package. Thus I am using a wrapper to use Leafletjs in Nuxt.

The problem I have now is with this piece of code:

<l-map
  :zoom="4"
  :center="[0, 0]"
  :max-zoom="6"
  :min-zoom="3"
  :options="{ attributionControl: false }"
  @mousedown="mouseMovClick($event)"
>
    <l-circle
      :lat-lng="[markerPosition.lat, markerPosition.lng]"
      :radius="100000"
      color="rgba(76, 211, 40, 0.9)"
      :fill="false"
      :weight="2"
    />
    
    <l-circle
      :lat-lng="[markerPosition.lat, markerPosition.lng]"
      :radius="200000"
      color="rgba(76, 211, 40, 0.9)"
      :fill="false"
      :weight="2"
    />
    
    <l-circle
      :lat-lng="[markerPosition.lat, markerPosition.lng]"
      :radius="300000"
      color="rgba(76, 211, 40, 0.9)"
      :fill="false"
      :weight="2"
    />
</l-map>

For each "circle" that I add, they obviously become bigger. But they also become more "egg" shaped for some reason that I do not understand.

Does anyone know what could be wrong or what could be causing this anomaly?

EDIT: Found out, well, I think that the circle is bending to the shape of the earth. In my case I do not want it to bend. It should always remain a perfect circle. Is that possible?

I added this to my code:

import { CRS } from 'leaflet'

And inside my setup:

const crs = CRS.Simple

This seems to be working, but now I end up with this error:

window is not defined

var requestFn = window.requestAnimationFrame || getPrefixed('RequestAnimationFrame') || timeoutDefer

EDIT: I got it working (will update my post soon), but the next problem now is that the image names have changed and thus the map does not load anymore.

I am using this script to make the tiles in Photoshop.

https://github.com/bramus/photoshop-google-maps-tile-cutter

I have no options/ influence for the names. So, when I do not set the CRS the names are correct i.e. 5/4/2.png but when I use CRS the names change to i.e. 5/4/-2.png and those do not exist.

I also tried https://github.com/libvips/build-win64-mxe/releases but that gives me a weird output where all tiles will be unsorted somehow.

vips.exe dzsave IMAGE_LOCATION FOLDER_LOCATION --layout google --background 0E0E0E --centre --suffix .png[Q=100]

I think I have to, somehow, have to make sure that the map only starts and ends within these folders:

1/1/1.png up to 1/24/64.png
2/*/*
3/*/*
4/*/*
5/*/*
6/1/1.png up to 6/24/64.png

where all numbers are positive never negative. The same applies to the image names. Always positive numbers never negatives. The above reassembles my directory structure after tiling the images.

Also, another thing that happend is when I refresh my map, the markers look like they are in place, but the map itself has moved away to the bottom right for some reason. No clue why it shifted.