Nuxt Leaflet, change tile layer requests incorrect tiles

Question

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?

Answer 1

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.