zoom in zoom Out error : Attempted to load an infinite number of tiles

[bobwatcherx]

i use vue 3 , leaflet can be seen in the browser, but there is a problem when zooming in and zooming out an error appears like this

Uncaught Error: Attempted to load an infinite number of tiles _update GridLayer.js:665 _setView GridLayer.js:574 _resetView GridLayer.js:530 fire Events.js:195 _move Map.js:1231 _resetView Map.js:1186 setView Map.js:206 setZoom Map.js:218 zoomOut Map.js:232 _zoomOut Control.Zoom.js:78 handler DomEvent.js:108 addOne DomEvent.js:135 on DomEvent.js:34 _createButton Control.Zoom.js:96 onAdd Control.Zoom.js:45 addTo Control.js:70 addControl Control.js:137

Control.Zoom.js:137 callInitHooks Class.js:81 initialize Map.js:156 NewClass Class.js:24 createMap

[den-kar]

Had the error message in a Nuxt3 setup. Fixed it by setting min-zoom and max-zoom attributes on <l-map ..>:

<template>
  ...
  <l-map
    :center="center"
    :zoom="16"
    :min-zoom="3"
    :max-zoom="19"
    :zoom-animation="true"
    :useGlobalLeaflet="false"
  >
    <l-tile-layer :url="url" :attribution="attribution" layer-type="base" />
    <l-marker :lat-lng="center" key="marker" />
  </l-map>
  ...
</template>

<script setup lang="ts">
const center = [40.761077, -73.88];
const url = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
const attribution = '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors';
</script>

Source Example (with solved other issue)

[mikeu]

Thanks for reporting this @den-kar ! This appears to be the same as vue-leaflet#244, which resolves the issue so that you no longer need to supply min and max zoom values if you're happy with Leaflet's defaults. Please let me know if you still encounter it with the latest version of @vue-leaflet.

[SomilaTshapu1]

Thanks @den-kar This was helpful it resolved the issue I had