Layer

This component allows apps to create a map layer using React.

import * as React from 'react';
import ReactMapGL, {Layer} from '@goongmaps/goong-map-react';

const parkLayer = {
  id: 'landuse_park',
  type: 'fill',
  source: 'base',
  'source-layer': 'landuse',
  filter: ['==', 'class', 'park']
};

function App() {
  const [viewport, setViewport] = React.useState({
    longitude: -122.45,
    latitude: 37.78,
    zoom: 14
  });
  const [parkColor, setParkColor] = React.useState('#8fa');

  return (
    <ReactMapGL {...viewport} width="100vw" height="100vh" onViewportChange={setViewport}>
      <Layer {...parkLayer} paint={{'fill-color': parkColor}} />
    </ReactMapGL>
  );
}

Properties

The props provided to this component should be conforming to the Goong layer specification.

When props change shallowly, the component will perform style diffing to update the layer. Avoid defining constant objects/arrays inline may help performance.

Identity Properties

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

id (String)

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

type (String, required)

Type of the layer.

Options

beforeId (String)

The ID of an existing layer to insert this layer before. If this prop is omitted, the layer will be appended to the end of the layers array. This is useful when using dynamic layers with a map style from a URL.

Note that layers are added by the order that they mount. They are NOT reordered later if their relative positions in the JSX tree change. If dynamic reordering is desired, you should manipulate beforeId for consistent behavior.

source (String)

source is required by some layer types in the Goong style specification. If <Layer> is used as the child of a Source component, this prop will be overwritten by the id of the parent source.

Source

layer.js