Nuxt Leaflet, change tile layer requests incorrect tiles

I am using Nuxt Leaflet, and I have not figured out how to change the tile layer. I have tried multiple different approaches, and they all result with not requesting the proper tiles for the changed layer.

Here is an example:

<l-map
  id="maps-lmap"
  ref="lmap"
  style="width:100%; height:100%"
  :zoom="mapZoom"
  :center="mapCenter"
  :options="mapOptions"
  :min-zoom="minZoom"
  :max-zoom="maxZoom"
  @update:center="mapCenterUpdate"
  @update:zoom="mapZoomUpdate"
  @update:bounds="mapBoundsUpdate"
>
  <l-tile-layer
    :url="mapTileUrl"
    :attribution="mapAttribution"
    :tile-size="512"
    :options="{'zoomOffset':-1}"
  />
</l-map>

If I change the mapTileUrl value to a different url, it requests the following tile urls: https://wc-maps.s3.amazonaws.com/map-tiles-no-ocean/-1/0/0.png

If I do a conditional tile layer like this, I get the same result:

<template v-if="mapType === typeA">
  <l-tile-layer
    :url="tileUrlA"
    ...
  >
  </l-tile-layer>
</template>
<template v-else>
  <l-tile-layer
    :url="tileUrlB"
    ...
  >
  </l-tile-layer>
</template

I have also tried using L object to add the new tile layer, and still get the same result. Anyone know why it is not requesting the proper tile urls?

Solution

It looks like your initial mapTileUrl points to tiles with specific size and mapping, which require adjustment of the Leaflet Tile Layer options tileSize and zoomOffset as described here: Street labels in Mapbox Tile Layer too small

However it seems that the new URL's you have tried do not need this specific adjustment: simply remove those options when using these URL's, or use their default values (respectively 256 px and 0 offset). Otherwise they end up requesting incorrect tiles, possibly non existent.