4. Kiosk - Advanced Editing of JSON File.

About

The Kiosk interface is managed through a JSON configuration file, which allows for detailed customization of settings. While the Kiosk Editor UI covers most configuration options, some advanced adjustments require direct editing of the JSON file. The Kiosk Editor provides access to a Raw JSON editor, enabling you to make these advanced changes directly within the Admin Tool interface.

Page Contents

Prerequisites

To access the Kiosk Manager, you’ll need:

A MazeMap Admin Account.
The Kiosk Manager Role assigned to your account. If you don’t have this role, contact your MazeMap Administrator or Customer Success Manager for assistance.
Understanding of JSON file syntax.

JSON Structure Template

The JSON structure is pre-populated in the Admin Tool. Below is an annotated copy with explanations for each configurable field. Be sure to remove these comments before saving, as JSON does not support comments.

{ 
    "campusId": 523, // Campus ID of the Kiosk's location 
    "directions": null, // (Reserved for future use) 
    "disableShortLinks": false, // Enable/disable short links in QR codes 
    "initialMapView": { // Default view for the map 
        "bearing": 0, // Rotation angle of the map (0 for north) 
        "center": { 
            "lat": 59.911491, // Latitude for map center 
            "lng": 10.757933 // Longitude for map center 
        }, 
        "pitch": 0, // Tilt angle of the map (0 for flat) 
        "zLevel": 1, // Default floor level 
        "zoom": 16 // Zoom level for initial view 
    }, 
    "jsKeyboardEnabled": false, // Enable/disable on-screen keyboard 
    "languages": [ "en" ], // Supported languages for the interface 
    "layout": "landscape", // Orientation: "landscape" or "portrait" 
    "linkWebappConfigTag": null, // WebApp config tag (set by MazeMap Support) 
    "mapStyle": null, // Custom map style URL (null for default) 
    "maps3dEnabled": false, // Enable 3D map rendering 
    "menu": { // Configuration for POI and category buttons 
        "nearestPoiButtons": [ // Buttons for nearest POI of a certain type 
            { 
                "itemId": 33774, // ID of the POI type 
                "itemIdType": "type_id", 
                "text": "Nearest Restroom" // Button label 
            } 
        ], 
        "poiButtons": [ // Buttons for specific POIs 
            { 
                "itemId": 1002389796, // POI ID 
                "itemIdType": "poi_id", 
                "text": "Main Lobby" // Button label 
            } 
        ], 
        "poiTypeButtons": [ // Buttons for POI categories (e.g., restrooms) 
            { 
                "buildingId": null, // Set building ID for specific buildings, or null for campus-wide 
                "itemId": 32278, // POI type ID 
                "itemIdType": "type_id", 
                "text": "Restrooms" // Button label 
            }  
        ] 
    }, 
    "menuBarPortraitHeightCSS": null, // Height of menu bar in portrait mode (e.g., "100px") 
    "showAccessibleModeToggle": false, // Enable/disable accessible layout toggle 
    "theme": "#4C4F65", // Primary theme color (hex format) 
    "viewId": 595, // ID of the view the Kiosk is displaying
    "vioPositioningConfig": null, // (Reserved for future use) 
    "youAreHereMarker": { // "You Are Here" marker configuration 
        "lngLat": { 
            "lat": 59.911491, // Latitude for marker 
            "lng": 10.757933 // Longitude for marker 
        }, 
        "zLevel": 1 // Floor level for the marker
     }
}

Explanation of Key JSON Fields

1. Data managed in the UI

The following fields are configurable through the Kiosk Editor UI, as described in Section 4: Setup Kiosk Interface:

a. initialMapView:

Defines the initial map view for the Kiosk, including center coordinates, zoom level, pitch, and bearing.

b. disableShortLinks:

Controls whether short URLs are used in QR codes. Set to true to disable.

c. layout:

Defines the orientation of the Kiosk, either "landscape" or "portrait".

d. showAccessibleModeToggle:

Enables a toggle for accessible layout, positioning UI elements lower on the screen.

e. theme:

Sets the primary color of the Kiosk, using a hex color code.

f. youAreHereMarker:

Specifies the “You Are Here” marker location with coordinates and floor level.

2. Data managed by editing the JSON File

The following customisations are only available through direct JSON editing:

a. Changing POI Names in JSON:

Rename POIs for better clarity or branding (e.g., renaming "Room 101" to "Conference Room").

b. Delete a POI Button:

Remove specific POI buttons by deleting their JSON entries.

c. Reorder POI Buttons:

Rearrange POI buttons in the Kiosk menu by adjusting their order within the JSON structure.

d. mapStyle: Customising the Map Background

The mapStyle field allows you to replace the default base map with a custom style created in Mapbox Studio. This option gives you control over the look and feel of the map, enabling you to align it with your organisation’s branding or other specific needs.

Examples:

Default Base Map : When set to null, the map color will automatically match the Kiosk theme.

MazeMap Default Style: Use "mazemap://v2022" to match the default MazeMap map style.

Custom Styles: You can create a custom style using MapBox Studio - https://studio.mapbox.com/. Styles need to be shared publicly and follow this standard - "mapbox://styles/{username}/{styleId}"

Open the Kiosk Editor

In the Kiosk Manager, find the Kiosk you want to configure and click EDIT. This opens the Kiosk Editor, where you can customise the Kiosk’s interface and display options.

Steps to Set Up Points of Interest (POI)

1. Open the Kiosk Editor

In the Kiosk Manager, find the Kiosk you want to configure and click EDIT. This opens the Kiosk Editor, where you can customise the Kiosk’s interface and display options.

2. Open the Raw JSON tab

Open the Raw JSON tab at the top of the Kiosk Editor.

3. Change the field

Change the required fields, ensuring the JSON syntax is valid.

4. Click Save

Click the Save button at the bottom right of the JSON editor to apply changes.

5. The Kiosk preview will reload

The Kiosk preview will reload with the changes applied.

Next Steps

After completing your JSON customisations, you can proceed to 5. Displaying the Kiosk on a Panel to review how to display the Kiosk interface.

Troubleshooting Tips

Check the Editor: MazeMap validate the JSON and provide an error on the line when found.
Use JSON Validators: Validate your JSON with tools like JSONLint to avoid syntax errors.
Check for Missing Commas or Brackets: Common issues include missing or extra commas, especially after deleting or rearranging elements.
Hard Reload the Preview: If changes aren’t showing up in the Kiosk preview, click Hard reload Kiosk Preview to refresh the interface.
BaseMap not showing: Make sure that you are using the correct MapBox Style URL and ensure it is set to public.