Vector Layers

This example shows two vector layers using data from GeoJSON sources. The layers are given a style prop that controls the styling of vector features. The sources are given url and format options for fetching and parsing the data.

The style for the urban areas vector layer can be controlled by clicking on the "gray" and "red" buttons. The useState hook is used to maintain the fill color for this layer, and clicking on the buttons updates this state.

import GeoJSON from 'ol/format/GeoJSON.js';
import {useGeographic as geographic} from 'ol/proj.js';
import React, {useState} from 'react';
import Map from '@planet/maps/Map.js';
import View from '@planet/maps/View.js';
import Layer from '@planet/maps/layer/Vector.js';
import Source from '@planet/maps/source/Vector.js';

geographic();

const format = new GeoJSON();

function Vector() {
  const [urbanColor, setUrbanColor] = useState('red');

  return (
    <>
      <Map>
        <View options={{center: [15, 45], zoom: 4.5}} />
        <Layer
          style={{
            'fill-color': 'lightgray',
          }}
        >
          <Source
            options={{
              url: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_110m_ocean.geojson',
              format,
            }}
          />
        </Layer>
        <Layer
          style={{
            'fill-color': urbanColor,
          }}
        >
          <Source
            options={{
              url: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_urban_areas.geojson',
              format,
            }}
          />
        </Layer>
      </Map>
      <div style={{position: 'absolute', top: '1rem', right: '1rem'}}>
        <button onClick={() => setUrbanColor('red')}>red</button>
        <button onClick={() => setUrbanColor('gray')}>gray</button>
      </div>
    </>
  );
}

export default Vector;