Articles on: Maps & Integrations

Mapbox Setup

This article explains how to configure Mapbox for Creative Job Hub (CJH), what token types to use, environment variable options, and production vs demo behavior.

Why configure Mapbox per tenant

CJH supports a per-tenant Mapbox public token so each customer controls usage and billing. Using per-tenant tokens isolates billing, avoids shared rate limits, and improves security posture. If a tenant does not configure a token the app falls back to a shared demo token suitable for testing only (demo tokens have shared rate limits and are not appropriate for production). :contentReference[oaicite:0]{index=0}

Where to configure

Tenant administrators configure Mapbox under Settings → Integrations → Mapbox Configuration. Paste the public Mapbox token (the pk.* token) into the tenant field and save.

Token types and usage

Public token (pk.*) — Use this for client-side map rendering (tiles, styles). This is the token you enter in the tenant Mapbox configuration UI.
Secret token (sk.*) — Never expose a secret token in client code. If you call Mapbox APIs server-side (e.g., server-side geocoding or static image generation), store secret tokens server-side and never embed them in the frontend.

Environment variables

CJH supports optional env vars to control style URLs and other Mapbox behavior:
VITE_MAPBOX_STYLE_URL — e.g., mapbox://styles/mapbox/light-v11
VITE_MAPBOX_STYLE_URL_DARK — e.g., mapbox://styles/mapbox/dark-v11

These let you specify default map styles and override them for dark mode. :contentReference[oaicite:1]{index=1}

Geocoding & property coordinates

When a property is created or edited, CJH attempts to geocode the address (server-side) to populate lat/lng coordinates used by the Jobs Map. Geocoding is implemented as a server function that calls Mapbox; if geocoding fails the property is saved without coordinates and a warning can be surfaced for retry. See Property Dialog notes for the geocoding flow. :contentReference[oaicite:2]{index=2}

Demo token limitations & testing

The demo token is convenient for quick testing but is shared and subject to rate limits. For any tenant or environment that will be used for production, testing at scale, or customer demos, configure a per-tenant Mapbox token to avoid hitting shared limits. :contentReference[oaicite:3]{index=3}

Checklist for admins

[ ] Obtain a Mapbox public token from the Mapbox Dashboard. [ ] Paste the token into Settings → Integrations → Mapbox Configuration for the tenant. [ ] If you use custom styles, set VITE_MAPBOX_STYLE_URL (and dark variant) in your environment for builds. :contentReference[oaicite:4]{index=4} [ ] Verify maps load, and test geocoding by adding a property and confirming coordinates are returned.

Troubleshooting: If the map returns token errors, check the browser console for Mapbox errors and verify the token string and tenant mapping. If you see rate limit behavior, confirm whether the tenant is still using the demo token and switch to a per-tenant token for production. :contentReference[oaicite:5]{index=5}

Updated on: 10/01/2026

Was this article helpful?

Thank you!