Flyai Travelmapify

Create interactive travel route maps from location names with real FlyAI hotel search. Supports AI Vision analysis of travel planning images.

Security Scan

The skill largely matches its stated purpose, but its local proxy/server component runs shell commands with unsanitized inputs, exposes a built-in Amap API key, and opens CORS to all origins — these are concrete security concerns you should understand before running it.

Purpose & Capability

Name/description (create maps, geocode, hotel search, AI Vision) matches the included Python/JS scripts. FlyAI CLI and amap-maps dependency are expected for hotel search and Amap geocoding. Minor oddity: the skill bundles an embedded default Amap API key and expects a local amap-maps sibling; both are functional but should be justified by the author.

Instruction Scope

SKILL.md instructs the agent to auto-start local HTTP and hotel servers and to use AI Vision for OCR; the code implements this. However, the included Node proxy (scripts/amap-proxy.js) accepts HTTP requests and spawns shell commands using unsanitized user-supplied query and city values (child_process.exec via interpolated strings). Combined with permissive CORS ('*'), this creates a local command-injection vector if a crafted web page or local input can reach the proxy.

Install Mechanism

No remote download/install spec is present — the skill is instruction + local code files only. There are Python and Node scripts but nothing is fetched from arbitrary URLs during install. That lowers supply-chain risk, though the included code must still be reviewed.

Credentials

The manifest declares no required environment variables, but the code embeds a default Amap API key ('88628414733cf2ccb7ce2f94cfd680ef') and also reads AMAP_KEY from env. Embedding a usable API key in shipped code is risky (key leakage/abuse). The proxy also expects a relative amap-maps sibling and will execute its scripts, meaning other local skill code can be run — this expands the execution surface beyond the single skill.

Persistence & Privilege

The skill auto-starts local servers (HTTP and hotel-search) and scans OpenClaw workspace locations to discover executables — that's consistent with its stated auto-management behavior. It does not request always:true or elevated OS-level privileges in the metadata, but running persistent local servers increases attack surface (esp. when paired with the proxy issues above).

What to consider before installing

What to consider before installing/running: - Don't run this on a sensitive machine without review. The shipped Node proxy (scripts/amap-proxy.js) builds shell commands by concatenating user-provided query/city strings and runs them with exec — this can permit command injection if the proxy receives crafted input. Because the proxy sets Access-Control-Allow-Origin: '*', a malicious webpage could trigger requests to the local proxy and exploit that risk. - The package contains an embedded Amap API key. That key may be abused or rate-limited; prefer setting AMAP_KEY yourself and remove the default from the code before use. - The proxy executes code from a relative amap-maps directory (node scripts/amap.js). If that sibling skill or path is missing or untrusted, arbitrary code could be executed. Verify the amap-maps code that will be invoked. - Mitigations: run the skill in an isolated VM/container; bind local servers to 127.0.0.1 only and use firewall rules to prevent external access; replace the proxy with a version that sanitizes/validates inputs or uses safe parameter passing (no shell interpolation); set your own AMAP_KEY via environment variable and remove the embedded key from source; audit main_travel_mapify_enhanced.py and hotel-search-server.py for other exec/spawn/network calls. - If you cannot audit the code yourself, do not run it on a machine with sensitive data or network access. Consider asking the author to fix input sanitization and remove hardcoded credentials before use.

Travel Mapify

Create interactive, professional travel route maps from location names.

Overview

This skill automatically:

1. Processes text input: Parses comma-separated location names directly
2. Geocodes locations to get precise coordinates using Amap API
3. Generates interactive maps with route optimization and POI management
4. Supports AI Vision workflow: When given travel planning images, use agent's AI Vision to extract POI names, then process as text input
5. Geocodes locations to get precise coordinates using Amap API
6. Generates interactive maps with route optimization and POI management
7. Integrates real hotel search using FlyAI for actual hotel recommendations
8. Creates professional outputs ready for sharing and presentation

When to Use

Text Input Mode:

• User provides comma-separated location names directly (e.g., "上海外滩,上海迪士尼乐园,豫园")
• User wants to quickly create a travel map from a simple list of destinations
• User has location names but no visual reference image

AI Vision Image Processing Workflow:

• User has a travel planning image (screenshot, photo, or digital plan)
• Agent uses AI Vision to analyze the image and extract POI names with sequence/order
• Extracted POI names are passed as text input to the skill
• This hybrid approach combines AI automation with the skill's robust text processing

Hotel Integration Mode:

• User wants real hotel recommendations near their destination
• User needs actual pricing and availability data
• User wants booking links for hotels through FlyAI integration

Workflow

Step 1: Input Processing and POI Extraction

For Direct Text Input:

• Parse comma-separated location names directly
• Create POI entries with high confidence (user-provided)
• Automatic city detection: Smart city detection from location names (e.g., "北京军事博物馆" → city="北京")
• Fallback to default: Uses Shanghai as default when no city can be detected

For Image Input (AI Vision Workflow):

