Progress

frontend/src/components/map/MapLegend.tsx

@@ -2,6 +2,7 @@ import { formatValue } from '../../lib/format';
 import { FEATURE_GRADIENT, DENSITY_GRADIENT, DENSITY_GRADIENT_DARK } from '../../lib/consts';
 import { gradientToCss } from '../../lib/utils';
 import { CloseIcon } from '../ui/icons/CloseIcon';
+import { TickerValue } from '../ui/TickerValue';
 
 export default function MapLegend({
   featureLabel,
@@ -50,8 +51,8 @@ export default function MapLegend({
       <div className="flex justify-between mt-1 text-warm-600 dark:text-warm-200">
         {mode === 'density' ? (
           <>
-            <span>{formatValue(range[0])}</span>
-            <span>{formatValue(range[1])}</span>
+            <TickerValue text={formatValue(range[0])} />
+            <TickerValue text={formatValue(range[1])} />
           </>
         ) : enumValues && enumValues.length > 0 ? (
           <>
@@ -60,8 +61,8 @@ export default function MapLegend({
           </>
         ) : (
           <>
-            <span>{formatValue(range[0])}</span>
-            <span>{formatValue(range[1])}</span>
+            <TickerValue text={formatValue(range[0])} />
+            <TickerValue text={formatValue(range[1])} />
           </>
         )}
       </div>

frontend/src/components/map/PropertiesPane.tsx

@@ -143,6 +143,7 @@ function PropertyLoadingSkeleton() {
 
 function PropertyCard({ property }: { property: Property }) {
   const price = getNum(property, 'Last known price', 'latest_price');
+  const estimatedPrice = getNum(property, 'Estimated current price');
   const pricePerSqm = getNum(property, 'Price per sqm', 'price_per_sqm');
   const floorArea = getNum(property, 'Total floor area (sqm)', 'total_floor_area');
   const rooms = getNum(
@@ -172,6 +173,14 @@ function PropertyCard({ property }: { property: Property }) {
           )}
         </div>
       )}
+      {estimatedPrice !== undefined && (
+        <div className="text-sm text-warm-600 dark:text-warm-400">
+          Est. value:{' '}
+          <span className="font-semibold text-teal-700 dark:text-teal-400">
+            £{formatNumber(estimatedPrice)}
+          </span>
+        </div>
+      )}
 
       <div className="mt-2 grid grid-cols-2 gap-x-4 gap-y-1 text-sm dark:text-warm-300">
         {property.property_type && (