Layer providers

[Yves852]

Hello.

I'm trying to use leaflet-providers to get a less detailed map on zoomed cities but right now I'm failing doing it. Leaflet Providers previews. The example below is "OpenStreetMap.CAT"

Does This module support layer providers? How can i proceed to do it?

   <ClientOnly>
       <LMap
          ref="map"
          :zoom="17"
          :center="[<foo>, <bar>]"
          :use-global-leaflet="true"
          @ready="onMapReady"
        >
        <!-- Not working --> 
         <LTileLayer
            url="https://tile.openstreetmap.bzh/ca/{z}/{x}/{y}.png'"
            attribution="&copy; <a href=&quot;https://www.openstreetmap.org/copyright&quot;>OpenStreetMap</a> contributors, Tiles courtesy of <a href=&quot;https://www.openstreetmap.cat&quot; target=&quot;_blank&quot;>Breton OpenStreetMap Team</a>"
            layer-type="base"
             name="OpenStreetMap.CAT"
          />
         <!-- Working, base layer -->
          <!-- <LTileLayer
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            attribution="&amp;copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors"
            layer-type="base"
            name="OpenStreetMap"
          /> -->
        </LMap>
      </ClientOnly>

@vue-leaflet_vue-leaflet.js?v=d1508010:57 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'Default')
    at qe (@vue-leaflet_vue-leaflet.js?v=d1508010:57:12)
    at async @vue-leaflet_vue-leaflet.js?v=d1508010:1405:7
    qe @ @vue-leaflet_vue-leaflet.js?v=d1508010:57

// package.json
  "dependencies": {
    "leaflet-providers": "^2.0.0",
    "leaflet.markercluster": "^1.5.3",
  },
  "devDependencies": {
    "@nuxtjs/leaflet": "^1.2.3",
    "nuxt": "3.13.1",
  },

Thanks for your help.

[Yves852]

My bad it seems the layer works perfectly when use-global-leaflet is set to false. The bug I encountered is about useLMarkerCluster I believe.

[Gugustinette]

Marker cluster support is very unstable 😕

Also, using legacy leaflet libraries can be hard combined with VueLeaflet/NuxtLeaflet, so there are chances you would prefer using Leaflet directly for simplicity.

[Yves852]

Sorry for the late answer. I use a simple way to add a few (right now just one) markers like the following:

       <LMap
          :zoom="12"
          :min-zoom="6"
          :center="..."
          :use-global-leaflet="false"
          class="z-10"
        >
          <!-- Stadia_AlidadeSmooth layer -->
          <LTileLayer
            url="https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png"
            attribution="&copy; <a href=&quot;https://www.stadiamaps.com/&quot; target=&quot;_blank&quot;>Stadia Maps</a> &copy; <a href=&quot;https://openmaptiles.org/&quot; target=&quot;_blank&quot;>OpenMapTiles</a> &copy; <a href=&quot;https://www.openstreetmap.org/copyright&quot;>OpenStreetMap</a> contributors"
            layer-type="base"
            name="Stadia_AlidadeSmooth"
          />
          <!-- Markers -->
          <LMarker
            v-for="marker in localisations"
            :key="marker.title"
            :lat-lng="marker.loc"
          >
            <LPopup>
              <h2 class="mb-5 text-lg font-medium">
                {{ marker?.title }}
              </h2>
              <div v-html="marker?.description" />
            </LPopup>
          </LMarker>
        </LMap>

I could also remove leaflet.markercluster from the deps.