source.md

Source

This component allows apps to create a map source using React. It may contain Layer components as children.

import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';

import * as React from 'react';
import Map, {Source, Layer} from 'react-map-gl';
import type {CircleLayer} from 'react-map-gl';
import type {FeatureCollection} from 'geojson';

const geojson: FeatureCollection = {
  type: 'FeatureCollection',
  features: [
    {type: 'Feature', geometry: {type: 'Point', coordinates: [-122.4, 37.8]}}
  ]
};

const layerStyle: CircleLayer = {
  id: 'point',
  type: 'circle',
  paint: {
    'circle-radius': 10,
    'circle-color': '#007cbf'
  }
};

function App() {
  return <Map
    mapLib={import('mapbox-gl')}
    initialViewState={{
      longitude: -122.4,
      latitude: 37.8,
      zoom: 14
    }}
    mapStyle="mapbox://styles/mapbox/streets-v9"
  >
    <Source id="my-data" type="geojson" data={geojson}>
      <Layer {...layerStyle} />
    </Source>
  </Map>;
}

import * as React from 'react';
import Map, {Source, Layer} from 'react-map-gl/maplibre';
import type {CircleLayer} from 'react-map-gl/maplibre';
import type {FeatureCollection} from 'geojson';

const geojson: FeatureCollection = {
  type: 'FeatureCollection',
  features: [
    {type: 'Feature', geometry: {type: 'Point', coordinates: [-122.4, 37.8]}}
  ]
};

const layerStyle: CircleLayer = {
  id: 'point',
  type: 'circle',
  paint: {
    'circle-radius': 10,
    'circle-color': '#007cbf'
  }
};

function App() {
  return <Map
    initialViewState={{
      longitude: -122.4,
      latitude: 37.8,
      zoom: 14
    }}
    mapStyle="https://api.maptiler.com/maps/streets/style.json?key=get_your_own_key"
  >
    <Source id="my-data" type="geojson" data={geojson}>
      <Layer {...layerStyle} />
    </Source>
  </Map>;
}

Properties

The props provided to this component should be conforming to the Mapbox source specification or CanvasSourceOptions.

When props change shallowly, the component will attempt to update the source. Do not define objects/arrays inline to avoid perf hit.

Once a <Source> is mounted, the following props should not change. If add/remove multiple JSX sources dynamically, make sure you use React's key prop to give each element a stable identity.

id: string {#id}

Unique identifier of the source. If not provided, a default id will be assigned.

type: string {#type}

Required. Type of the source.

generateId: boolean {#generateId}

Optional. Will generate IDs for each feature (useful for FeatureState handling)

Source

source.ts