MapView Dev Environment

Docker Compose workspace that bundles the pieces of a basic geospatial stack:

• GeoServer (2.24) with the bundled sample Natural Earth layers
• Frontend Vue 3 + Vite + Vuetify UI served in dev mode with MapLibre pointing at GeoServer
• FastAPI backend exposing example JSON endpoints
• Nginx edge proxy that fronts every service for easy access from Windows, WSL, or other hosts

Prerequisites

• Docker Desktop (or Docker Engine) with Docker Compose plugin
• Node.js and Python are not required on the host—the containers provide the tooling

Quick start

docker compose build
docker compose up

Open http://localhost in your browser to view the UI through the Nginx proxy.

Service map

• http://localhost → Vue dev server (proxied)
• http://localhost/api/data → FastAPI sample JSON
• http://localhost/api/feature?shape=rect|line → GeoJSON geometry generator
• http://localhost/geoserver → GeoServer console (default login admin / geoserver)
• Direct container ports (for debugging):
  • UI localhost:5173
  • Backend localhost:8000
  • GeoServer localhost:8080

All services share the same bridge network so containers can reference each other by name (e.g. http://backend:8000 from Nginx).

GeoServer sample data

The official GeoServer image ships with open-source sample data (Natural Earth, topp workspace). Because we persist the data directory (/opt/geoserver_data/data) in a named Docker volume, these layers are available immediately—no manual seeding required. You can add more data through the GeoServer web console; changes persist across restarts.

UI development

The UI container runs npm install on startup and launches the Vite dev server with HMR. Any edits to files under services/ui on the host automatically refresh the browser. The MapLibre component now uses the MapLibre North America sample basemap (served by https://demotiles.maplibre.org/style.json) and overlays GeoJSON geometries returned by the backend. A control panel in the UI lets you request random rectangles or lines; each click adds a new annotation to the map.

Backend development

The backend container mounts services/backend and executes Uvicorn with --reload so code edits apply instantly. Try the sample endpoint:

curl http://localhost/api/data
curl \"http://localhost/api/feature?shape=rect\"
curl \"http://localhost/api/feature?shape=line\"

Stopping and cleanup

docker compose down
# remove persistent GeoServer + node_modules volumes if desired
docker volume rm mapview_geoserver_data mapview_ui_node_modules

Troubleshooting

• If the UI cannot load map tiles, confirm GeoServer is responding at http://localhost/geoserver/wms.
• The compose file exposes each service directly, so you can hit localhost:5173, localhost:8000, or localhost:8080 for debugging outside of Nginx.
• The default MapLibre basemap is served from demotiles.maplibre.org; ensure the environment has outbound internet access or replace the style URL with an internal source.

Issues

• Proxy on grafana is not working currnetly