• Use agent's AI Vision capability to analyze travel planning images
• Extract POI names and sequence from numbered markers or route indicators
• Preserve exact order as marked in the original image
• Pass extracted names as text input to the skill's standard processing pipeline
• Leverage existing text processing for geocoding, validation, and map generation

Step 2: Geocoding and Coordinate Resolution

• Use Amap geocoding API to resolve location names to precise coordinates
• Handle ambiguous locations with user confirmation
• Validate coordinate accuracy

Step 3: Enhanced Map Generation

• Use optimized travel_mapify with unique map ID isolation as main template with all UX improvements
• Automatic localStorage isolation based on POI names to prevent data conflicts between different maps
• Optimized performance with streamlined template generation and reduced dependencies
• Create a single dual-mode interface with toggle between Edit/View modes
• Implement drag-and-drop and arrow button reordering (edit mode only)
• Generate optimized route with directional arrows
• Add "Generate Final" functionality to download clean version
• Integrate real FlyAI hotel search with professional loading states
• Replace alert popups with notification system

Step 4: Automatic Server Management

• Automatically start HTTP server on port 9000 (or specified port)
• Automatically start hotel search server on port 8770 (or specified port)
• Check if servers are already running to avoid conflicts
• Provide direct access URLs in output
• Ensure all functionality is ready when map creation completes

Step 4: Professional Output Delivery

• Provide unified HTML file that works in both editing and presentation contexts
• Include clear instructions for toggling modes and generating final version
• Ensure mobile-responsive design

File Structure

flyai-travelmapify/
├── SKILL.md
├── INSTALL.md                          # Installation and setup guide
├── flyai-travelmapify.py              # **PORTABLE ENTRY POINT**: Main executable script
├── scripts/
│   ├── config.py                      # **DYNAMIC CONFIGURATION**: Path and environment detection
│   ├── main_travel_mapify_enhanced.py # **PRODUCTION MAIN**: Auto-starts servers + text input + unique ID isolation
│   ├── geocode_locations.py           # Amap geocoding integration
│   ├── generate_from_optimized_template.py # Optimized template with unique map ID isolation
│   └── hotel-search-server.py         # FlyAI hotel search backend server

**Note**: Image processing is handled externally using the agent's AI Vision capability. The extracted POI names are passed as text input to this skill.
├── references/
│   ├── amap_api_guide.md              # Amap API usage patterns
│   ├── poi_validation_rules.md        # POI validation and filtering rules
│   └── troubleshooting-guide.md       # Common issues and solutions
└── assets/
    └── templates/
        └── main-generic-template-with-unique-id.html # **PRODUCTION TEMPLATE**: Unique ID isolation + all features

Main Template: The skill now uses the optimized travel_mapify system with unique map ID isolation as the primary approach, which includes:

• Optimized Template Generation: Streamlined HTML generation with minimal dependencies
• Unique Map ID Generation: Automatically creates a hash-based ID from POI names (e.g., travelMap_abc123) to isolate localStorage data
• No Cross-Map Data Contamination: Each travel map saves/retrieves data independently using its unique ID
• Persistent Per-Map State: Hotel searches, date selections, and POI reordering are saved separately for each map
• Enhanced Performance: Reduced template complexity and faster map loading
• Real FlyAI hotel search integration
• Professional notification system (no alert popups)
• Loading states with timeout handling
• Enhanced UX with smart defaults

Automatic Server Management: The enhanced main script automatically starts both HTTP server (port 9000) and hotel search server (port 8770) when generating maps, ensuring all functionality is ready immediately.

Usage Examples

Portable Execution

# From skill directory (recommended)
python3 flyai-travelmapify.py --locations "上海外滩,迪士尼乐园,豫园" --output-html shanghai-trip.html

# From any directory
python3 /path/to/flyai-travelmapify/flyai-travelmapify.py --locations "北京故宫,天坛,颐和园" --output-html beijing-trip.html

# AI Vision Image Processing Workflow:
# 1. Use agent's AI Vision to analyze travel image and extract POI names
# 2. Pass extracted names as text input to the skill
# Example: locations="解放碑,山城步道,十八梯,白象居,湖广会馆,来福士,洪崖洞,千厮门大桥"

# With custom ports
python3 flyai-travelmapify.py --locations "Tokyo Tower,Shibuya Crossing" --output-html tokyo-trip.html --http-port 8080 --hotel-port 9000

Image Input - AI Vision Enhanced

User: "Here's my travel plan screenshot, can you make it interactive?" → Skill analyzes image using AI Vision model → If needed, requests clarification: "What city is this for?" or "How many attractions are marked?" → Extracts attractions with preserved sequence and generates interactive map

Image Input - Manual Clarification

User provides image → Skill detects uncertainty → Requests city context → User responds "重庆" → Skill processes with enhanced accuracy

Image Input - Direct POI Entry

When AI Vision cannot confidently identify attractions, skill prompts: "Please provide attraction names in order, separated by commas"

