Rename as mini-moving-map

Author: newtom28

.github/workflows/deploy.yaml

@@ -0,0 +1,72 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+
+      - name: Install deps
+        run: npm ci
+
+      # --- Set VITE_BASE automatically for repo pages ---
+      # For repo pages, base should be "/<repo-name>/"
+      # For user/org pages (username.github.io), base should be "/"
+      - name: Compute VITE_BASE
+        id: base
+        run: |
+          REPO_NAME="${GITHUB_REPOSITORY#*/}"
+          if [[ "$REPO_NAME" == *".github.io" ]]; then
+            echo "VITE_BASE=/"
+          else
+            echo "VITE_BASE=/${REPO_NAME}/"
+          fi >> $GITHUB_OUTPUT
+
+      - name: Build
+        env:
+          # You can override this in repo → Settings → Secrets and variables → Actions → Variables
+          # by defining VITE_BASE; if not set, we use the computed default above.
+          VITE_BASE: ${{ vars.VITE_BASE || steps.base.outputs.VITE_BASE }}
+        run: |
+          echo "Using VITE_BASE=$VITE_BASE"
+          npm run build
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./dist
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Configure Pages
+        uses: actions/configure-pages@v5
+
+      - name: Deploy
+        id: deployment
+        uses: actions/deploy-pages@v4

README.md

@@ -1,34 +1,33 @@
-# Map Explorer
+# Mini Moving Map
 
 A minimalist Google Maps application with AI-powered landmark discovery and 3D exploration experience.
 
 ## Features
 
+- **Moving Map**: MSFS (Microsoft Flight Simulator) integration for aircraft marker tracking effect
 - **Landmark Discovery**: Google Places nearby search + OpenAI landmark query + Wikipedia images
 - **Location Search**: Google Places text search + OpenAI location query + User Geolocation
-- **Photorealistic 3D Maps**: Google Earth style 3D navigation + Cinematic flyover for each landmarks
-- **World ready**: LLM content and auto-update UI translation follows browser language setting
-- **Moving Map**: MSFS (Microsoft Flight Simulator) integration for aircraft marker tracking effect
+- **Photorealistic 3D Maps**: Google Earth-style 3D navigation + Cinematic flyovers for each landmarks
+- **World ready**: Automatically adapts LLM content and UI translation to browser's language setting
 
 ### Technical Highlights
 
 - **Frontend:** Map integration, landmark visualization, location navigation, browser-side caching and test runner
 - **Backend:** Flask API connecting to MSFS via SimConnect proxy to fetch real-time aircraft telemetry
-- **LLM:** OpenAI selects landmarks from Google Places search results, generates descriptions, look up Wiki images, and adapts language based on location's country.
-- **Caching:** Proximity-based keys with coordinate rounding + location matching + search radius + TTL expiration
-- **Multi-Sources:** Google Places API (nearby search) + Wikipedia API (images) + OpenAI API (landmark info)
-- **User interaction:** location geocoding → multi-tier cache lookup → landmark discovery (Google Places + OpenAI) → multi-pass searches
-- **Auto Translation:** Support JSON resource, string changes detection, local TM, secondary locale for multi-lingual users
+- **LLM:** OpenAI selects landmarks from Google results, generates descriptions, adapts language to location
+- **Caching:** Proximity-based keys with coordinate rounding + location matching + TTL expiration
+- **Auto Translation:** Support JSON resource, string changes detection, local TM (Translation Memory), secondary locale for multi-lingual users
 - **Configuration:** Map defaults, test mode mock data on `config.json`, LLM prompt templates on `prompts.js`
 
 ### External Services
 
 - **Google Maps API**: Core mapping functionality with 3D support
 - **Google Places API**: Location search and nearby places discovery
 - **OpenAI API**: LLM generated translations and landmark information
-- **Wikipedia API**: Landmark and location images
+- **Wikipedia API**: Landmark and location photos
 
 ### Vanilla JavaScript Frontend with Vite
+
 ```
 src/
 ├── app.js          # Init Google Maps application
@@ -44,78 +43,85 @@ src/
 └── test_runner.js  # Client-side testing
 ```
 
-## Get Started
+## Getting Started
 
