Skip to main content

​
Overview

RasterSource is a map content source that supplies raster image tiles to be shown on the map. The location of and metadata about the tiles are defined either by an option dictionary or by an external file that conforms to the TileJSON specification.

​
Import

import { RasterSource } from '@rnmapbox/maps';

​
Basic Usage

import { MapView, RasterSource, RasterLayer } from '@rnmapbox/maps';

function MyMap() {
  return (
    <MapView style={{ flex: 1 }}>
      <RasterSource
        id="raster-source"
        tileUrlTemplates={[
          'https://example.com/tiles/{z}/{x}/{y}.png'
        ]}
        tileSize={256}
      >
        <RasterLayer id="raster-layer" style={{ rasterOpacity: 0.8 }} />
      </RasterSource>
    </MapView>
  );
}

​
Using TileJSON URL

<RasterSource
  id="satellite-source"
  url="https://example.com/tiles.json"
>
  <RasterLayer id="satellite-layer" />
</RasterSource>

​
With Source Bounds

<RasterSource
  id="bounded-source"
  tileUrlTemplates={['https://example.com/tiles/{z}/{x}/{y}.png']}
  sourceBounds={[-180, -85, 180, 85]}
  minZoomLevel={0}
  maxZoomLevel={18}
>
  <RasterLayer id="layer" />
</RasterSource>

​
Props

​
id
string
required
A string that uniquely identifies the source.Default: Mapbox.StyleSource.DefaultSourceID
​
existing
boolean
The id refers to an existing source in the style. Does not create a new source.
​
url
string
A URL to a TileJSON configuration file describing the source’s contents and other metadata.
​
tileUrlTemplates
string[]
An array of tile URL templates. If multiple endpoints are specified, clients may use any combination of endpoints.Example: ["https://example.com/raster-tiles/{z}/{x}/{y}.png"]
​
minZoomLevel
number
An unsigned integer that specifies the minimum zoom level at which to display tiles from the source. The value should be between 0 and 22, inclusive, and less than maxZoomLevel, if specified.Default: 0
​
maxZoomLevel
number
An unsigned integer that specifies the maximum zoom level at which to display tiles from the source. The value should be between 0 and 22, inclusive, and greater than minZoomLevel, if specified.Default: 22
​
tileSize
number
Size of the map tiles. Mapbox URLs default to 256, all others default to 512.
​
tms
boolean
Influences the y direction of the tile coordinates. When true, the y axis is inverted (TMS scheme).
​
attribution
string
An HTML or literal text string defining the buttons to be displayed in an action sheet when the source is part of a map view’s style and the map view’s attribution button is pressed.
​
sourceBounds
number[]
An array containing the longitude and latitude of the southwest and northeast corners of the source’s bounding box in the following order: [sw.lng, sw.lat, ne.lng, ne.lat].When this property is included in a source, no tiles outside of the given bounds are requested by Mapbox GL.
​
children
React.ReactElement | React.ReactElement[]
Child layer components (typically RasterLayer) that will use this source.

​
Methods

RasterSource inherits methods from AbstractSource. Use a ref to access these methods.

Build docs developers (and LLMs) love

Get started for freeTalk to us