📋 Project Overview
San Diego Project is a frontend-only React-based web application that allows users to visualize 14 different infrastructure layers of San Diego on an interactive map. Users can toggle layers on or off and search for specific addresses (e.g., 949 Sapphire St) to drop a marker on the map and view all relevant infrastructure layers for that location.
🤝 Collaboration & Development
- Version Control: Git with feature branches
- Deployment: Vercel for quick hosting
- Code Reviews: Self-review and documentation
- Development Approach: Incremental feature-based updates
📞 Contact & Repository
🎉 Project Completion
San Diego Infrastructure Mapping Web App successfully demonstrates the integration of modern frontend development, GIS data visualization, and user-centered design principles. The project achieved its core objectives of providing a unified platform for visualizing multiple infrastructure layers with intuitive search and navigation capabilities.
"Mapping the future of civic infrastructure visualization, one layer at a time."
🎯 Problem Statement
Traditional infrastructure tools are often too complex for quick and efficient use. Key challenges include:
- Fragmented Tools: Users need multiple platforms for different datasets
- Poor Usability: No intuitive interface to toggle infrastructure layers
- Manual Navigation: Lack of simple address search to locate infrastructure data
💡 Solution Approach
The project solves these issues by:
- Providing 14 toggleable map layers in one unified interface
- Adding a search box with geocoding to locate addresses instantly
- Automatically displaying a marker and relevant layers on the map for better spatial context
🚀 Key Features
Core Functionality
- Map Interface: Interactive map using Leaflet.js
- 14 Infrastructure Layers: Each layer can be toggled individually
- Address Search: Input an address (e.g., "949 Sapphire St"), drop a marker, and visualize relevant layers
- Layer Control Panel: Sidebar toggle system for layers
- Marker Placement: Automatically adds a marker to the searched location
Technical Highlights
- Frontend-Only Application: No backend integration
- Real-Time Rendering: Map and layers render instantly without reloads
- Optimized GeoJSON Handling: Efficient rendering of large infrastructure datasets
🏗️ System Architecture
┌───────────────────────┐
│ React Frontend │
│ (Leaflet.js Map) │
│ │
│ - 14 Layers │
│ - Address Search │
│ - Marker Placement │
│ - Layer Toggles │
└─────────▲─────────────┘
│
▼
┌───────────────────────┐
│ GeoJSON Data Sources │
│ (San Diego Open Data) │
└───────────────────────┘
🛠️ Technical Implementation
Map & Layers (React + Leaflet)
import { MapContainer, TileLayer, GeoJSON } from 'react-leaflet';
<MapContainer center={[32.7157, -117.1611]} zoom={12}>
<TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
{layers.map(layer => layer.visible && (
<GeoJSON key={layer.id} data={layer.geoJson} />
))}
</MapContainer>
Layer Toggle Component
{layers.map(layer => (
<div key={layer.id}>
<input
type="checkbox"
checked={layer.visible}
onChange={() => toggleLayer(layer.id)}
/>
{layer.name}
</div>
))}
Search Box & Marker Placement
import L from 'leaflet';
const handleSearch = async (address) => {
const response = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${address}`);
const data = await response.json();
if (data.length > 0) {
const { lat, lon } = data[0];
const marker = L.marker([lat, lon]).addTo(map);
map.setView([lat, lon], 16);
}
};
📊 Data Visualization
Map Layers
- 14 Infrastructure Layers: Sewer mains, water mains, storm drains, pipelines, zoning areas, street lights, etc.
- Toggle Controls: Switch layers on/off independently for clear visualization
- Marker Context: Once a location is searched, the map zooms in and displays all layers relevant to that area
🛠️ Technology Stack
Frontend
React.js:
UI framework
Leaflet.js:
Mapping library for rendering maps and layers
React-Leaflet:
Integration between React and Leaflet
CSS Modules:
Component-level styling
APIs & Data
San Diego GeoJSON APIs:
Open data for infrastructure layers
OpenStreetMap (Nominatim):
Geocoding service for address search
Tools
Vercel/Netlify:
Frontend hosting
VS Code:
Development environment
Git:
Version control
🔍 Key Challenges & Solutions
Challenge 1: Managing 14 Layers
Problem: Performance drops when rendering multiple large GeoJSON files.
Solution:
- Implemented lazy loading for layers
- Used simplified geometries for faster rendering
Challenge 2: Accurate Address Search
Problem: Inconsistent results from geocoding for certain addresses.
Solution:
- Integrated OpenStreetMap Nominatim API with error handling and fallback mechanisms
Challenge 3: Layer Usability
Problem: Users needed a clear way to toggle layers without clutter.
Solution:
- Added a collapsible layer control sidebar with clear labels and checkboxes
📈 Performance Metrics
<300ms
Layer Toggle Speed
🚀 Future Enhancements
- Bookmark Locations: Save frequently searched addresses
- Layer Grouping: Group related layers (e.g., all utilities)
- Mobile Optimization: Enhanced responsive design for smaller screens
- Offline Mode: Cache layers for quick access without internet
- Print/Export: Export map view as PDF or image
📚 Learning Outcomes
Technical Skills Developed
- React + Leaflet.js: Advanced integration and mapping skills
- GeoJSON Data Handling: Efficient parsing and rendering
- Geocoding APIs: Address-to-coordinate mapping
- UI Design for Maps: Layer toggles and map control layouts
Professional Skills Enhanced
- Problem Solving: Optimizing data-heavy map rendering
- UI/UX Focus: Building an intuitive mapping interface
- Documentation: Creating clear, professional project documentation
🎯 Project Impact
- Single-Platform Access: All infrastructure layers accessible in one app
- Improved Usability: Simple address search and marker placement
- Fast Visualization: Efficient toggling and responsive map updates
📖 Documentation & Resources
🏆 Acknowledgments
Special thanks to the San Diego Open Data Portal for making this project possible.