Skip to content

βš™οΈ Settings

Customize every aspect of your Panoramax frontendβ€”environment variables, wording, and visualsβ€”all from one place.


πŸ” 1. Environment Variables

Most low-level settings live in the .env file (see env.example). Below is a quick reference grouped by domain.

🌐 General

Variable Description Example Notes
VITE_API_URL Base URL of the Panoramax API https://panoramax.ign.fr/ Required

πŸ—ΊοΈ Map & Viewer

Variable Description Example
VITE_TILES URL to a MapLibre JSON style (vector tiles) https://data.geopf.fr/.../PLAN.IGN/standard.json
VITE_RASTER_TILE Raster (aerial imagery) source (MapLibre raster spec) https://example.com/raster.json (optional)
VITE_ZOOM Default zoom (0–24) 6
VITE_CENTER Default map center longitude,latitude 2.213,46.227
VITE_DISABLE_EDITORS Disable the viewer editor true
VITE_VIEWER_SETTINGS Generic settings for the web viewer on homepage (docs here) { "map-options": {"theme": "score"}, "geocoder": "ban"} (optional)

πŸ“ SEO & Analytics

Variable Description Example
VITE_TITLE <title> value Panoramax IGN: photo-cartographier les territoires
VITE_META_TITLE Meta title (og:title, etc.) Panoramax IGN
VITE_META_DESCRIPTION Meta description for SEO L'instance Panoramax IGN permet ...
VITE_MATOMO_HOST Your Mattomo url instance https://mattomo.panoramax.openstreetmap.fr
VITE_MATOMO_SITE_ID Mattomo ID of the site 1

πŸ’‘ Need a reminder of how these vars are used? Check the src/config files in both app/ and admin/.


✍️ 2. Wording & Languages

You can fully tailor wording for both the end-user app and the admin interface.

πŸ“ Locale Files

Key entries worth editing:

  • title, meta.title, meta.description
  • Help links (upload.description, upload.footer_description_terminal, etc.)

🌍 Translating / Adding Languages

  1. Edit JSON files directly (French & English provided).
  2. Or use the collaborative platform Weblate.
  3. Adding a new locale?
  4. Drop {locale}.json in the locale folder.
  5. Make sure the translation is close to 100% complete : you can translate with the Panoramax Weblate
  6. Register it in shared/locales/index.ts.

Note

If you add a new translation locale, you must also add this locale’s translations to each translation file for the corresponding language. Example in the en-gb file :

"languages": { "fr": "French", "en-gb": "English", "pt-br": "Portuguese Brasil", "pt": "Portuguese", "hu": "Hungarian", "de": "German", "zh-hant": "Chinese (traditional)", "es": "Spanish", "it": "Italian", "da": "Danish", "eo": "Esperanto", "ja": "Japanese", "sv": "Swedish", "nl": "Dutch", "tr": "Turkish" }

  1. Do not forget the keycloak translation here

πŸ–ΌοΈ 3. Visual Assets

Customize the look & feel by replacing the default assets:

Asset File Tip
Logo src/assets/images/logo.jpeg Use a square image for best results
Favicon static/favicon.ico Provide multiple sizes if possible

  • Go back to Setup to see how to use these settings.
  • Ready to tweak components? Visit the Develop documentation.