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 Layer from '@planet/maps/layer/Vector.js';
import Map from '@planet/maps/Map.js';
import React, {useState} from 'react';
import Source from '@planet/maps/source/Vector.js';
import View from '@planet/maps/View.js';
import {useGeographic as geographic} from 'ol/proj.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;