schlunsen/nuxt-leaflet

Changing Styles - Implementing custom styling

hvitis opened this issue · 2 comments

Hello!

Just wanted to ask if anybody has changed styling for Leaflet map. If so could you give me a clue how do I do that with nuxt module?

Thank you

I think you are talking about map tiling

you can find tiling providers here: http://leaflet-extras.github.io/leaflet-providers/preview/
All the providers have a link like this : https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png
you need to set it in your URL attribute like in the code below:

  <div id="map-wrap">
    <client-only>
      <l-map :zoom="4" :center="[55, 20]">
        <l-tile-layer
          style="height: 500px; width: 100%"
          url="https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png"
          :options="{ maxZoom: 18, minZoom: 4 }"
        />
      </l-map>
    </client-only>
  </div>

Answer by @Evaldas-B works perfectly fine. @schlunsen you can close this issue.