A MapLibre + Terra Draw–powered geospatial planning tool that turns drawn land parcels into transparent, assumption-driven renewable energy capacity estimates.
Renewable energy site planning requires balancing multiple spatial constraints available land, environmental restrictions, grid proximity, and capacity potential. Traditional GIS tools are powerful but inaccessible to non-specialists. Simple mapping apps lack the domain-specific intelligence to translate geometries into actionable energy insights.
EnergySite Explorer bridges this gap: Draw a polygon, instantly see solar/wind potential in MW, detect overlaps with restricted zones, and calculate distance to grid infrastructure—all in your browser, with transparent assumptions you can adjust in real-time.
- Polygon Mode - Define land parcels with vertex snapping
- Circle Mode - Radial site planning with draggable radius
- Line Mode - Route planning for transmission lines
- Select Mode - Full vertex editing (drag, add midpoints, delete, rotate, scale)
- 📍 Center Markers - Visual pins at polygon/circle centroids
- Area Calculations - Hectares and square meters for land parcels
- Distance Measurements - Kilometers and meters for transmission routes
- Real-time Popups - Instant feedback on every drawn feature
- Solar Capacity Estimates - MW potential based on land area and configurable MW/ha assumptions
- Wind Capacity Estimates - MW potential with adjustable density factors
- Live Assumption Controls - Top-right panel to modify solar/wind MW/ha ratios
- Transparent Calculations - All capacity estimates recalculate when assumptions change
- Restricted Zone Detection - Automatic overlap analysis with:
- 🌳 Protected areas (e.g., national park buffers)
- 🏘️ Settlement zones (residential/urban areas)
- 🌊 Floodplains (environmental constraints)
- Visual Overlays - Semi-transparent constraint layers with color-coded boundaries
- Overlap Warnings - Percentage-based alerts in measurement popups
- Distance to Grid - Calculate proximity to nearest transmission/distribution lines
- Visual Grid Lines - Purple map overlay showing 132kV, 220kV, and 33kV infrastructure
- Real-world Context - Demonstrates that capacity without grid access is meaningless
- Node.js v16+ (recommended: v18 or v20)
- npm
# Clone the repository
git clone https://github.com/yourusername/energysite-explorer.git
cd energysite-explorer
# Install dependencies
npm install
# Start development server
npm run dev
The app will open at http://localhost:5173
npm run build
Output: dist/ directory ready for deployment
npm run preview
-
🖱️ Select Mode (Default)
- Click shapes to select
- Drag vertices to reposition
- Drag midpoints (◆) to add new vertices
- Click vertices to delete
- Drag shapes to move
- Use handles to rotate/scale polygons
-
▢ Polygon Mode
- Click to place vertices
- Double-click or click first vertex to close
- Auto-validates against self-intersections
-
─ Line Mode
- Click to place vertices
- Double-click to finish
- Useful for transmission line planning
-
○ Circle Mode
- Click to set center
- Click again to set radius
- Drag to reposition
-
⚙️ Assumption Controls (Top-right gear icon)
- Adjust Solar MW/ha (default: 0.5)
- Adjust Wind MW/ha (default: 0.1)
- All capacity estimates update live
-
🗑️ Clear All
- Removes all drawings from map
When you draw a polygon or circle, the popup shows:
Land Area
25.34 ha (253400.00 m²)
🔌 Distance to grid: ~3.2 km
⚠️ 15.3% overlaps Nairobi River Floodplain
☀️ Solar Potential
~12.67 MW
🌬️ Wind Potential
~2.53 MW
- Area - Calculated using Turf.js geodesic area
- Grid Distance - Nearest transmission/distribution line
- Overlap Warnings - % overlap with restricted zones
- Capacity - Based on your assumption settings
src/
├── components/
│ ├── MapView.tsx # Main map + Terra Draw orchestration
│ ├── DrawToolbar.tsx # Vertical tool selector
│ ├── AssumptionControls.tsx # MW/ha settings panel
│ ├── MeasurementPopup.tsx # Popup React components
│ ├── Tour.tsx # First-time user guide
│ └── tourSteps.ts # Tour step configuration
├── styles/
│ ├── MapView.css # Map and marker styling
│ ├── DrawToolbar.css # Toolbar styling
│ ├── AssumptionControls.css # Settings panel styling
│ ├── MeasurementPopup.css # Popup styling
│ └── Tour.css # Tour overlay styling
├── data/
│ ├── restrictedZones.ts # Mock constraint GeoJSON
│ └── gridInfrastructure.ts # Mock grid line GeoJSON
├── App.tsx # Root component
├── App.css # Global app styling
├── main.tsx # React entry point
└── index.css # CSS reset and globals
This tool demonstrates systems thinking in renewable energy planning:
- Not just geometry - MW estimates show economic feasibility
- Transparent assumptions - Users see and control MW/ha ratios
- Real constraints - Restricted zones and grid distance reflect planning reality
- Interactive learning - Adjust assumptions to see impact immediately
| Zone Type | Color | Meaning |
|---|---|---|
| 🌳 Protected Area | Green | National parks, wildlife buffers |
| 🏘️ Settlement | Red | Urban/residential zones |
| 🌊 Floodplain | Blue | Environmental flood risk areas |
- 132kV Transmission - Regional power evacuation
- 220kV Transmission - High-capacity backbone
- 33kV Distribution - Local delivery network
Distance to grid affects project economics—longer distances require costly new transmission infrastructure.
- 🌞 Solar Farm Siting - Find suitable land with low environmental impact and grid proximity
- 💨 Wind Farm Planning - Assess MW potential and constraint conflicts
- 🔌 Transmission Route Design - Plan new lines to connect generation sites
- 📊 Early-Stage Feasibility - Quick capacity estimates before GIS analysis
- 🎓 Educational Tool - Teach renewable energy planning principles
- 🗺️ Spatial Awareness - Understand how constraints shape project viability
- Export GeoJSON/Shapefile for GIS integration
- Import existing site boundaries
- Multi-user collaboration with cloud storage
- Real grid infrastructure data via OpenStreetMap
- Elevation analysis for terrain impact
- Solar irradiance layer integration
- Wind resource map overlay
- Cost estimation models
- Project comparison dashboard
- MapLibre GL JS Documentation
- Terra Draw Documentation
- Turf.js Documentation
- React Documentation
- TypeScript Documentation
Contributions welcome! Please:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit changes (
git commit -m 'Add amazing feature') - Push to branch (
git push origin feature/amazing-feature) - Open a Pull Request
MIT License - see LICENSE file for details
- OpenStreetMap contributors for base map tiles
- Terra Draw by James Milner for the drawing toolkit
- MapLibre community for the open map rendering engine
- Turf.js for powerful geospatial algorithms
Built with ⚡ for renewable energy planning