Upload 4 files

Dockerfile

@@ -0,0 +1,30 @@
+# Use an official Python runtime as a parent image
+FROM python:3.10-slim
+
+# Set environment variables
+ENV PYTHONDONTWRITEBYTECODE=1
+ENV PYTHONUNBUFFERED=1
+
+# Set work directory
+WORKDIR /code
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    build-essential \
+    gdal-bin \
+    libgdal-dev \
+    && rm -rf /var/lib/apt/lists/*
+
+# Install Python dependencies
+COPY requirements.txt /code/
+RUN pip install --upgrade pip
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy project files
+COPY . /code/
+
+# Expose port (Hugging Face expects 7860 or 8000, but 7860 is default)
+EXPOSE 7860
+
+# Run the application
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]

main.py

@@ -0,0 +1,361 @@
+from fastapi import FastAPI, HTTPException
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.staticfiles import StaticFiles
+from pydantic import BaseModel
+import os
+import re
+import time
+import math
+import logging
+import requests
+import rasterio
+from typing import Optional, Tuple, Dict
+import urllib3
+
+# Disable SSL verification warnings for testing
+urllib3.disable_warnings(urllib3.exceptions.InsecureRequestWarning)
+os.environ["GDAL_HTTP_UNSAFESSL"] = "YES"
+
+# Configure logging
+logging.basicConfig(
+    level=logging.INFO,
+    format="%(asctime)s [%(levelname)s] %(message)s",
+    datefmt="%Y-%m-%d %H:%M:%S",
+)
+
+app = FastAPI(title="Terrain Analysis API", version="1.0.0")
+
+# Enable CORS for frontend communication
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],  # Configure appropriately for production
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Serve static files (frontend)
+app.mount("/static", StaticFiles(directory="static"), name="static")
+
+# Pydantic models for request/response
+class LocationRequest(BaseModel):
+    input: str  # Can be coordinates or place name
+
+class TerrainResponse(BaseModel):
+    latitude: float
+    longitude: float
+    elevation: Optional[float] = None
+    terrain_type: str
+    success: bool
+    message: Optional[str] = None
+
+# OpenTopoData configuration
+DATASETS = [
+    {'name': 'nzdem8m',   'min_lat': -47.6, 'max_lat': -34.4, 'min_lon': 166.5, 'max_lon': 178.6,  'resolution': 8},
+    {'name': 'ned10m',    'min_lat': 19.5,  'max_lat': 49.4,  'min_lon': -160.3,'max_lon': -66.9,  'resolution': 10},
+    {'name': 'eudem25m',  'min_lat': 25.0,  'max_lat': 72.0,  'min_lon': -60.0, 'max_lon': 40.0,   'resolution': 25},
+    {'name': 'mapzen',    'min_lat': -90.0, 'max_lat': 90.0,  'min_lon': -180.0,'max_lon': 180.0,  'resolution': 30},
+    {'name': 'aster30m',  'min_lat': -90.0, 'max_lat': 90.0,  'min_lon': -180.0,'max_lon': 180.0,  'resolution': 30},
+    {'name': 'srtm30m',   'min_lat': -60.0, 'max_lat': 60.0,  'min_lon': -180.0,'max_lon': 180.0,  'resolution': 30},
+    {'name': 'srtm90m',   'min_lat': -60.0, 'max_lat': 60.0,  'min_lon': -180.0,'max_lon': 180.0,  'resolution': 90},
+    {'name': 'gebco2020', 'min_lat': -90.0, 'max_lat': 90.0,  'min_lon': -180.0,'max_lon': 180.0,  'resolution': 450},
+    {'name': 'etopo1',    'min_lat': -90.0, 'max_lat': 90.0,  'min_lon': -180.0,'max_lon': 180.0,  'resolution': 1800},
+]
+
+# HTTP session with SSL verification disabled (for testing)
+session = requests.Session()
+session.verify = False
+
+def select_dataset(lat: float, lon: float) -> str:
+    """Select the best available dataset for given coordinates"""
+    candidates = [
+        ds for ds in DATASETS
+        if ds['min_lat'] <= lat <= ds['max_lat'] and ds['min_lon'] <= lon <= ds['max_lon']
+    ]
+    if not candidates:
+        logging.debug(f"No regional dataset covers ({lat}, {lon}); falling back to 'mapzen'.")
+        return 'mapzen'
+    chosen = min(candidates, key=lambda x: x['resolution'])['name']
+    logging.debug(f"Selected OpenTopoData dataset '{chosen}' for ({lat}, {lon}).")
+    return chosen
+
+def get_elevation_opentopo_single(lat: float, lon: float) -> Optional[float]:
+    """Fetch elevation for a single coordinate from OpenTopoData"""
+    dataset = select_dataset(lat, lon)
+    url = f"https://api.opentopodata.org/v1/{dataset}?locations={lat},{lon}"
+    
+    try:
+        resp = session.get(url, timeout=10)
+        if resp.status_code == 200:
+            data = resp.json()
+            if data.get('status') == 'OK':
+                elev = data['results'][0].get('elevation')
+                if elev is not None:
+                    logging.debug(f"Got elevation {elev} m from '{dataset}' for ({lat}, {lon}).")
+                    return elev
+                else:
+                    logging.warning(f"Null elevation from '{dataset}' for ({lat}, {lon}).")
+            else:
+                logging.warning(f"OpenTopoData status '{data.get('status')}' for '{dataset}' at ({lat}, {lon}).")
+        else:
+            logging.warning(f"HTTP {resp.status_code} from OpenTopoData for '{dataset}' at ({lat}, {lon}).")
+    except requests.RequestException as e:
+        logging.error(f"OpenTopoData request exception at ({lat}, {lon}): {e}")
+
+    # Fallback to 'mapzen' if primary dataset failed
+    if dataset != 'mapzen':
+        try:
+            url2 = f"https://api.opentopodata.org/v1/mapzen?locations={lat},{lon}"
+            resp2 = session.get(url2, timeout=10)
+            if resp2.status_code == 200:
+                data2 = resp2.json()
+                if data2.get('status') == 'OK':
+                    elev2 = data2['results'][0].get('elevation')
+                    if elev2 is not None:
+                        logging.debug(f"Got elevation {elev2} m from fallback 'mapzen' for ({lat}, {lon}).")
+                        return elev2
+        except requests.RequestException as e2:
+            logging.error(f"Fallback OpenTopoData request exception at ({lat}, {lon}): {e2}")
+    
+    return None
+
+def worldcover_tile(lat: float, lon: float) -> str:
+    """Compute ESA WorldCover 3°×3° tile ID for given coordinates"""
+    lat_floor = math.floor(lat / 3) * 3
+    lon_floor = math.floor(lon / 3) * 3
+    
+    if lat_floor >= 0:
+        lat_label = f"N{int(lat_floor):02d}"
+    else:
+        lat_label = f"S{int(abs(lat_floor)):02d}"
+    
+    if lon_floor >= 0:
+        lon_label = f"E{int(lon_floor):03d}"
+    else:
+        lon_label = f"W{int(abs(lon_floor)):03d}"
+    
+    tile = lat_label + lon_label
+    logging.debug(f"Computed WorldCover tile '{tile}' for ({lat}, {lon}).")
+    return tile
+
+def sample_worldcover(lat: float, lon: float, year: int = 2020, version: str = "v100") -> Optional[int]:
+    """Sample ESA WorldCover class code at given coordinates"""
+    tile = worldcover_tile(lat, lon)
+    url = (
+        f"https://esa-worldcover.s3.eu-central-1.amazonaws.com/"
+        f"{version}/{year}/map/ESA_WorldCover_10m_{year}_{version}_{tile}_Map.tif"
+    )
+    
+    try:
+        with rasterio.Env():
+            with rasterio.open(url) as ds:
+                # Convert lat/lon to pixel coordinates
+                row, col = ds.index(lon, lat)
+                arr = ds.read(1, window=((row, row+1), (col, col+1)))
+                val = arr[0, 0]
+                
+                if ds.nodata is not None and val == ds.nodata:
+                    logging.warning(f"WorldCover nodata at ({lat}, {lon}) in tile {tile}.")
+                    return None
+                
+                logging.debug(f"Sampled WorldCover code {val} at ({lat}, {lon}) in tile {tile}.")
+                return int(val)
+    except Exception as e:
+        logging.error(f"Error sampling WorldCover tile {tile} at ({lat}, {lon}): {e}")
+        return None
+
+def map_worldcover_to_terrain(code: int, lat: float, lon: float) -> str:
+    """Map ESA WorldCover class code to terrain names with geographic heuristics"""
+    if code == 10:
+        # Tree cover: Jungle in tropics, Woodland elsewhere
+        if -23.5 <= lat <= 23.5:
+            return "Jungle"
+        else:
+            return "Woodland"
+    elif code == 20:
+        return "Shrubland"
+    elif code == 30:
+        return "Grassland"
+    elif code == 40:
+        return "Farmland"
+    elif code == 50:
+        return "Urban"
+    elif code == 60:
+        return "Desert"
+    elif code == 70:
+        return "Arctic/Mountain"
+    elif code == 80:
+        return "Lake"
+    elif code == 90:
+        return "Swamp"
+    elif code == 95:
+        return "Swamp"  # Mangroves
+    elif code == 100:
+        return "Tundra"
+    else:
+        return "Unknown"
+
+def get_landcover_name(lat: float, lon: float) -> str:
+    """Get terrain name based on ESA WorldCover classification"""
+    code = sample_worldcover(lat, lon)
+    if code is None:
+        return "No Data"
+    return map_worldcover_to_terrain(code, lat, lon)
+
+def parse_decimal(input_str: str) -> Optional[Tuple[float, float]]:
+    """Parse decimal degree coordinates from input string"""
+    float_pattern = r"[-+]?\d*\.\d+|\d+"
+    nums = re.findall(float_pattern, input_str)
+    if len(nums) >= 2:
+        try:
+            lat = float(nums[0])
+            lon = float(nums[1])
+            if -90 <= lat <= 90 and -180 <= lon <= 180:
+                return lat, lon
+        except ValueError:
+            return None
+    return None
+
+def parse_dms(input_str: str) -> Optional[Tuple[float, float]]:
+    """Parse DMS (degrees-minutes-seconds) coordinates"""
+    dms_pattern = r"""(?P<deg>\d{1,3})[°\s]+(?P<min>\d{1,2})['\s]+(?P<sec>\d{1,2}(?:\.\d+)?)[\"\s]*?(?P<dir>[NSEW])"""
+    matches = re.finditer(dms_pattern, input_str, re.IGNORECASE | re.VERBOSE)
+    coords = []
+    
+    for m in matches:
+        deg = float(m.group('deg'))
+        minute = float(m.group('min'))
+        sec = float(m.group('sec'))
+        direction = m.group('dir').upper()
+        
+        # Convert to decimal degrees
+        dec = deg + minute/60.0 + sec/3600.0
+        if direction in ('S', 'W'):
+            dec = -dec
+        coords.append(dec)
+    
+    if len(coords) >= 2:
+        lat, lon = coords[0], coords[1]
+        if -90 <= lat <= 90 and -180 <= lon <= 180:
+            return lat, lon
+    return None
+
+def geocode_place(place: str) -> Optional[Tuple[float, float]]:
+    """Geocode place name using Nominatim API"""
+    url = "https://nominatim.openstreetmap.org/search"
+    params = {
+        'q': place,
+        'format': 'json',
+        'limit': 1
+    }
+    headers = {
+        'User-Agent': "terrain-tool/1.0 (contact@example.com)"  # Update with your contact
+    }
+    
+    try:
+        resp = requests.get(url, params=params, headers=headers, timeout=10, verify=False)
+        if resp.status_code == 200:
+            results = resp.json()
+            if results:
+                lat = float(results[0]['lat'])
+                lon = float(results[0]['lon'])
+                logging.info(f"Geocoded '{place}' to ({lat}, {lon})")
+                return lat, lon
+            else:
+                logging.warning(f"No geocoding result for '{place}'.")
+        else:
+            logging.warning(f"Nominatim HTTP {resp.status_code} for '{place}'.")
+    except requests.RequestException as e:
+        logging.error(f"Nominatim request exception for '{place}': {e}")
+    
+    return None
+
+def parse_location(input_str: str) -> Optional[Tuple[float, float]]:
+    """Parse location from various input formats or geocode place name"""
+    # Try decimal degrees first
+    decimal_coords = parse_decimal(input_str)
+    if decimal_coords:
+        logging.info(f"Parsed decimal degrees: {decimal_coords}")
+        return decimal_coords
+    
+    # Try DMS format
+    dms_coords = parse_dms(input_str)
+    if dms_coords:
+        logging.info(f"Parsed DMS coordinates: {dms_coords}")
+        return dms_coords
+    
+    # Fall back to geocoding as place name
+    geocoded = geocode_place(input_str)
+    if geocoded:
+        return geocoded
+    
+    return None
+
+def classify_terrain(lat: float, lon: float) -> Dict[str, any]:
+    """Classify terrain based on elevation and land cover data"""
+    elev = get_elevation_opentopo_single(lat, lon)
+    
+    if elev is None:
+        logging.info(f"Elevation unavailable for ({lat}, {lon}); terrain unknown.")
+        return {"elevation": None, "terrain_type": "Unknown"}
+    
+    if elev >= 0:
+        # Land: use WorldCover classification
+        terrain = get_landcover_name(lat, lon)
+        return {"elevation": elev, "terrain_type": terrain}
+    else:
+        # Water: classify by depth
+        depth = -elev
+        water_class = "Continental Shelf" if depth <= 200 else "Deep Ocean"
+        return {"elevation": elev, "terrain_type": water_class}
+
+# API Endpoints
+@app.get("/")
+async def root():
+    """Serve the main application page"""
+    return {"message": "Terrain Analysis API is running. Visit /static/index.html for the web interface."}
+
+@app.post("/api/analyze", response_model=TerrainResponse)
+async def analyze_terrain(request: LocationRequest):
+    """Analyze terrain for given location input"""
+    try:
+        # Parse the input location
+        coordinates = parse_location(request.input.strip())
+        
+        if coordinates is None:
+            raise HTTPException(
+                status_code=400, 
+                detail="Could not parse coordinates or geocode the location. Please check your input format."
+            )
+        
+        lat, lon = coordinates
+        
+        # Classify the terrain
+        result = classify_terrain(lat, lon)
+        
+        # Add rate limiting delay for OpenTopoData
+        time.sleep(1.1)
+        
+        return TerrainResponse(
+            latitude=lat,
+            longitude=lon,
+            elevation=result["elevation"],
+            terrain_type=result["terrain_type"],
+            success=True,
+            message="Terrain analysis completed successfully"
+        )
+        
+    except HTTPException:
+        raise
+    except Exception as e:
+        logging.error(f"Error analyzing terrain: {str(e)}")
+        raise HTTPException(status_code=500, detail=f"Internal server error: {str(e)}")
+
+@app.get("/api/health")
+async def health_check():
+    """Health check endpoint"""
+    return {"status": "healthy", "service": "Terrain Analysis API"}
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run("main:app", host="0.0.0.0", port=7860, reload=False)

requirements.txt

@@ -0,0 +1,7 @@
+fastapi
+uvicorn
+requests
+rasterio
+pydantic
+urllib3
+python-multipart

static/index.html

@@ -0,0 +1,640 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Terrain Analysis Explorer</title>
+    
+    <!-- Esri ArcGIS Maps SDK for JavaScript -->
+    <link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/themes/dark/main.css">
+    <script src="https://js.arcgis.com/4.28/"></script>
+    
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: #1a1a1a;
+            color: #ffffff;
+            overflow: hidden;
+        }
+
+        .app-container {
+            display: flex;
+            height: 100vh;
+            width: 100vw;
+        }
+
+        /* Left Panel Styling */
+        .left-panel {
+            width: 350px;
+            background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            box-shadow: 2px 0 15px rgba(0, 0, 0, 0.3);
+            border-right: 1px solid #333;
+        }
+
+        .app-header {
+            margin-bottom: 30px;
+        }
+
+        .app-title {
+            font-size: 24px;
+            font-weight: 600;
+            color: #00d4ff;
+            margin-bottom: 8px;
+            background: linear-gradient(45deg, #00d4ff, #0099cc);
+            background-clip: text;
+            -webkit-background-clip: text;
+            -moz-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        .app-subtitle {
+            font-size: 14px;
+            color: #aaa;
+            font-weight: 300;
+        }
+
+        /* Input Section */
+        .input-section {
+            margin-bottom: 30px;
+        }
+
+        .input-label {
+            display: block;
+            font-size: 14px;
+            font-weight: 500;
+            color: #ddd;
+            margin-bottom: 10px;
+        }
+
+        .location-input {
+            width: 100%;
+            padding: 12px 16px;
+            font-size: 14px;
+            background: rgba(255, 255, 255, 0.1);
+            border: 1px solid #444;
+            border-radius: 8px;
+            color: #fff;
+            transition: all 0.3s ease;
+            backdrop-filter: blur(10px);
+        }
+
+        .location-input:focus {
+            outline: none;
+            border-color: #00d4ff;
+            box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
+            background: rgba(255, 255, 255, 0.15);
+        }
+
+        .location-input::placeholder {
+            color: #888;
+        }
+
+        .analyze-btn {
+            width: 100%;
+            padding: 12px;
+            margin-top: 15px;
+            background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
+            color: white;
+            border: none;
+            border-radius: 8px;
+            font-size: 14px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        .analyze-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(0, 212, 255, 0.4);
+        }
+
+        .analyze-btn:disabled {
+            background: #555;
+            cursor: not-allowed;
+            transform: none;
+            box-shadow: none;
+        }
+
+        /* Results Section */
+        .results-section {
+            flex-grow: 1;
+        }
+
+        .results-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: #fff;
+            margin-bottom: 20px;
+            padding-bottom: 10px;
+            border-bottom: 1px solid #333;
+        }
+
+        .result-item {
+            background: rgba(255, 255, 255, 0.05);
+            padding: 15px;
+            margin-bottom: 15px;
+            border-radius: 8px;
+            border-left: 4px solid #00d4ff;
+            backdrop-filter: blur(10px);
+            transition: all 0.3s ease;
+        }
+
+        .result-item:hover {
+            background: rgba(255, 255, 255, 0.08);
+            transform: translateX(5px);
+        }
+
+        .result-label {
+            font-size: 12px;
+            color: #aaa;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            margin-bottom: 5px;
+        }
+
+        .result-value {
+            font-size: 16px;
+            font-weight: 600;
+            color: #fff;
+        }
+
+        .coordinates {
+            font-family: 'Courier New', monospace;
+            font-size: 14px;
+        }
+
+        /* Map Container */
+        .map-container {
+            flex-grow: 1;
+            position: relative;
+        }
+
+        #mapView {
+            width: 100%;
+            height: 100%;
+        }
+
+        /* Loading Animation */
+        .loading {
+            display: none;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+            color: #00d4ff;
+        }
+
+        .loading.active {
+            display: flex;
+        }
+
+        .spinner {
+            width: 20px;
+            height: 20px;
+            border: 2px solid #333;
+            border-top: 2px solid #00d4ff;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        /* Error/Status Messages */
+        .message {
+            padding: 10px 15px;
+            margin: 15px 0;
+            border-radius: 6px;
+            font-size: 14px;
+            display: none;
+        }
+
+        .message.error {
+            background: rgba(255, 99, 99, 0.2);
+            border: 1px solid #ff6363;
+            color: #ff6363;
+        }
+
+        .message.success {
+            background: rgba(99, 255, 99, 0.2);
+            border: 1px solid #63ff63;
+            color: #63ff63;
+        }
+
+        .message.show {
+            display: block;
+        }
+
+        /* Helper Text */
+        .helper-text {
+            font-size: 12px;
+            color: #888;
+            margin-top: 10px;
+            line-height: 1.4;
+        }
+
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            .app-container {
+                flex-direction: column;
+            }
+            
+            .left-panel {
+                width: 100%;
+                height: auto;
+                max-height: 40vh;
+                overflow-y: auto;
+            }
+            
+            .map-container {
+                height: 60vh;
+            }
+        }
+
+        /* Custom Scrollbar */
+        .left-panel::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        .left-panel::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 3px;
+        }
+
+        .left-panel::-webkit-scrollbar-thumb {
+            background: #00d4ff;
+            border-radius: 3px;
+        }
+
+        .left-panel::-webkit-scrollbar-thumb:hover {
+            background: #0099cc;
+        }
+    </style>
+</head>
+<body>
+    <div class="app-container">
+        <!-- Left Panel for Input and Results -->
+        <div class="left-panel">
+            <div class="app-header">
+                <h1 class="app-title">Terrain Explorer</h1>
+                <p class="app-subtitle">Analyze elevation and land cover data worldwide</p>
+            </div>
+
+            <!-- Input Section -->
+            <div class="input-section">
+                <label class="input-label" for="locationInput">Enter Coordinates or Place Name</label>
+                <input 
+                    type="text" 
+                    id="locationInput" 
+                    class="location-input"
+                    placeholder="e.g., 40.7128, -74.0060 or New York City"
+                >
+                <div class="helper-text">
+                    Supported formats:<br>
+                    • Decimal: 40.7128, -74.0060<br>
+                    • DMS: 40°42'46"N 74°0'21"W<br>
+                    • Place names: New York City
+                </div>
+                <button id="analyzeBtn" class="analyze-btn">Analyze Location</button>
+            </div>
+
+            <!-- Loading Indicator -->
+            <div id="loadingIndicator" class="loading">
+                <div class="spinner"></div>
+                <span>Analyzing terrain...</span>
+            </div>
+
+            <!-- Status Messages -->
+            <div id="statusMessage" class="message"></div>
+
+            <!-- Results Section -->
+            <div class="results-section">
+                <h2 class="results-title">Analysis Results</h2>
+                
+                <div class="result-item">
+                    <div class="result-label">Coordinates</div>
+                    <div id="coordinatesResult" class="result-value coordinates">
+                        Click "Analyze Location" to get started
+                    </div>
+                </div>
+
+                <div class="result-item">
+                    <div class="result-label">Elevation</div>
+                    <div id="elevationResult" class="result-value">
+                        --
+                    </div>
+                </div>
+
+                <div class="result-item">
+                    <div class="result-label">Terrain Type</div>
+                    <div id="terrainResult" class="result-value">
+                        --
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Map Container -->
+        <div class="map-container">
+            <div id="mapView"></div>
+        </div>
+    </div>
+
+    <script>
+        // Global variables
+        let map, view, currentMarker;
+        const API_BASE_URL = window.location.origin;
+
+        // Initialize the map when the page loads
+        require([
+            "esri/Map",
+            "esri/views/MapView",
+            "esri/Graphic",
+            "esri/geometry/Point",
+            "esri/symbols/SimpleMarkerSymbol",
+            "esri/layers/ImageryTileLayer"
+        ], function(Map, MapView, Graphic, Point, SimpleMarkerSymbol, ImageryTileLayer) {
+            
+            // Create imagery layer (satellite view)
+            const imageryLayer = new ImageryTileLayer({
+                url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
+                title: "World Imagery"
+            });
+
+            // Create the map with satellite imagery
+            map = new Map({
+                basemap: "satellite",
+                layers: [imageryLayer]
+            });
+
+            // Create the map view
+            view = new MapView({
+                container: "mapView",
+                map: map,
+                center: [0, 20], // Longitude, Latitude
+                zoom: 2,
+                ui: {
+                    components: ["zoom", "compass"]
+                }
+            });
+
+            // Set up event listeners after map is loaded
+            view.when(() => {
+                console.log("Map loaded successfully");
+                setupEventListeners();
+            });
+
+            // Handle map click events to get coordinates
+            view.on("click", function(event) {
+                const lat = event.mapPoint.latitude;
+                const lon = event.mapPoint.longitude;
+                
+                // Update input field with clicked coordinates
+                document.getElementById('locationInput').value = `${lat.toFixed(6)}, ${lon.toFixed(6)}`;
+                
+                // Automatically analyze the clicked location
+                analyzeLocation();
+            });
+        });
+
+        function setupEventListeners() {
+            const analyzeBtn = document.getElementById('analyzeBtn');
+            const locationInput = document.getElementById('locationInput');
+
+            // Set up button click handler
+            analyzeBtn.addEventListener('click', analyzeLocation);
+
+            // Set up Enter key handler for input field
+            locationInput.addEventListener('keypress', function(event) {
+                if (event.key === 'Enter') {
+                    analyzeLocation();
+                }
+            });
+        }
+
+        async function analyzeLocation() {
+            const locationInput = document.getElementById('locationInput');
+            const inputValue = locationInput.value.trim();
+
+            if (!inputValue) {
+                showMessage('Please enter a location or coordinates', 'error');
+                return;
+            }
+
+            // Show loading state
+            setLoadingState(true);
+            clearMessage();
+
+            try {
+                // Make API request to backend
+                const response = await fetch(`${API_BASE_URL}/api/analyze`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        input: inputValue
+                    })
+                });
+
+                if (!response.ok) {
+                    const errorData = await response.json();
+                    throw new Error(errorData.detail || 'Failed to analyze location');
+                }
+
+                const data = await response.json();
+                
+                // Update results display
+                updateResults(data);
+                
+                // Update map with marker
+                updateMapMarker(data.latitude, data.longitude);
+                
+                // Show success message
+                showMessage('Analysis completed successfully!', 'success');
+
+            } catch (error) {
+                console.error('Error analyzing location:', error);
+                showMessage(`Error: ${error.message}`, 'error');
+            } finally {
+                setLoadingState(false);
+            }
+        }
+
+        function updateResults(data) {
+            // Update coordinates display
+            const coordsElement = document.getElementById('coordinatesResult');
+            coordsElement.textContent = `${data.latitude.toFixed(6)}, ${data.longitude.toFixed(6)}`;
+
+            // Update elevation display
+            const elevationElement = document.getElementById('elevationResult');
+            const elevationValue = data.elevation !== null ? `${data.elevation.toFixed(1)} m` : 'No data available';
+            elevationElement.textContent = elevationValue;
+
+            // Update terrain type display
+            const terrainElement = document.getElementById('terrainResult');
+            terrainElement.textContent = data.terrain_type || 'Unknown';
+        }
+
+        function updateMapMarker(latitude, longitude) {
+            require([
+                "esri/Graphic",
+                "esri/geometry/Point",
+                "esri/symbols/SimpleMarkerSymbol"
+            ], function(Graphic, Point, SimpleMarkerSymbol) {
+                
+                // Remove existing marker if present
+                if (currentMarker) {
+                    view.graphics.remove(currentMarker);
+                }
+
+                // Create new marker
+                const point = new Point({
+                    longitude: longitude,
+                    latitude: latitude
+                });
+
+                const markerSymbol = new SimpleMarkerSymbol({
+                    color: [0, 212, 255],
+                    size: 12,
+                    outline: {
+                        color: [255, 255, 255],
+                        width: 2
+                    }
+                });
+
+                currentMarker = new Graphic({
+                    geometry: point,
+                    symbol: markerSymbol
+                });
+
+                // Add marker to map
+                view.graphics.add(currentMarker);
+
+                // Center map on the marker
+                view.goTo({
+                    center: [longitude, latitude],
+                    zoom: 10
+                }, {
+                    duration: 2000
+                });
+            });
+        }
+
+        function setLoadingState(isLoading) {
+            const loadingIndicator = document.getElementById('loadingIndicator');
+            const analyzeBtn = document.getElementById('analyzeBtn');
+
+            if (isLoading) {
+                loadingIndicator.classList.add('active');
+                analyzeBtn.disabled = true;
+                analyzeBtn.textContent = 'Analyzing...';
+            } else {
+                loadingIndicator.classList.remove('active');
+                analyzeBtn.disabled = false;
+                analyzeBtn.textContent = 'Analyze Location';
+            }
+        }
+
+        function showMessage(message, type) {
+            const messageElement = document.getElementById('statusMessage');
+            messageElement.textContent = message;
+            messageElement.className = `message ${type} show`;
+
+            // Auto-hide success messages after 3 seconds
+            if (type === 'success') {
+                setTimeout(() => {
+                    clearMessage();
+                }, 3000);
+            }
+        }
+
+        function clearMessage() {
+            const messageElement = document.getElementById('statusMessage');
+            messageElement.className = 'message';
+        }
+
+        // Example locations for demonstration
+        const exampleLocations = [
+            { name: 'Mount Everest', coords: '27.9881, 86.9250' },
+            { name: 'Death Valley', coords: '36.5323, -117.0143' },
+            { name: 'Amazon Rainforest', coords: '-3.4653, -62.2159' },
+            { name: 'Sahara Desert', coords: '23.8859, 11.0167' },
+            { name: 'New York City', coords: '40.7128, -74.0060' }
+        ];
+
+        // Add some sample locations to help users get started
+        function addExampleLocations() {
+            const inputSection = document.querySelector('.input-section');
+            const examplesDiv = document.createElement('div');
+            examplesDiv.className = 'examples-section';
+            examplesDiv.innerHTML = `
+                <div class="helper-text" style="margin-top: 20px; margin-bottom: 10px;">
+                    <strong>Try these examples:</strong>
+                </div>
+            `;
+            
+            exampleLocations.forEach(location => {
+                const exampleBtn = document.createElement('button');
+                exampleBtn.className = 'example-btn';
+                exampleBtn.textContent = location.name;
+                exampleBtn.style.cssText = `
+                    display: inline-block;
+                    margin: 2px 5px 2px 0;
+                    padding: 4px 8px;
+                    background: rgba(0, 212, 255, 0.2);
+                    border: 1px solid rgba(0, 212, 255, 0.5);
+                    border-radius: 4px;
+                    color: #00d4ff;
+                    font-size: 11px;
+                    cursor: pointer;
+                    transition: all 0.3s ease;
+                `;
+                
+                exampleBtn.addEventListener('click', () => {
+                    document.getElementById('locationInput').value = location.coords;
+                    analyzeLocation();
+                });
+                
+                exampleBtn.addEventListener('mouseenter', () => {
+                    exampleBtn.style.background = 'rgba(0, 212, 255, 0.3)';
+                });
+                
+                exampleBtn.addEventListener('mouseleave', () => {
+                    exampleBtn.style.background = 'rgba(0, 212, 255, 0.2)';
+                });
+                
+                examplesDiv.appendChild(exampleBtn);
+            });
+            
+            inputSection.appendChild(examplesDiv);
+        }
+
+        // Initialize example locations when page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            addExampleLocations();
+        });
+
+        // Handle window resize to maintain map responsiveness
+        window.addEventListener('resize', () => {
+            if (view) {
+                view.when(() => {
+                    view.resize();
+                });
+            }
+        });
+    </script>
+</body>
+</html>