UrbanResponse AI - Emergency Response Simulation

3D Emergency Response Simulation for Berkeley, CA using Google Maps JavaScript API

🌟 Overview

UrbanResponse AI is an interactive 3D emergency response simulation that demonstrates intelligent emergency vehicle dispatching and routing in Berkeley, California. This implementation focuses on the visualization and simulation components from the larger UrbanResponse AI project.

Key Features

• 🗺️ 3D Interactive Map: Powered by Google Maps JavaScript API with photorealistic 3D buildings
• 🔥 Drag & Drop Events: Create emergency events by dragging icons onto the map
• 🚑 Smart Vehicle Dispatching: Automatic selection of nearest appropriate emergency vehicles
• 🛣️ Intelligent Routing: Real-time route calculation with Google Maps Directions API
• ⚡ Smooth Animations: Realistic vehicle movement animations along calculated routes
• 📍 Real Berkeley Data: Actual emergency station locations and service areas
• 🎛️ Live Control Panel: Real-time monitoring and control of emergency responses

🚀 Quick Start

Prerequisites

1. Google Maps API Key - Get one from Google Cloud Console
2. Modern Web Browser - Chrome, Firefox, Safari, or Edge
3. Local Web Server - For CORS compliance (see setup options below)

Setup Instructions

1. Clone/Download the Project

   git clone <repository-url>
   cd Berk2025
   

2. Configure Google Maps API Key

   Open index.html and replace YOUR_API_KEY with your actual API key:

   <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_ACTUAL_API_KEY&libraries=geometry&callback=initApp&v=3.55" async defer></script>
   

   Also update config.js:

   GOOGLE_MAPS_API_KEY: "YOUR_ACTUAL_API_KEY",
   

3. Set Up Local Web Server

   Choose one of these options:

   Option A: Python (if installed)

   # Python 3
   python -m http.server 8000
   
   # Python 2
   python -m SimpleHTTPServer 8000
   

   Option B: Node.js (if installed)

   npx http-server -p 8000
   

   Option C: PHP (if installed)

   php -S localhost:8000
   

   Option D: Live Server Extension (VS Code)

   • Install "Live Server" extension
   • Right-click index.html → "Open with Live Server"

4. Open Application

   Navigate to: http://localhost:8000

🎮 How to Use

Creating Emergency Events

1. Drag & Drop Method:

   • Select an emergency type from the sidebar (🔥 Fire, 🚑 Medical, 🚓 Police, 🚗 Accident)
   • Drag the icon onto the map where you want the emergency
   • Drop to create the event

2. Event Information:

   • Click on any event marker to see details
   • Use "Dispatch Emergency Vehicles" to send response teams

Managing Vehicles

• View Status: Check vehicle availability in the sidebar
• Manual Reset: Click "Reset Vehicles" to return all vehicles to stations
• Monitor Movement: Watch real-time vehicle animations on the map

Keyboard Shortcuts

• Ctrl + C: Clear all events
• Ctrl + R: Reset all vehicles
• Escape: Close event information panel

Map Controls

• Pan: Click and drag
• Zoom: Mouse wheel or zoom controls
• 3D View: Automatic 3D buildings in supported areas
• Station Info: Click on station markers for details

🏗️ Architecture

Core Components

1. MapManager (js/mapManager.js)

   • Google Maps 3D integration
   • Marker management
   • Coordinate conversion

2. EventManager (js/eventManager.js)

   • Emergency event creation and tracking
   • Drag & drop functionality
   • Event lifecycle management

3. VehicleManager (js/vehicleManager.js)

   • Emergency vehicle dispatching
   • Animation and movement
   • Status tracking

4. RoutingEngine (js/routingEngine.js)

   • Google Maps Directions API integration
   • Route calculation and caching
   • Fallback routing

Data Structure

• Emergency Stations: Real Berkeley fire stations, hospitals, and police stations
• Vehicle Fleet: Ambulances, fire trucks, and police vehicles with realistic capabilities
• Event Types: Fire, medical, police, and traffic accidents with appropriate response protocols

🎯 Berkeley-Specific Features

Real Emergency Stations

• Fire Stations: 5 actual Berkeley Fire Department locations
• Hospitals: Alta Bates Summit, UC Health Services, Paramedic stations
• Police: Berkeley PD headquarters, UC Police, patrol stations

Coverage Areas

• Downtown Berkeley: High-density urban response
• UC Berkeley Campus: Specialized campus emergency services
• Berkeley Hills: Wildfire and residential emergency response
• Berkeley Marina: Marine and waterfront emergencies

Realistic Response Times

• Ambulance: 4-8 minute average response
• Fire Trucks: 5-10 minute average response
• Police: 3-7 minute average response

⚙️ Configuration

Map Settings (config.js)

MAP_CONFIG: {
    center: { lat: 37.8715, lng: -122.2730 }, // Berkeley center
    zoom: 16,
    mapId: "YOUR_MAP_ID", // For 3D features
    tilt: 45,
    heading: 0
}

Event Types

EVENT_CONFIG: {
    eventTypes: {
        fire: { priority: 1, requiredVehicles: ["fire_truck", "ambulance"] },
        medical: { priority: 2, requiredVehicles: ["ambulance"] },
        police: { priority: 3, requiredVehicles: ["police"] },
        accident: { priority: 2, requiredVehicles: ["police", "ambulance"] }
    }
}

Vehicle Settings

VEHICLE_CONFIG: {
    animationSpeed: 50, // km/h
    animationSteps: 100,
    vehicleTypes: {
        ambulance: { icon: "🚑", color: "#e67e22" },
        fire_truck: { icon: "🚒", color: "#e74c3c" },
        police: { icon: "🚓", color: "#3498db" }
    }
}

Agents

• System: Fetch.ai + CrewAI intelligent agent system
• Hardware: ESP32 field sensors and triggers
• Analytics: Response time optimization and predictive modeling

Integration Points

• WebSocket endpoints for agent communication
• Hardware event ingestion via serial/network
• RESTful APIs for external system integration

📝 Development Notes

File Structure

├── index.html              # Main application entry
├── styles.css              # UI styling and responsive design
├── config.js               # System configuration
├── data/
│   └── stations.js         # Berkeley emergency stations data
└── js/
    ├── app.js              # Main application controller
    ├── mapManager.js       # Google Maps integration
    ├── eventManager.js     # Emergency event handling
    ├── vehicleManager.js   # Vehicle dispatch and animation
    └── routingEngine.js    # Route calculation