UrlTemplateLayer

Example

Example Source Code

import React, { useEffect, useRef, useState } from 'react'
import ReactDOM from 'react-dom'
import { MbMap, MbUrlTemplateLayer } from '@mapbox-react/core'

const App = () => {
  const [mapCenter] = useState([116.3594627380371, 39.93632920085673])
  const [zoom, setZoom] = useState(10)

  return (
    <div className="map-wrapper">
      <MbMap center={mapCenter} zoom={zoom}>
        <MbUrlTemplateLayer url="https://api.maptiler.com/tiles/satellite-v2/{z}/{x}/{y}.jpg?key=XjFmKoe10YKDATQf4ZYg" />
      </MbMap>
    </div>
  )
}

ReactDOM.render(<App />, document.querySelector('#root'))

API

PROPS

Name	Description	Type	Default
id	Layer ID. A unique identifier for the layer.	string	-
url	Server 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	-
maxzoom	Maximum zoom level. The highest zoom level at which tiles are available. This corresponds to the highest resolution.	number	22
minzoom	Minimum zoom level. The lowest zoom level at which tiles are available. This corresponds to the lowest resolution.	number	0
show	Visibility of the layer. If true, the layer is displayed; if false, the layer is hidden.	boolean	true
scheme	Tile 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"
subdomains	Subdomains 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[]	-
extendSource	Additional 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

Name	Description	Parameters
onCreated	Initialization complete event	-

METHODS

Name	Description	Definition