-1. **Install prerequisites**
-   - Install Node.js (https://nodejs.org/).
-   - Clone this repository and install dependencies (see `package.json`)
+**Prerequisites**
+
+- Install Node.js (https://nodejs.org/).
+- Clone this repository and install dependencies (see `package.json`)
 
 ```bash
 git clone <repository-url>
 cd <my-project>
 npm install
 ```
 
-2. **Create environment file**
+**Create environment file**
 
-   Create your own `.env` file and add your API keys for local development. Vite exposes variables prefixed with `VITE_` to the browser app via `index.html`.
+Create your own `.env` file and add your API keys for local development. Vite exposes variables prefixed with `VITE_` to the browser app via `index.html`.
 
 ```bash
 VITE_GOOGLE_MAPS_API_KEY=your_google_maps_api_key
 VITE_OPENAI_API_KEY=your_openai_api_key
 ```
 
-3. **Generate API keys**
+### "Bring your own key" approach
+
+As an open-source project targeting technical users, this application is designed to run on user's keys. The user is responsible for:
+
+1.  Creating their own Google Cloud project and API key (required).
+2.  Securing their key by restricting it to their own domains (`localhost` for testing, their deployment domain for production).
+3.  The costs associated with their usage.
 
-   - **Google Maps API Key**
-     1. Visit the [Google Cloud Console](https://console.cloud.google.com/).
-     2. Create or select a project.
-     3. Enable “Maps JavaScript API” and “Places API (New)” in the API library.
-     4. Create an API key under **APIs & Services → Credentials**.
-     5. For local development restrict referrers to `localhost`.
+**Generate API keys**
 
-   - **OpenAI API Key**
-     1. Visit the [OpenAI dashboard](https://platform.openai.com/account/api-keys).
-     2. Create a new secret key and copy it for later use; it won't be shown again.
+- **Google Maps API Key**
 
-4. **Start the development server**
+  1.  Visit the [Google Cloud Console](https://console.cloud.google.com/) → Create or select a project → Go to [Google Maps Platform](https://console.cloud.google.com/google/maps-apis) ([See Also](https://developers.google.com/maps/documentation/javascript/get-api-key)).
+  2.  Enable “Map Tiles API”, “Maps JavaScript API”, “Geocoding API” and “Places API (New)” under **APIs & Services**.
+  3.  Create an API key under **Keys & Credentials**. For local development restrict **HTTP referrer** to `localhost`.
+
+- **OpenAI API Key**
+  1.  Visit the [OpenAI dashboard](https://platform.openai.com/api-keys).
+  2.  Create a new secret key and copy it for later use; it won't be shown again.
+
+**Start the development server**
 
 ```bash
 npm run dev
 ```
 
-5. **Enter API keys in the app**
+**Enter API keys in the app**
+
+- Open `http://localhost:5001` in your browser.
+- Click the gear icon (**⚙️ Settings UI**) in the bottom‑left corner.
+- Fill in `GOOGLE_MAPS_API_KEY` and `OPENAI_API_KEY`, then close to save.
+- Settings are stored in `localStorage` under `APP_SETTINGS`.
+- In Chrome, view them under DevTools → Application → Local Storage; landmark caches use keys starting with `landmark_`.
 
-   - Open `http://localhost:5173` in your browser.
-   - Click the gear icon (**⚙️ Settings**) in the bottom‑left corner.
-   - Fill in `GOOGLE_MAPS_API_KEY` and `OPENAI_API_KEY`, then close to save.
-   - Settings are stored in `localStorage` under `APP_SETTINGS`; landmark caches use keys starting with `landmark_`.
-   - In Chrome, view them under DevTools → Application → Local Storage.
+**Start server proxy for MSFS "moving map**
 
-6. **Start server proxy for MSFS "moving map**
+- Install Python with UV and dependencies (see `pyproject.toml`)
 
 ```bash
+uv pip install .
 python server.py
 ```
 
 ## Usage
 
-- Pan and zoom the Google map. Use the **🔍 search box** to jump to a city or location.
-- Click **🏛️ Landmarks** to fetch nearby points of interest around the map center.
-- Select a landmark card to read the AI-generated description and see a photo.
-- For 3D views, click **[3D]** in the card to explore a photorealistic flyover.
-- Use **📍 My Location** to center the map on your current position.
+- Pan and zoom the Google map. Use **🔍 Location Search** to search a city or place.
+- Click **🏛️ Landmarks** to discover nearby points of interest around the map center.
+- Select a landmark card to read the AI-generated description and see a Wiki photo.
+- Click **[3D]** on landmark cards to explore with a photorealistic 3D map view.
+- Use **📍 My Location** to center the map at current geolocation per browser detection.
 - Open the gear icon (**⚙️ Settings**) to update API keys or clear stored values.
-- Click **🌐 Locale** to toggle preferred locales per browser language setting.
-- When connected to MSFS, click **aircraft ✈️** icon to sync aircraft position.
+- Use **🌐 Locale** to toggle between multiple preferred locales per browser setting.
+- Click **aircraft ✈️** icon to sync aircraft position when connected to MSFS.
 
 ### Testing
 
 - Frontend Test Runner - standalone test script running direct function testing
 - Built-in test mode with mock data from config.json, skipping API calls
 - Runnable on both browser console and Node.js CLI via `npm test`
-- Append `?test=true` to the URL to run tests on-browser
-
-### MIT License - see [LICENSE](LICENSE) for details.
-
-Please respect Google Maps and OpenAI terms of service.
+- Append `?test=true` to the URL to auto-run tests on-browser

index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Map Explorer</title>
+    <title>Mini Moving Map</title>
     <link rel="icon" type="image/svg+xml" href="/globe.svg" />
     <link rel="stylesheet" href="/src/style.css" />
 

public/locales/en.json

@@ -58,6 +58,7 @@
     "location_not_found": "Location not found",
     "geolocation_not_supported": "Geolocation not supported",
     "unable_to_get_geolocation": "Unable to get Geolocation",
-    "moving_map_server_unavailable": "Moving Map server not available"
+    "moving_map_server_unavailable": "Moving Map server not available",
+    "invalid_search_query": "Please enter a valid search query"
   }
 }

server/simconnect.py

@@ -61,7 +61,7 @@ def update_aircraft_data():
         center_long = -122.3754
         radius = 0.01
         t = 0.0
-        print("Starting Circular flight test...")
+        print("Starting Circular flight demo/test mode...")
 
     while True:
         try:

src/backend.js

@@ -10,7 +10,7 @@ import {
 } from './gmap.js';
 import { setCachedLandmarks, findByLocation } from './cache.js';
 import { same_landmarks } from './utils.js';
-import { getCountryLanguage } from './lion.js';
+import { i18n, getCountryLanguage } from './lion.js';
 
 class LandmarkService {
   constructor() {
@@ -99,7 +99,7 @@ class LandmarkService {
       return {
         location: '',
         landmarks: [],
-        error: 'Please enter a valid search query',
+        error: i18n.t('errors.invalid_search_query'),
       };
 
     // Get location details from coordinates

src/cache.js

@@ -6,9 +6,6 @@ import { same_landmarks, distance_km } from './utils.js';
  */
 
 const CACHE_PREFIX = 'landmarks_';
-const CACHE_TTL_HOURS = window.APP_CONFIG?.CACHE_TTL_HOURS ?? 48;
-const CACHE_TTL_MS = CACHE_TTL_HOURS * 60 * 60 * 1000;
-
 const location_index = {};
 
 /**
@@ -115,6 +112,9 @@ export function clearLandmarkCache() {
 
 export function enableLandmarkCache() {
   try {
+    const CACHE_TTL_HOURS = window.APP_CONFIG?.CACHE_TTL_HOURS ?? 48;
+    const CACHE_TTL_MS = CACHE_TTL_HOURS * 60 * 60 * 1000;
+    
     const keys = Object.keys(localStorage);
     const cacheKeys = keys.filter((key) => key.startsWith(CACHE_PREFIX));
     let totalSize = 0;

src/lion.js

@@ -296,7 +296,7 @@ class I18n {
 export const i18n = new I18n();
 
 export async function initi18n() {
-  testI18n();
+  // testI18n();
   i18n.TM = JSON.parse(localStorage.getItem(LOCAL_TM)) || {};
   const source_file = await i18n.loadLocale();
   if (source_file) i18n.updateTM(source_file);
@@ -333,7 +333,7 @@ function isValidLocale(str) {
   return regex.test(str);
 }
 
-function testI18n() {
+export function testI18n() {
   const mock = new I18n();
   const mockSrc = {
     hello: 'Hello, {name}!',
@@ -345,16 +345,16 @@ function testI18n() {
   };
   mock.translations[FALLBACK_LANGUAGE] = mockSrc;
 
-  let tgt = mock.t('hello', { name: 'Tom' });
-  console.log('lion test 1: ', tgt, mock.lang);
-  console.assert(tgt === 'Hello, Tom!', 'Placeholder failed');
+  let tgt = mock.t('hello', { name: 'World' });
+  console.log('L10n test 1: ', tgt, mock.lang);
+  console.assert(tgt === 'Hello, World!', 'Placeholder failed');
 
   mock.updateTM(mockSrc, mockTgt, 'zh');
   console.assert(
     mock.lookupTM('zh') === null,
     'lookupTM should return null when locale is ready'
   );
-  console.debug('TM records:', mock.TM);
+  //console.debug('TM records:', mock.TM);
   let missing = mock.lookupTM('fr');
   console.assert(
     missing && missing.hello === 'Hello, {name}!',
@@ -367,16 +367,16 @@ function testI18n() {
   );
   mock.translations['zh'] = exported;
 
+  /*
   console.debug(
-    'lion test 2: ',
+    'L10n test 2: ',
     (tgt = mock.t('nested.example', { value: 42 }, 'zh'))
   );
   console.assert(tgt === '答案是 42。', 'Nested failed');
-  console.debug('res-bundles: ', mock.translations);
-  console.debug('lion test 3: ', (tgt = mock.t('missing.key')));
+  //console.debug('res-bundles: ', mock.translations);
+  console.debug('L10n test 3: ', (tgt = mock.t('missing.key')));
   console.assert(tgt === 'missing.key', 'Missing key failed');
 
-  /*
   const original_json = {
     app: {
       loading_text: 'Loading map…',
@@ -432,6 +432,7 @@ function testI18n() {
   exported = mock.exportTM('zh', partial_json);
   console.log('Exported:', JSON.stringify(exported, null, 2));
   */
+  return true;
 }
 
 function getLanguageSetting() {