craiyon logo

Stylized map of Australia with a warm-to-cool gradient, filled with intricate geometric patterns.

Stylized map of Australia with a warm-to-cool gradient, filled with intricate geometric patterns.

import React, { useMemo } from 'react'; // AustraliaTempClansMap.jsx // A self-contained React component (Tailwind-ready) that renders a stylised map of // Australian states & territories, coloured by temperature and able to overlay // clan regions via GeoJSON (as semi-transparent pattern fills). // // Notes for the user: // - This is a visual / illustrative component, not a replacement for precise GIS. // - Supply `temperatures` as an object mapping state keys to numeric values (°C). // - Supply `clans` as an array of objects { id, name, geojson, color, pattern }. // The component expects geojson polygons in GeoJSON (FeatureCollection) format. // - If you don't have clan GeoJSON, you can supply simple polygon arrays matching // the simplified SVG coordinate system used here (see example `exampleClans`). // - The map is stylised for presentation and printing; replace the SVG paths with // more accurate geometries if you need geographic precision. export default function AustraliaTempClansMap({ temperatures = null, // { NSW: 18.5, VIC: 14.2, QLD: 22.1, WA: 20.0, SA: 18.9, TAS: 12.5, NT: 24.0, ACT: 13.5 } clans = null, // [{ id: 'yolngu', name: 'Yolngu', color: '#ff7b7b', geojson: {...}, pattern: 'diagonal' }, ...] width = 1000, height = 700, }) { // Default temperature sample values (annual mean °C) used if none provided const defaultTemps = { WA: 19.7, NT: 26.0, SA: 19.3, QLD: 22.0, NSW: 18.0, VIC: 12.5, TAS: 11.5, ACT: 13.2, }; const temps = temperatures || defaultTemps; // See more