Tiles & Attribution

Leaflet renders and controls the map, but it does not supply map imagery. Add a ScriptLeafletTileLayer for each raster tile service you use.

Choose a Tile Service

A tile URL usually contains {z}, {x}, and {y} placeholders:

<ScriptLeafletTileLayer
  url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
  :options="{
    maxZoom: 19,
    attribution: '&copy; <a href=&quot;https://www.openstreetmap.org/copyright&quot;>OpenStreetMap contributors</a>',
  }"
/>

For production, check the service's traffic limits, caching rules, allowed use cases, privacy policy, and availability commitments. Some providers require an API key or account. Others offer downloadable tiles for self-hosting.

Keep the URL configurable so you can change providers without rewriting the map component:

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      mapTileUrl: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
    },
  },
})

<script setup lang="ts">
const config = useRuntimeConfig()
const tileAttribution = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'
</script>

<template>
  <ScriptLeafletTileLayer
    :url="config.public.mapTileUrl"
    :options="{ attribution: tileAttribution }"
  />
</template>

OpenStreetMap's Standard Tiles

OpenStreetMap data is open, but the standard tile servers are a donation-funded public service. They have no SLA and may block clients that break the tile usage policy.

When using tile.openstreetmap.org:

• Keep © OpenStreetMap contributors visible on the map.
• Use the official HTTPS tile URL and allow the browser to send its normal referrer.
• Respect HTTP caching headers. Do not force tiles to bypass the browser cache.
• Do not bulk download, prefetch areas, or add offline download features.

Normal browser-based map viewing follows the technical caching and identification requirements. A proxy, native client, or offline feature needs additional work and may need a different provider.

Attribution

Pass the provider's required attribution through the tile layer options. Leaflet combines attribution from active layers in its attribution control.

Do not cover the control with page UI or remove it. If your map uses several data or imagery sources, include the attribution required by each source.

Failure Fallback

Tile services can reject requests or become unavailable while the rest of the page still works. Keep essential locations in HTML and provide a useful error state:

<ScriptLeafletMap :center="[-37.8136, 144.9631]" :zoom="13">
  <template #error>
    <p role="alert">
      The map is unavailable. Use the location list to choose a store.
    </p>
  </template>
</ScriptLeafletMap>