🌐 geo!space

The Interactive Mapping IDE in Your Browser

geo!space is a powerful web application that combines professional mapping capabilities with AI-powered automation tools. Create interactive maps, execute Python and JavaScript code, and automate repetitive tasks using natural language prompts - all without installing any software, directly in your browser.

✨ Key Features

🗺️ Professional Mapping

Interactive Map Editor: Create and edit maps using the custom .geospace format
Multiple Data Sources: Support for OSM, GeoJSON, KML, GeoTIFF, GPX, Features, BM (basemap.de), and Overpass API
Layer Management: Vector layers, tile layers, and layer groups with full styling control
OpenLayers Integration: Built on the industry-standard OpenLayers mapping library
Advanced Styling: Dynamic style loading and management system
PWA Transformation: Convert .geospace files into cross-platform Progressive Web Apps

🤖 AI-Powered Automation

Multiple AI Providers: Ollama, OpenAI, Groq, Cerebras, and WebLLM support
Context-Aware Assistants: Specialized AI roles for mapping, coding, and general assistance
Local AI Support: Run AI models locally using WebLLM or Ollama
Natural Language Commands: Control the application using conversational prompts

💻 Development Environment

Monaco Editor: Full VS Code editor experience with syntax highlighting
Python Execution: Complete Pyodide integration with package management and pip requirements
JavaScript Execution: Direct browser JavaScript execution in workers
File System Access: Direct browser integration with local files and workspace persistence
Dependency Management: Automatic pip requirements handling and package installation

🔧 Extensibility

Extension System: Browse, install, and uninstall extensions from the built-in extension manager
Built-in Extensions: WebLLM, Python/JS terminals, Linux terminal
Extension Sources: Add extensions from trusted URLs or the geo!space extension registry
Command Registry: 20+ built-in commands + extensible command system
Build System: Generate publishable maps from .geospace files

🌐 Browser Compatibility

⚠️ Important: geo!space uses the File System Access API which has limited browser support.

✅ Fully Supported: Chrome and Opera
⚠️ Limited Support: Firefox and Safari (partial File System Access API support)

For more details, see File System API

🌟 Use Cases

Data Analysts: Create interactive maps for data visualization
Urban Planners: Design and prototype mapping applications
Developers: Build geospatial applications without complex setup
Researchers: Prototype location-based applications quickly
Educators: Teach mapping and geospatial concepts interactively
App Creators: Transform maps into cross-platform PWAs for mobile, desktop, and web deployment

🚀 Getting Started

1. Connect a Workspace

In the Workspace tab, click the folder icon "Load workspace folder"
Choose a local folder to use as your workspace
This folder will be saved and restored when you reload geo!space

2. Configure AI Assistant (Optional)

Open the settings editor using the settings button in the upper right corner
Configure AI providers and models in the aiConfig section
Set up API keys for your preferred AI services

3. Working with Files

.geospace files: Map files that open in the interactive map editor
Python/JavaScript files: Open in the Monaco code editor with syntax highlighting
Other files: Open in the appropriate editor based on file type

4. Creating Interactive Maps

Double-click .geospace files to open them in the map editor
Use the map editor's UI to interact with layers, features, and styling
Use the input field to run commands or interact with the map via natural language
Add data sources: OSM tiles, GeoJSON files, KML, GeoTIFF, GPX, or custom features
Build PWA: Use the "Build map" button to transform your .geospace file into a cross-platform Progressive Web App

5. Code Development

Edit Python and JavaScript code in the Monaco editor
Execute Python code using Pyodide (Python in the browser)
Run JavaScript code directly in the browser
Use the "Run" button to execute code snippets

6. Resource Catalog

Browse the catalog view for curated maps, datasets, icons, and controls
Select items from catalog categories (datasets, maps, overlays, controls, icons)
Use the "Checkout" button to download items directly to your workspace
Access pre-built basemaps (OpenStreetMap, basemap.de) and sample datasets

💬 Commands & Natural Language

Slash Commands

Use commands starting with / in the map editor's input field:

/python: Execute Python code
/js: Execute JavaScript code
/touch: Create a new, empty file
/save: Save the current file
/build_map: Build a publishable map from the current .geospace file

Rich Command Library

geo!space includes 20+ built-in commands for mapping operations:

Map Navigation: zoom_to_level, center_location
Layer Management: add_layer, delete_layer, add_marker
Data Operations: Import/export various geospatial formats
File Operations: Create, save, and manage workspace files

Natural Language Interaction

Map Editor: Ask questions like "Add a marker at coordinates 52.5, 13.4" or "Change the style of all points to red"
Code Editor: Request code assistance like "Create a function to calculate distance between two points"
General: Ask about app features, get help with workflows, or request explanations

💡 Examples

Create a City Map

1. /touch city-map.geospace
2. "Add OpenStreetMap as base layer"
3. "Download buildings in the current view"
4. "Download trees in the current view"
5. /build_map

Custom App Development

1. Create map with /touch app.geospace
2. Add custom controls using JavaScript with prepackaged libraries (Lit, WebAwesome)
3. Write Python scripts for data processing
4. /build_map for cross-platform deployment

⚙️ AI Configuration

Context-Aware AI Assistants

The AI assistant adapts its role based on your current context:

🗺️ Map Editor: Specialized for mapping tasks, layer management, and geospatial operations
💻 Code Editor: Focused on coding assistance, debugging, and code generation
🌐 General App: Helps with app navigation, features, and general workflows

Each assistant can be identified by its icon and help hint in the AI view.

AI Provider Setup

