Skip to main content

​
Overview

VectorSource is a map content source that supplies tiled vector data in Mapbox Vector Tile format 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 { VectorSource } from '@rnmapbox/maps';

​
Basic Usage

import { MapView, VectorSource, LineLayer } from '@rnmapbox/maps';

function MyMap() {
  return (
    <MapView style={{ flex: 1 }}>
      <VectorSource
        id="vector-source"
        url="mapbox://mapbox.mapbox-streets-v8"
      >
        <LineLayer
          id="line-layer"
          sourceLayerID="road"
          style={{
            lineColor: '#3887be',
            lineWidth: 2,
          }}
        />
      </VectorSource>
    </MapView>
  );
}

​
Using Tile URL Templates

<VectorSource
  id="third-party-source"
  tileUrlTemplates={[
    'https://example.com/vector-tiles/{z}/{x}/{y}.pbf'
  ]}
  minZoomLevel={0}
  maxZoomLevel={14}
>
  <LineLayer id="line-layer" style={{ lineColor: 'blue' }} />
</VectorSource>

​
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.Example: "mapbox://mapbox.mapbox-streets-v8"
​
tileUrlTemplates
string[]
An array of tile URL templates. If multiple endpoints are specified, clients may use any combination of endpoints.Example: ["https://example.com/vector-tiles/{z}/{x}/{y}.pbf"]
​
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
​
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.
​
onPress
(event: OnPressEvent) => void
Source press listener, gets called when a user presses one of the children layers only if that layer has a higher z-index than another source layers.The event object contains:
  • features - Array of GeoJSON features that were pressed
  • coordinates - The geographic coordinates of the press
  • point - The screen point of the press
​
hitbox
{ width: number; height: number }
Overrides the default touch hitbox (44x44 pixels) for the source layers.
  • width - Width of hitbox in pixels
  • height - Height of hitbox in pixels
​
children
React.ReactElement | React.ReactElement[]
Child layer components (e.g., LineLayer, FillLayer) that will use this source.

​
Methods

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

Build docs developers (and LLMs) love

Get started for freeTalk to us