Check out the issues section to see our progress and also this issue: https://github.com/connectbern/meta/issues/2

Some ideas we are thinking of implementing:

🏠 Interactive Space Map – Idea 🏠

🍳 Kitchen, 🚿 Bathroom, 🛋 Living Room – all mapped out in the system.

When you go to one of these spots, a website pops up 💻.

Optional: you’re blocked ⛔ until you:

Read the page 📖

Click a confirmation ✅

(Or even answer a short quiz 📝 — maybe too advanced for now).

📍 Two Main Areas in the Map

Connect Bern 🔗

The main interactive map area with different rooms and features.

Staying in Bern 🏡

Part 1: Info & guidelines for volunteers 🤝

Part 2: Social space to meet people 🥳

Day mode 🌞 – lively and welcoming.

Night mode 🌙 – a different look & vibe.

💡 Extra Touch: A day/night theme change would make the space feel alive and dynamic ✨.

Here's the description for the developer:

🗺️ WorkAdventure Map Starter Kit

office map thumbnail

🗺️ This is a starter kit to help you build your own map for WorkAdventure.

📚 To understand how to use this starter kit, follow our tutorial.

👨🏻‍🔧 If you have any questions, feel free to ask in the WorkAdventure office.

🚀 Upload your map

In the .env file, you can set your upload strategy to GH_PAGES (default) or MAP_STORAGE. Simply comment out the option you don't want to use.

Uploading a map using GitHub Pages will host your project on GitHub servers, and it's the most straightforward way to add new maps to your world.

Uploading a map using the WA map storage will host your project on WA servers. It's a bit more difficult to set up, but it comes with great advantages, like being able to have private repositories.

🗂️ Structure

We recommend following this file structure:

public/: Static files like PDFs or audio files
src/: Script files or design source files
tilesets/: All PNG tilesets

[!TIP]

If you want to use more than one map file, just add the new map file in the root folder (we recommend creating a copy of office.tmj and editing it to avoid any mistakes).

We recommend using 512x512 images for the map thumbnails.

If you are going to create custom websites to embed in the map, please reference the HTML files in the input option in vite.config.js.

📜 Requirements

Node.js version >= 18

Installation and testing

🛠️ Installation and Testing

With npm installed (which comes with Node.js), run the following command in the root directory of the project:

npm install

Then, you can test your map by running:

npm run dev

You can also test the optimized map as it will be in production by running:

npm run build
npm run prod

You can manually [upload your map to the WA Map Storage](WA Map Storage) by running:

npm run upload

The three important variables that control the upload feature are:

MAP_STORAGE_URL (local: created in .env by the upload command / CI: to be added as a Github secret optionally)
MAP_STORAGE_API_KEY (local: created in .env.secret by the upload command / CI: to be added as a Github secret)
UPLOAD_DIRECTORY (local: created in .env by the upload command / CI: to be added as a Github secret optionally)

Read the documentation to learn more about the upload feature.

📜 Licenses

This project contains multiple licenses as follows:

Code license (all files except those for other licenses)
Map license (office.tmj and the map visual as well)
Assets license (the files inside the tilesets/ folder)

[!IMPORTANT] If you add third party assets in your map, do not forget to:

Credit the author and license of a tileset with the "tilesetCopyright" property by etiding the tileset in Tiled.

Add the tileset license text in LICENSE.assets.

Credit the author and license of a map with the "mapCopyright" property in the custom properties of the map.

Add the map license text in LICENSE.map.

❓ Need Help

If you have any questions or need further assistance, don't hesitate to ask either by email or Discord!

Workadventure

Install / Use

README