Configure AI providers in the app settings (accessible via the settings button in the upper right corner). The settings are stored in IndexedDB under the settings.json section:

{
  "aiConfig": {
    "defaultProvider": "openai",
    "providers": [
      {
        "name": "ollama",
        "model": "gemma3:12b",
        "chatApiEndpoint": "http://localhost:11434/v1/chat/completions",
        "apiKey": ""
      },
      {
        "name": "openai",
        "model": "gpt-4.1",
        "chatApiEndpoint": "https://api.openai.com/v1/chat/completions",
        "apiKey": "<your api key>"
      },
      {
        "name": "groq",
        "model": "llama-3.1-8b-instant",
        "chatApiEndpoint": "https://api.groq.com/openai/v1/chat/completions",
        "apiKey": "<your api key>"
      },
      {
        "name": "cerebras",
        "model": "llama3.1-8b",
        "chatApiEndpoint": "https://api.cerebras.ai/v1/chat/completions",
        "apiKey": "<your api key>"
      },
      {
        "name": "webllm",
        "model": "gemma-2-9b-it-q4f16_1-MLC",
        "chatApiEndpoint": "",
        "apiKey": "",
        "parameters": {
          "context_window_size": 4096
        }
      }
    ]
  }
}

Setup Instructions:

Open the settings editor using the settings button in the upper right corner
Replace <your api key> with your actual API keys for each provider
Set defaultProvider to your preferred provider name
For Ollama: Install locally and ensure it's running on localhost:11434
For WebLLM: No API key needed - runs models locally in the browser
- ⚠️ GPU Requirement: Requires a dedicated GPU with sufficient VRAM to run the selected model
- Models like gemma-2-9b-it-q4f16_1-MLC typically need 8GB+ VRAM
Settings are automatically saved to IndexedDB - no manual file management required
You can change the default provider in the AI view after connecting to a workspace

🔧 Troubleshooting

Common Issues

File Not Found

If you don't see expected files, try reloading the workspace
Ensure the workspace folder is properly connected

AI Assistant Not Working

Verify settings are correctly configured in the app settings (stored in IndexedDB)
Check that your API keys are valid and properly formatted
For local providers (Ollama), ensure the service is running

Browser Compatibility Issues

Use Chrome or Opera for full functionality
Firefox and Safari have limited File System Access API support

Map Not Loading

Check that .geospace files contain valid JSON
Verify data source URLs are accessible
Ensure required resources (icons, styles) are available

❓ FAQ

Q: Do I need to install anything? A: No! geo!space runs entirely in your browser. Just open it in Chrome or Opera.

Q: Is my data secure? A: Yes. All data stays in your browser and local workspace. No data is sent to external servers unless you explicitly use AI services.

Q: Can I use geo!space offline? A: Yes, for basic mapping features. AI assistance requires internet connection (except for local providers like Ollama/WebLLM).

Q: How do I share my maps? A: Use the "Build map" button to create a PWA that can be deployed anywhere or shared as a standalone app.

Q: What file formats are supported? A: Maps: .geospace (JSON), Data: GeoJSON, KML, GPX, GeoTIFF, Features, BM (basemap.de), Overpass API. Code: Python, JavaScript, and more.

Q: Can I customize the interface? A: Yes! Install extensions, create custom controls using WebAwesome components, or add your own extensions.

Q: What extensions are available? A: Built-in extensions include WebLLM, Python/JS terminals, Linux terminal, and more. Browse and install from the extension manager.

🏗️ Technical Architecture

Frontend Stack:

Lit: Web components framework
TypeScript: Main development language
Vite: Build tool and development server
Monaco Editor: VS Code's editor component
WebAwesome: Web components library (also available for custom map controls)

Mapping Stack:

OpenLayers: Professional mapping library
Custom Runtime: Map-to-OpenLayers conversion system
Style Loader: Dynamic style loading

AI Stack:

Multiple Providers: Flexible AI provider system
WebLLM: Local AI model execution
Context-Aware: Specialized AI roles per context

🤝 Trusted by

Kiosk Scout: A cross-platform PWA for finding nearby vending machines
Want your geo!space app listed here? Contact us!

⚡ Quick Start

Get up and running in 3 minutes:

Open geo!space in Chrome or Opera
Connect workspace - Click folder icon and select a local directory
Create your first map - Use /touch my-map.geospace or open existing files
Try AI assistance - Ask "Add a marker at [your location]" in the map editor
Build your app - Use /build_map to create a deployable PWA

First-Time Setup

No AI needed: Start mapping immediately without configuration
AI setup: Open settings → configure API keys for enhanced assistance
Extensions: Browse and install extensions from the extension manager

🎯 Ready to Start?

Load the app in Chrome or Opera
Connect a workspace folder
Create your first map or open an existing .geospace file
Ask the AI for help with mapping tasks
Build and share your interactive maps

Happy mapping! 🗺️✨

Name		Name	Last commit message	Last commit date
Latest commit History 53 Commits
.github/workflows		.github/workflows
.vscode		.vscode
public		public
scripts		scripts
src		src
.gitignore		.gitignore
CI-CD-INTEGRATION.md		CI-CD-INTEGRATION.md
LICENSE		LICENSE
README.md		README.md
TESTING.md		TESTING.md
iframe-map-renderer.html		iframe-map-renderer.html
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
tsconfig-build.json		tsconfig-build.json
tsconfig.json		tsconfig.json
vite.config.ts		vite.config.ts
vitest.config.ts		vitest.config.ts

License

erdalkaraca/geospace

Folders and files

Latest commit

History

Repository files navigation