Map Explorer 3D
Interactive 3D map viewer. Colors update in real-time based on Firestore data.

To see dynamic color updates:

  1. Ensure your Firebase project is configured in src/lib/firebase.ts.
  2. In your Firestore database, create a collection named mapAreas.
  3. Add documents to this collection. The document ID should match an area ID from the map data (e.g., area-g-1, area-1-2).
  4. Each document should have a field named color with a hex string value (e.g., #FF0000 for red).

Default area IDs in this demo: area-g-1, area-g-2, area-g-3, area-1-1, area-1-2, area-1-3.