Adding a Splash Screen to Your MazeMap <iframe> Maps

Summary

This example guide shows how to add a splash screen overlay to your MazeMap embed iframe maps using HTML, CSS, and JavaScript. A splash screen is useful for displaying announcements, alerts, welcome messages, or linking users to relevant content (e.g., FAQs) before they interact with the map.

Example of a splash screen.

This is an optional enhancement to standard MazeMap embedding option and does not require changes to the MazeMap platform itself.

This guide is a companion to the main documentation: Embedding MazeMap with <iframe>

1 Summary
2 Skill Level
3 Prerequisites
4 Overview
5 Step-by-Step Setup Examples
6 Example Scenarios
7 Maintenance and Updates
8 Additional Resources
9 Support
10 Full Code Example

Skill Level

Intermediate / Familiarity with HTML, JavaScript, and basic web development concepts.

Prerequisites

Before implementing a splash screen overlay:

A site with MazeMap maps setup via <iframe> embedding from Embedding MazeMap with <iframe> documentation
(Optional) You have an API or CMS endpoint available for dynamic splash message content.

Overview

This guide walks you through how to add a splash screen overlay to your MazeMap iframe embed. A splash screen is a helpful way to show welcome messages, alerts, or important updates before users access the interactive map.

It sits on top of the map when the page first loads and can be dismissed by clicking a button, pressing the Escape key, or clicking outside the box. This improves the experience for first-time users and provides a way to communicate essential information.

The splash screen is fully customisable. Where you can change colours, logos, layout, or even pull content dynamically from an API.

There is a full code example at the bottom of this document.

Step-by-Step Setup Examples

Below are the core steps to add a splash screen to your MazeMap embed. Each step includes a short explanation and example code you can copy and adapt:

Add the HTML structure – This creates the overlay and content box that appears on top of the map.
Style it with CSS – Use custom styles to control the appearance of the splash screen and make it stand out.
Add JavaScript to handle dismissal – Allow users to close the splash screen using a button, the Escape key, or by clicking outside the box.
(Optional) Load message content dynamically – Use an API or content system to update the splash message without changing the code.

a. Add the HTML Structure