Image Input - Advanced Usage

User: "I have a photo of our Beijing itinerary, please create a shareable map" → Skill processes image, validates locations, creates optimized route with professional styling

Text Input - Direct Locations with Auto City Detection

User: "北京军事博物馆,北京科技大学" → Skill auto-detects city="北京" from location names → Parses locations directly, geocodes them, and generates interactive map

Text Input - Default City Fallback

User: "外滩,迪士尼乐园,豫园" → Skill cannot detect city from generic names → Uses default city="上海" for geocoding → Generates interactive map

Text Input - Simple List

User: "Create a travel map for: Tokyo Tower, Shibuya Crossing, Meiji Shrine" → Skill extracts location names, geocodes them, creates optimized route

Hotel Search Integration

User: Clicks "搜酒店" button in generated map → Real FlyAI hotel search returns actual hotel data with prices and booking links → No mock data - uses real-time Fliggy MCP integration → Professional UX with loading states and notifications (no alert popups) → Default dates: today for check-in, tomorrow for check-out (1-night stay)

Customization Request

User: "Can you adjust the route order and add missing locations?" → Skill provides editable interface with search functionality and reordering tools

Technical Requirements

• Python 3.7+: Required for all scripts (uses standard library only)
• FlyAI CLI: Must be installed globally (npm install -g @openclaw/flyai)
• Amap API: Uses built-in default API key (no user key required)
• Local Proxy: Built-in proxy server handles Amap API requests (default port 8769)
• Web Browser: Modern browser with JavaScript support for interactive features

Required Skills

This skill depends on the following OpenClaw skills:

• amap-maps: Provides Amap LBS services for geocoding, POI search, and location services

Both skills must be installed in your OpenClaw workspace under the skills/ directory:

~/.openclaw/workspace/
├── skills/
│   ├── flyai-travelmapify/
│   └── amap-maps/

Portable Design

✅ No hardcoded paths - Automatically detects OpenClaw workspace and FlyAI installation ✅ Cross-platform - Works on Windows, macOS, and Linux ✅ Self-contained - All scripts and templates included in skill directory ✅ Environment-aware - Adapts to different system configurations ✅ Fallback mechanisms - Multiple detection methods for required components

Output Files

The skill generates HTML files using the optimized travel_mapify system with unique map ID isolation as the main template:

[location]-travel-map-optimized.html - Dual-mode interface with all professional enhancements:

• Real FlyAI Hotel Search Integration:
  • Actual hotel data with prices and booking links
  • Loading states with "搜索中..." button text
  • 5-second timeout with auto-re-enable
  • No mock data - uses real Fliggy MCP integration
• Professional UX Improvements:
  • Notification system instead of alert popups
  • Auto-hiding messages after 3 seconds
  • Smart date defaults (today check-in, tomorrow check-out)
• Edit Mode (📝): Full-featured editing interface with:
  • Left-panel POI management
  • Search functionality for adding new locations
  • Drag-and-drop and arrow button reordering
  • Real-time map preview
• View Mode (👁️): Clean presentation version with:
  • Optimized route display
  • Numbered POI markers with directional arrows
  • Professional styling ready for sharing
• Generate Final: Download button to create a clean version without edit controls

Files are self-contained and work in any modern web browser when served via HTTP server.

Error Handling

• Poor Image Quality: Request higher quality image or manual POI entry
• Ambiguous Locations: Present options for user selection
• API Rate Limits: Implement retry logic with exponential backoff
• Missing Coordinates: Fall back to approximate coordinates with user verification
• HTML Display Issues: Use local HTTP server instead of file:// protocol
• Map Loading Failures: Check AMap API key restrictions and network connectivity
• localStorage Corruption: Implement fallback data and validation logic

Enhanced UX Features

Professional User Interface:

• No alert popups: All messages displayed in non-intrusive notification area
• Loading states: Hotel search button shows "搜索中..." during API calls
• Timeout handling: 5-second timeout automatically re-enables search button
• Auto-hiding notifications: Messages disappear after 3 seconds
• Visual feedback: Error messages in red, success messages in green

Smart Defaults:

• Date selection: Today for check-in, tomorrow for check-out (1-night stay)
• Hotel sorting: Results sorted by distance from destination
• Top results: Shows top 5 closest hotels for better user experience

Best Practices

• Always verify extracted POIs with the user before finalizing
• Provide clear instructions for customizing the generated maps
• Optimize for mobile viewing with responsive design
• Include north indicator and scale reference for professional appearance
• Always test via HTTP server: Never rely on file:// protocol for web applications
• Implement robust error handling: Wrap API calls and provide user feedback
• Validate all inputs: Sanitize data before processing
• Document dependencies: Clearly specify API keys, network, and browser requirements
• Use optimized travel_mapify with unique map ID isolation: All travel maps now automatically generate unique IDs based on POI names to prevent localStorage conflicts between different maps
• Leverage enhanced performance: The optimized system provides faster map generation and loading