Basic Information

Overview


This page covers the New Project - Basic Information page, focusing on its steps and integration with various services.

It let's the user define a Project Name which will be stored in our secured database. The analysis result from the specific project will be stored under this project name, and can later be accessed from the Projects List, by the authenticated user.



Components


The new project page is built as a multi-step wizard form, and consists of 3 main areas:

  1. Project Name input Form
  2. Location Input Form
  3. Interactive Map Display




Detailed Process Flow



1. Project Name

  • User enters a project name
  • Frontend validates the input must not be empty
  • Validation is handled by Javascript



2. Location Input & Geocoding

  • The process starts when a user types in the location field:
  • Input is debounced (500ms delay)
  • Location string is sent to /api/geocode endpoint
  • Results update both location details info card, and map position
  • Validation ensures location is successfully geocoded



3. Backend Services


Geocoding Service (Nominatim)

  • Uses OpenStreetMap's Nominatim service through Python geopy library
  • Converts location text into geographic coordinates
  • Provides structured address information
  • Implementation in Python backend handles:
    • Location validation
    • Coordinate extraction
    • Address component parsing
    • Error handling

Mapbox Integration

  • Provides interactive map visualization
  • Features:
    • Dynamic marker placement
    • Smooth transitions between locations
    • Zoom controls
  • Map initialization and updates handled by Javascript



API Flow


1. Geocoding Request


API Request Example

POST /api/geocode
Content-Type: application/json

{
    "location": "san fran" //user input
}


API Response Example

{
    "success": true,
    "lat": 37.7749,
    "lng": -122.4194,
    "city": "San Francisco",
    "state": "California",
    "country": "United States"
}


2. Map Updates


On successful geocoding: - Update marker position - Fly to new coordinates - Zoom level adjusts to 12




Key Code Components


1. Frontend Location Handler (Javascript)

  • Debounces user input
  • Manages location validation state
  • Updates UI with geocoding results
  • Controls next button state


2. Map Integration (Javascript)

  • Initializes Mapbox instance
  • Manages marker placement
  • Handles viewport transitions
  • Responds to location updates


3. Backend Geocoding (Python)

  • Validates input
  • Interfaces with Nominatim
  • Formats response data
  • Handles error cases




Error Handling


1. Frontend

  • Invalid/empty inputs
  • Failed geocoding requests
  • Map loading issues


2. Backend

  • Geocoding service timeout
  • Invalid location data
  • Service unavailability




Service Providers


1. Nominatim

  • Free geocoding service
  • Part of OpenStreetMap
  • Provides structured address data
  • Usage limits apply


2. Mapbox

  • Commercial mapping platform requiring API key
  • Provides interactive maps
  • Custom styling options


This system provides a robust foundation for capturing accurate location data while providing immediate visual feedback to users through the interactive map interface.