Skip to content

UrlTemplateLayer

Example

Example Source Code
vue
<template>
  <div style="height: 400px" class="vw-full vh-full">
    <mb-map :zoom="2">
      <mb-url-template-layer
        url="https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=XjFmKoe10YKDATQf4ZYg"
      />
    </mb-map>
  </div>
</template>

<script lang="ts" setup></script>

API

PROPS

NameDescriptionTypeDefault
idLayer ID. A unique identifier for the layer.string-
urlServer URL. The base URL of the tile server. This URL is used to construct tile requests. It should include placeholders for tile coordinates (e.g., {x}, {y}, {z} for XYZ schemes or {col}, {row}, {level} for TMS schemes).string-
maxzoomMaximum zoom level. The highest zoom level at which tiles are available. This corresponds to the highest resolution.number22
minzoomMinimum zoom level. The lowest zoom level at which tiles are available. This corresponds to the lowest resolution.number0
showVisibility of the layer. If true, the layer is displayed; if false, the layer is hidden.booleantrue
schemeTile scheme of the data source. Specifies how tiles are organized and requested. Possible values are "xyz" (standard web map tiles) and "tms" (Tile Map Service).string: "xyz""tms"
subdomainsSubdomains for the URL. This is used for load balancing by distributing tile requests across multiple subdomains. If provided, the URL will be templated with {s} where the subdomain should be inserted (e.g., http://{s}.example.com/tiles/{z}/{x}/{y}.png). Can be a string or an array of strings.string / string[] / number[]-
extend-sourceAdditional source parameters. These are extra parameters that can be passed to the underlying tile source implementation. For example, {rasterSource: 'iserver'} might specify a custom raster source type. This should be a key-value object where keys and values are strings.IndexAny{}

EVENTS

NameDescriptionParameters
createdInitialization complete event-

SLOTS

NameDescription

METHODS

NameDescriptionDefinition