PollutantCircles

A map component displaying pollutant concentration levels as circular markers.

📋 Overview

Property	Value
File	src/components/PollutantCircles.tsx
Type	React Functional Component
Author	UIP Team
Version	1.0.0

🎯 Purpose

• Display pollutant levels at monitoring stations
• Color-coded severity indicators
• Show specific pollutant concentrations
• Interactive popups with details

🚀 Usage

import { PollutantCircles } from '@/components/PollutantCircles';

function MapComponent() {
  return (
    <MapContainer>
      <PollutantCircles
        data={pollutantData}
        pollutant="PM2.5"
        visible={showPollutants}
      />
    </MapContainer>
  );
}

📦 Props

Prop	Type	Required	Default	Description
data	PollutantData[]	Yes	-	Pollutant readings
pollutant	'PM2.5' | 'PM10' | 'NO2' | 'O3'	No	'PM2.5'	Pollutant type
visible	boolean	No	true	Show/hide circles
radius	number	No	500	Circle radius (m)

🎨 Concentration Levels

Level	Color	PM2.5 (µg/m³)
Good	🟢 Green	0-12
Moderate	🟡 Yellow	12-35
Unhealthy Sensitive	🟠 Orange	35-55
Unhealthy	🔴 Red	55-150
Very Unhealthy	🟣 Purple	150-250
Hazardous	🟤 Maroon	250+

📖 Related Components

• AQIHeatmap - AQI heatmap
• WeatherOverlay - Weather layer
• TrafficMap - Map container

---

See the complete components reference for all available components.