Files

2.3 KiB

XPro Map Visualizer

Tiny static WMS viewer for the GeoServer endpoint at https://xpro-viz.jfig.net/geoserver/xpro/wms.

Run locally

Start the included Node server:

npm install
npm start

Then open http://localhost:4173.

Run with Docker

Using Docker Compose:

cp .env.example .env
# Edit .env and set GEOSERVER_PASSWORD.
docker compose up --build

Then open http://localhost:4173.

Build the image:

docker build -t xprov-map-visualizer .

Run the container:

docker run --rm -p 4173:4173 xprov-map-visualizer

Then open http://localhost:4173.

The browser never receives the GeoServer password. Configure it in .env for the backend proxy:

GEOSERVER_USERNAME=admin
GEOSERVER_PASSWORD=change-me

To change the default WMS endpoint or allow additional WMS endpoints through the proxy, edit .env:

WMS_ENDPOINT=https://xpro-viz.jfig.net/geoserver/xpro/wms
ALLOWED_WMS_ENDPOINTS=https://xpro-viz.jfig.net/geoserver/xpro/wms,https://example.com/geoserver/wms

Notes

  • The app does not store the password in the repo, local storage, or the browser.
  • The included server proxies WMS requests so the browser does not run into cross-origin auth issues.
  • The proxy only allows configured WMS endpoints. By default it allows the XPro GeoServer endpoint.
  • It fetches WMS capabilities with backend HTTP Basic Auth and loads all discovered layers on top of OpenStreetMap.
  • The currently published layers discovered during setup were parcelas and predios.

Sharing a map view

The URL updates as the map is moved, zoomed, rotated, or its visible layers or base map are changed. An open parcel or building information dialog is included too. Copy the URL to share that exact state; opening it restores the same map view and selected feature. Invalid or incomplete map parameters fall back to the normal default view.

Translations

The interface selects English, Spanish, or Portuguese from the browser preference on the first visit and remembers subsequent changes made in Settings. Unsupported languages and missing messages fall back to English.

To add another language:

  1. Add a dictionary with the same keys to TRANSLATIONS in i18n.js.
  2. Translate every value, including accessibility labels and status messages.
  3. Run npm test to verify that the dictionary is complete.