Version 24.0.0 Upgrade Notes

OpenLayers Version 9

• map.forEachLayerAtPixel was removed, instead map.getAllLayers().filter(l => l.getData(pixel)) can be used
• The type of SourceVector was changed and accepts a geometry type instead of a feature type. So instead of SourceVector<Feature<Geometry>>, one can now use SourceVector<Geometry>.
• For further changes see Upgrade Notes of OpenLayers

Ant-Design Version 5

• iconName and pressedIconName are removed from the buttons. Instead an icon can now be passed directly.

old

<Button iconName="info-circle" />

new

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';

<Button icon={<FontAwesomeIcon icon={faInfoCircle} />} />

• The name prop of the buttons now is value
• For drawers and modals the visible prop is deprecated and now is named open
• For design changes the ConfigProvider can be used to customize the theme.

<ConfigProvider
  theme={{
    // if you want to style the react-geo buttons via the theme you have to enable css variables
    cssVar: true,
    // component specific changes
    Component: {
      Button: {
        defaultColor: '#000000',
        borderRadius: 2
      }
    },
    // global changes
    token: {
      colorPrimary: '#00b96b',
    },
  }}
>

• To adjust the language, use the locale property of the ConfigProvider. !IMPORTANT! The import from es instead of lib has to be used.

import deDE from 'antd/es/locale/de_DE';
<ConfigProvider
  locale={deDE}
>

react-geo internals

• DigitizeButton is removed and has to be replaced by DrawButton, ModifyButton, CopyButton and/or DeleteButton. See https://terrestris.github.io/react-geo/docs/latest/#/Components/Buttons/DrawButton for an example.
• Bothe the WfsField and NominatimField have been replaced by a generic component and a generic hook in react-util. It works like this now:

const wfsSearchFunction = useMemo(() => createWfsSearchFunction({
  baseUrl: 'https://ows-demo.terrestris.de/geoserver/osm/wfs',
  featureTypes: ['osm:osm-country-borders'],
  featureNS: 'osm',
  maxFeatures: 3,
  attributeDetails: {
    'osm:osm-country-borders': {
      name: {
        type: 'string',
        exactSearch: false,
        matchCase: false
      }
    }
  }
}), []);

const wfsGetValue = useCallback(f => f.properties.name, []);

return <SearchField
  searchFunction={wfsSearchFunction}
  getValue={wfsGetValue}
  placeholder="Type a countryname in its own language…"
/>;

See https://terrestris.github.io/react-geo/docs/latest/#/Components/Fields/SearchField for a nominatim example. The useSearch hook from react-util could also be used directly in a customized search component, see https://github.com/terrestris/react-util/releases/tag/v7.0.0.

• The mappify, loadify, isVisibleComponent HOCs as well as the MapProvider class were removed. The MapProvider moved to react-util, the rest was removed in favor of hooks.
• Panel, Window, Titlebar, Toolbar and UserChip components do not existing anymore, as these are not geo related. Copy the code in you repo if needed.
• The pressed state of the ToggleButton is controlled now. You always have to manage state outside the ToggleButton:

old

return <ToggleButton
  onToggle={()=>{}}
>
  Toggle me
</ToggleButton>

new

  const [pressed, setPressed] = React.useState();

  return (
    <ToggleButton
      pressed={pressed}
      onChange={() => setPressed(!pressed)}
    >
      Toggle me
    </ToggleButton>
  );

old

<ToggleGroup
  allowDeselect={true}
  selectedName="one"
>
  <ToggleButton
    name="one"
    onToggle={()=>{}}
  />
  <ToggleButton
    name="two"
    onToggle={()=>{}}
  />
  <ToggleButton
    name="three"
    onToggle={()=>{}}
  />
</ToggleGroup>

new

const [selected, setSelected] = React.useState();

return (
  <ToggleGroup
    selected={selected}
    onChange={(evt, value) => {
      setSelected(value)
    }}
  >
    <ToggleButton
      value="one"
    />
    <ToggleButton
      value="two"
    />
    <ToggleButton
      value="three"
    />
  </ToggleGroup>
);

• The input of the render function of the CoordinateInfo component is no longer grouped by featureType, but returns an object for each feature instead. Said object contains the feature, the layer and the feature type.

If you need any processing on the input, it is better to use the useCoordinateInfo hook directly. This is because you cannot use hooks, for example useMemo, inside the render function. The CoordinateInfo component is a very shallow wrapper so it is not much work.

So if you need the grouping, you can do the following:

import { groupBy, mapValues } from 'lodash';

const MyCoordinateInfo: React.FC = () => {
  const { features } = useCoordinateInfo();
  const groupedAndMapped = useMemo(() => {
    const grouped = groupBy(features, 'featureType');
    return mapValues(grouped, results => results.map(r => r.feature));
  }, [features]);

  return ...
};

• The grids have now more similar props and some props of other components have been removed and added as well, these can be found via typescript typechecking.
• See the CHANGELOG for further details.