ReactGIS

Layers

All Layers currently in OpenLayers 10.6.0 are available as React components. (minus Group)

Using Layers

There are two different ways you can use layers, you can use both at the same time if required:

  1. React components provided by ReactGIS.
  2. Standard OpenLayers way.

React Components

Below is how you add layers to the Map with React components, see Available Layers for all layers.

Layers require a name and source. Other options from the underlying OpenLayers layer type are available, refer to the API Reference for the specific layer component.

app.tsx
import { OSM } from "ol/source";
import VectorSource from "ol/source/Vector";
import Style from "ol/style/Style";

import { TileLayer, VectorLayer } from "@react-gis/openlayers/layer";
import { Map } from "@react-gis/openlayers/map";

const App = () => (
  <Map
    mapOptions={{
      view: { center: [134, -28], zoom: 4 },
    }}
    style={{ height: "100%", width: "100%" }}
  >
    <TileLayer name="osm" source={new OSM()} />

    <VectorLayer name="markers" source={new VectorSource({})} style={new Style({})} />
  </Map>
);

MapOptions

You can fallback to the standard OpenLayers way and add layers directly to MapOptions if required.

app.tsx
import OlTileLayer from "ol/layer/Tile";
import { OSM } from "ol/source";

import { Map } from "@react-gis/openlayers/map";

const App = () => (
  <Map
    mapOptions={{
      layers: [new OlTileLayer({ source: new OSM() })], 
      view: { center: [134, -28], zoom: 4 },
    }}
    style={{ height: "100%", width: "100%" }}
  />
);

Available Layers

Edit on GitHub

Getting Started

Previous Page

Custom Layer

Next Page

On this page

Using LayersReact ComponentsMapOptionsAvailable LayersUseful Links