The splash screen is made up of a full-page overlay (#splash-overlay) containing a centered message box (#splash-box). This will be placed above the MazeMap <iframe> in your HTML so it appears on top when the page loads.

You can customise the contents of the splash screen to include your logo, a welcome message, and links to important information (e.g., FAQs, alerts, or announcements). This layout ensures users must interact with the screen before accessing the map.

Place the following HTML above your MazeMap <iframe>:

<div id="splash-overlay">
  <div id="splash-box">
    <!-- Title and Description -->
    <h2>Splash Screen Code Example</h2>
    <p> This code example shows how a splash screen can appear before users access the interactive MazeMap. 
    You can use this space to display announcements, alerts, or helpful links.</p>
    <button id="close-btn">Continue to Map</button>
  </div>
</div>

b. Style It with CSS

Place the following CSS inside a <style> block in the <head> section of your HTML document.

This ensures that the splash screen looks visually distinct, centred, and sits above the embedded MazeMap. The styles below include:

A full-page dark overlay (#splash-overlay) that blocks access to the map until dismissed
A centred splash message container (#splash-box) with padding and rounded corners
A styled action button (#close-btn) to continue to the map
Basic layout rules for the MazeMap iframe itself

Customisation Tip:

Update colours, fonts, spacing, or button styling to match your institution’s branding.

If you’re new to CSS, check out MDN’s CSS Basics Guide to get started.

Example CSS:

#splash-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#splash-box {
  background: #222;
  padding: 30px;
  border-radius: 12px;
  max-width: 600px;
  width: 90%;
  text-align: center;
  font-family: sans-serif;
  box-shadow: 0 0 20px #000;
}

#close-btn {
  margin-top: 20px;
  padding: 10px 20px;
  background: #f44336;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  font-size: 1em;
}

#close-btn:focus {
  outline: 3px solid #ff9800;
}

c. Add JavaScript listen for button click

To ensure the splash screen is properly dismissed, you need to handle user interactions.

Place the following JavaScript inside a <script> block at the bottom of your <body> tag. This ensures all referenced elements are present in the DOM when the script runs.

The script enables three ways to dismiss the splash screen:

Clicking the “Continue to Map” button
Pressing the Escape key
Clicking the background overlay (outside the splash box)

Each option removes the overlay (#splash-overlay) so the embedded MazeMap Maps iframe is visible underneath.

Example JavaScript:

// Dismiss splash screen when "Continue" button is clicked
document.getElementById("close-btn").addEventListener("click", function () {
  closeSplash();
});

// Dismiss splash screen on Escape key
document.addEventListener("keydown", function (e) {
  if (e.key === "Escape" && isSplashVisible()) {
    closeSplash();
  }
});

// Dismiss splash screen when clicking outside the box
document.getElementById("splash-overlay").addEventListener("click", function (e) {
  if (e.target === this) {
    closeSplash();
  }
});

// Helper: Hide splash and focus the map
function closeSplash() {
  document.getElementById("splash-overlay").style.display = "none";
  document.querySelector("iframe").focus();
}

// Helper: Check splash visibility
function isSplashVisible() {
  return document.getElementById("splash-overlay").style.display !== "none";
}

You may optionally attach this listener after DOM content is loaded:

document.addEventListener("DOMContentLoaded", function () {
  document.getElementById("close-btn").addEventListener("click", function () {
    document.getElementById("splash-overlay").style.display = "none";
  });
});

This can help if the script is moved to the <head> or loaded asynchronously.

d. Optional: Load Splash Text from API

Use this if you want dynamic message content:

Example JavaScript:

fetch("https://yourdomain.com/api/splashMessage")
  .then(res => res.json())
  .then(data => {
    document.querySelector("#splash-box h2").textContent = data.title;
    document.querySelector("#splash-box p").innerHTML = data.message;
  })
  .catch(err => {
    console.error("Failed to load splash content:", err);
  });

Example JSON:

{
  "title": "🚧 Maintenance Notice",
  "message": "Building A lift is out of service. Use alternate routes."
}

Example Scenarios

· University Welcome Screen

· Temporary Construction Warnings

· Health & Safety Alerts

· Links to Help & FAQ Pages

Maintenance and Updates

If you are using a static message, update the HTML manually.

If dynamic, ensure your CMS or API endpoint is up-to-date and secure.

Additional Resources

· Embedding MazeMap with iframe

· MazeMap JS API (for more advanced control)

Support

If you encounter issues not covered in this guide, please contact MazeMap Support.

Full Code Example

A working example based on the code below can be found at https://demo.mazemap.com.au/mazemap_splash_example.html

Full Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MazeMap with Accessible Splash Screen Code Example</title>

    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        #splash-overlay {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(77, 75, 75, 0.8);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }

        #splash-box {
            background: white;
            border: 2px solid #ff6f02;
            color: black;
            padding: 30px;
            border-radius: 12px;
            max-width: 600px;
            width: 90%;
            text-align: center;
            font-family: sans-serif;
            box-shadow: 0 0 20px #000;
        }

        #close-btn {
            margin-top: 20px;
            padding: 10px 20px;
            background: #ff6f02;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 5px;
            font-size: 1em;
        }

        #close-btn:focus {
            outline: 3px solid #ff9800;
        }

        iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>
</head>

<body>

    <!-- Splash Screen -->
    <div 
        id="splash-overlay" 
        role="dialog" 
        aria-labelledby="splash-title" 
        aria-describedby="splash-desc" 
        tabindex="-1"
    >
        <div id="splash-box">

        <!-- Logo -->
        <img src="image or logo source" alt="Logo" style="max-width: 200px; margin-bottom: 20px;"/>

        <!-- Title and Description -->
        <h1 id="splash-title">Splash Screen Code Example</h1>

        <p id="splash-desc">
            This code example shows how a splash screen can appear before users access the interactive MazeMap. 
            You can use this space to display announcements, alerts, or helpful links.
        </p>
  
        <button id="close-btn" aria-label="Dismiss the splash screen and continue to the map">
            Continue to Map
        </button>

        </div>
    </div>

  <!-- MazeMap Embed -->
  <iframe 
    src="https://use.mazemap.com/?config=mazemap"
    allow="web-share geolocation magnetometer gyroscope"
    title="Interactive MazeMap"
    loading="lazy"
  ></iframe>

   <script>
        // Dismiss splash screen when "Continue" button is clicked
        document.getElementById("close-btn").addEventListener("click", function () {
            closeSplash();
        });

        // Dismiss splash screen on Escape key
        document.addEventListener("keydown", function (e) {
            if (e.key === "Escape" && isSplashVisible()) {
                closeSplash();
            }  
        });

        // Dismiss splash screen when clicking outside the box
        document.getElementById("splash-overlay").addEventListener("click", function (e) {
            if (e.target === this) {
                closeSplash();
            }
        });

        // Helper: Hide splash and focus the map
        function closeSplash() {
            document.getElementById("splash-overlay").style.display = "none";
            document.querySelector("iframe").focus();
        }

        // Helper: Check splash visibility
        function isSplashVisible() {
            return document.getElementById("splash-overlay").style.display !== "none";
        }

        // Set initial focus on the dialog
        window.addEventListener("DOMContentLoaded", function () {
            document.getElementById("splash-overlay").focus();
        });

    </script>

</body>
</html>