Custom Share Link Domain Url

This is for making the web application use your own web page domain when presenting a “share” option to the user. Sometimes you want users to generate links to the default MazeMap application, but in other cases you might want them to always open maps via your web page. This depends on the implementation and desired user flows. A Customer Success Manager will be able to facilitate this and help find out what is good for your specific case.

This configuration is done per webapp config in Map Editor:

Users of the embeded maps will then be presented with the same “share screen” in the app as before, but the short link and long link will now point to their custom domain.

This means that the users will be getting a link to https:your-domain.com/ followed by a special mazemap url parameter mazemap_share_url. You (the customer) needs to read this url parameter on your web page and update the embedded map accordingly to give the users the content they want.

Basically, taking the entire value of the parameter, and set the iframe src value to it.

Example JavaScript code snippet:

// Example code on customer web page
// When opening link such as:
// https://your-domain.com/maps/?mazemap_share_url=https%3A%2F%2Fuse.mazemap.com%2F%23v%3D1%26config%3Dcustomer-example-config%26center%3D10.407538%2C63.432910%26zoom%3D19%26zlevel%3D6%26utm_medium%3Dcustom_share_url

const DEFAULT_MAZEMAP_IFRAME_URL = new URL('https://use.mazemap.com/?config=YOUR_CONFIG');

function setMazeMapIframeUrl(url) {
    const iframe = document.getElementById("mazemap-app-iframe");
    if (url && url.href) {
        iframe.src = url.href;
    }
}

// Read the url
const url = new URL(location.href)

// Get the mazemap share url
const mazemapUrlString = url.searchParams.get('mazemap_share_url')

if (mazemapUrl) {
    try {
      // Attempt to convert the url string into a proper URL
      // If the url is not valid or malformed, this will fail and
      // end up in the catch block.
      const url = new URL(string);

      // After valid url parsing, update the iframe with the shared mazemap url
      setMazeMapIframeUrl(url);
    } catch (e) {
        console.error("Error valiadating url", e);
        // Fall back to setting the default iframe URL if there was an error
        setMazeMapIframeUrl(DEFAULT_MAZEMAP_IFRAME_URL.href);
    }
} else {
    // If no MazeMap share url was found, just set the default url
    setMazeMapIframeUrl(DEFAULT_MAZEMAP_IFRAME_URL.href);
}

Full HTML example for full page embed:

Last updated March 2024

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example IFrame Embedded Custom Domain App</title>
    <style>
        body,
        html {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            overflow: hidden;
            /* Optional: Disable scrollbars */
        }

        #mazemap-app-iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
            /* Optional: Remove border */
        }
    </style>

</head>

<body>
    <iframe allow="geolocation https://use.mazemap.com;" id="mazemap-app-iframe" width="100%" height="100%"
        frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
        src="https://use.mazemap.com/?config=customer-example-config" style="border: 1px solid grey"></iframe>

    <script>
        // Example code on customer web page
        // When opening link such as:
        // https://your-domain.com/maps/?mazemap_share_url=https%3A%2F%2Fuse.mazemap.com%2F%23v%3D1%26config%3Dcustomer-example-config%26center%3D10.407538%2C63.432910%26zoom%3D19%26zlevel%3D6%26utm_medium%3Dcustom_share_url

        const DEFAULT_MAZEMAP_IFRAME_URL = new URL('https://use.mazemap.com/?config=customer-example-config');

        function setMazeMapIframeUrl(url) {
            const iframe = document.getElementById("mazemap-app-iframe");
            if (url && url.href) {
                iframe.src = url.href;
            }
        }

        // Read the url
        const url = new URL(location.href)

        // Get the mazemap share url
        const mazemapUrlString = url.searchParams.get('mazemap_share_url')

        if (mazemapUrlString) {
            try {
                // Attempt to convert the url string into a proper URL
                // If the url is not valid or malformed, this will fail and
                // end up in the catch block.
                const url = new URL(mazemapUrlString);

                // After valid url parsing, update the iframe with the shared mazemap url
                setMazeMapIframeUrl(url);
            } catch (e) {
                console.error("Error valiadating url", e);
                // Fall back to setting the default iframe URL if there was an error
                setMazeMapIframeUrl(DEFAULT_MAZEMAP_IFRAME_URL.href);
            }
            // Use history api to just remove the search params from the url
            window.history && window.history.replaceState({}, document.title, location.pathname);
        } else {
            // If no MazeMap share url was found, just set the default url
            setMazeMapIframeUrl(DEFAULT_MAZEMAP_IFRAME_URL.href);
        }
    </script>
</body>

</html>