dynamic scale line control on map

[TroyWeber-SAJ]

The SAJ Geomatics team has minimal standards on any SAJ maps. One of those is ensuring there is a scale. Openlayers has a scale line control. On the SAJ internal map, I have added this control. This code is in a scalecontrol.jsx and I import this into the map. The code I use:

// ScaleControl.jsx
import { useEffect } from 'react';
import PropTypes from 'prop-types';
import ScaleLine from 'ol/control/ScaleLine';

export default function ScaleControl({ map }) {
useEffect(() => {
if (!map) return;

const scaleLineControl = new ScaleLine({
  units: 'us',   // or 'imperial', 'us', 'nautical'
  bar: true,
  steps: 4,
  text: true,
  minWidth: 100,
});

map.addControl(scaleLineControl);

// Cleanup on unmount
return () => {
  map.removeControl(scaleLineControl);
};

}, [map]);
return null; // This component doesn't render anything visible itself
}

ScaleControl.propTypes = {
map: PropTypes.object
};

In the maps index.jsx, the scalecontrol.jsx is imported and rendered at the bottom left of the map.

{map && }