Browser Apps

Print Layouts (Browser)

In this post we are talking about printing in browser based applications.

⚠️

This post gets updates if new code snippets are worth mentioning.

To use Print Layouts in browser applications you have to do the following steps:

Upload your HTML file
Assign one or more print layouts to the MapView
Use the print layout in the browser application

⚠️

Not supported:

Printing in Dashboard

Create an HTML template

Upload to MAE Studio

If you are satisfied with your template, you have to upload it to the M.App Enterprise Studio. Therefore you have to go to the Browser section and in there you will find a subitem called Print Layouts. When you have decided for which format you want to upload the Print Layout you can click on the icon.

Assignment of template(s)

If you have successfully uploaded your HTML templates you can assign one or more templates to your Map View to make it available afterwards in your browser based application. If you have uploaded more than one template, you can define a Default one (), which should be loaded first in the dropdown list, when opening up the print preview dialog in your browser application.

Use print template(s)

If you have assigned one or more Print Layouts to your browser application you see a new icon in the Menu bar ( ).

If you click this icon you will be forwarded to the Print Preview. On the right hand side you get information about the template:

Name
Size
Orientation
Hint that you can change the map to your liking

💡

Pan, Zoom and Tilt is working as you are used to in the browser application

Examples

The idea of this section is to create a print layout like seen in the screenshot below:

Let's split up the printlayout in different sections:

Generic CSS code
Custom CSS code
Header
Map
Footer
Customization

Generic CSS code

⚠️

Changing parameters here don't guarantee that the print layout is shown as intended.

  <style class="mae-default-rules">
      /* Reset all margin and padding presets */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0 auto;
      }
      body, h1, h2, h3, h4, h5, h6  {
        font-family: "Segoe UI", Arial, sans-serif;
      }
      #mae-paper {
        width: 100%;
        height: 100%;
      }

      #mae-map {
        width: 100%;
        height: 100%;
      }

      .mae-margin-normal {
        padding: 1in;
      }
      .mae-margin-narrow {
        padding: 0.5in;
      }
      .mae-margin-wide {
        padding: 1.5in;
      }
    </style>

Custom CSS code

  <style>
      /**
      * Custom Layout
      */

      #mae-paper {
        display: flex;
        flex-direction: column;
        gap: 12px
      }

      .map-wrapper {
        width: 100%;
        flex: 1;
      }
      .footer {
        display: flex;
        gap: 12px;
        padding:0.5em;
        height: 100px;
      }
	  
	  .header {
        display: flex;
		    align-items: flex-start;
        gap: 12px;
		    padding:0.5em;
      }
	  
	  .logo {
		    margin-right: 20px; /* Adds space between the logo and the text */
        /* border: 1px solid black; */
        flex: 1;
	  }	
	  
	  .text h2 {
		    margin: 0;
	  }

    .text {
        margin: auto;
        /* border: 1px solid black; */
        padding:0.5em;
        width: 75%;
        flex: 6;
    }
    .date {
        margin: auto;
        padding:0.5em;
        /* border: 1px solid black; */
        flex: 1;
    }

    .map-compass-wrapper {
        width: 70px;
        height: 70px;
        display: block;
    }
      /**
      * Custom Style
      */
      #mae-map,
      .footer, .header {
        border: 1px solid black;
      }
    </style>

For the header we are going with a logo on the left side, some titles in the center and the current date on the right hand side. In the code snippet there is a placeholder called "THE_LOGO" → you have to replace it with your own logo (must be accessible from the MAE application server).

  <div class="header">
		    <div class="logo">
			    <img src="THE_LOGO" style="width: 15em;"></img>
		    </div>
		    <div class="text">
          <h2>M.App Enterprise - Default A4 Landscape Template </h2>
          <br />
          <strong>Default SubTitle</strong>
		    </div>
        <div class="date">
          <strong><label>Date:</label><div id="datetime"></div></strong>
        </div>
      </div>

For the current time some JavaScript code is necessary, which can be put at the end of the HTML page within a <script> tag:

<script>
    // Get current date and time
    var now = new Date();
    var datetime = now.toLocaleDateString();
  
    // Insert date and time into HTML
    document.getElementById("datetime").innerHTML = datetime;
  </script>

Map

⚠️

The map component is only rendered correcly in the App itself and not when just opening the HTML page within a browser.

  <div class="map-wrapper">
      <div id="mae-map"></div>
    </div>

In this example the footer contains only text with a border:

  <div class="footer">
      <div class="text">
        Disclaimer: Please note that the scale bar will not apply to the full map content if 3D content is shown. All measurements taken from the print out are not official.
        Copyright © Hexagon AB 2024
      </div>
    </div>

Customization

Custom compass

In this example we provide a custom compass defined as a SVG.

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 283.5 283.5">
      <defs>
      <style>
        .st0 {
        font-family: Arial-Black, Arial;
        font-size: 62px;
        font-weight: 800;
        }
      </style>
      </defs>
      <path d="M141.1,39.3l-15.7,75.7-28.4-18.6-.6.6,18.6,28.3-75.5,15.7v1.4l75.5,15.7-18.7,28.5.6.6,28.4-18.6,15.7,75.6h1.4l15.7-75.7,28.4,18.6.6-.6-18.6-28.3,75.5-15.7v-1.4l-75.5-15.7,18.7-28.5-.6-.6-28.4,18.6-15.7-75.6h-1.4,0ZM141.1,46.2v93.8l-16.1-16.1,1.7-8,14.5-69.6h0ZM183.5,99.4l-23.7,23.7-1.5-7.2,25.2-16.5h0ZM99.5,100l23.6,23.6-7.2,1.5-16.5-25.1h0ZM159.5,125l8.2,1.7,69.4,14.4h-93.8l16.1-16.1h0ZM46.4,142.3h93.8l-16.1,16.1-8.2-1.7-69.4-14.4h0ZM142.4,143.5l16.1,16.1-1.7,8-14.5,69.6v-93.8h0ZM167.5,158.3l16.5,25.1-23.6-23.6,7.2-1.5h0ZM123.6,160.4l1.5,7.2-25.2,16.5,23.7-23.7h0Z"/>
      <text class="st0" transform="translate(115.9 49)"><tspan x="0" y="0">N</tspan></text>
    </svg>

⚠️

You have always to use <div class="map-compass-wrapper"> AND <div id="mae-map-compass"> in order to use a compass in your print layout. If you just use the two divs stand-alone you will get the "default" compass we are providing out-of-the-box.

The full HTML can be copied from here:

  <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style class="mae-default-rules">
      /* Reset all margin and padding presets */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0 auto;
      }
      body, h1, h2, h3, h4, h5, h6  {
        font-family: "Segoe UI", Arial, sans-serif;
      }
      #mae-paper {
        width: 100%;
        height: 100%;
      }

      #mae-map {
        width: 100%;
        height: 100%;
      }

      .mae-margin-normal {
        padding: 1in;
      }
      .mae-margin-narrow {
        padding: 0.5in;
      }
      .mae-margin-wide {
        padding: 1.5in;
      }
    </style>
    <style>
      /**
      * Custom Layout
      */

      #mae-paper {
        display: flex;
        flex-direction: column;
        gap: 12px
      }

      .map-wrapper {
        width: 100%;
        flex: 1;
      }
      .footer {
        display: flex;
        gap: 12px;
        padding:0.5em;
        height: 100px;
      }
	  
	  .header {
        display: flex;
		    align-items: flex-start;
        gap: 12px;
		    padding:0.5em;
      }
	  
	  .logo {
		    margin-right: 20px; /* Adds space between the logo and the text */
        /* border: 1px solid black; */
        flex: 1;
	  }	
	  
	  .text h2 {
		    margin: 0;
	  }

    .text {
        margin: auto;
        /* border: 1px solid black; */
        padding:0.5em;
        width: 75%;
        flex: 6;
    }
    .date {
        margin: auto;
        padding:0.5em;
        /* border: 1px solid black; */
        flex: 1;
    }

    .map-compass-wrapper {
        width: 70px;
        height: 70px;
        display: block;
    }
      /**
      * Custom Style
      */
      #mae-map,
      .footer, .header {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div id="mae-paper" class="mae-margin-narrow">
      <div class="header">
		    <div class="logo">
			    <img src="THE_LOGO" style="width: 15em;"></img>
		    </div>
		    <div class="text">
          <h2>M.App Enterprise - Default A4 Landscape Template </h2>
          <br />
          <strong>Default SubTitle</strong>
		    </div>
        <div class="date">
          <strong><label>Date:</label><div id="datetime"></div></strong>
        </div>
      </div>
    <div class="map-wrapper">
      <div id="mae-map"></div>
    </div>
    <div class="footer">
      <div class="text">
        Disclaimer: Please note that the scale bar will not apply to the full map content if 3D content is shown. All measurements taken from the print out are not official.
        Copyright © Hexagon AB 2024
      </div>
      <div class="map-compass-wrapper">
        <div id="mae-map-compass">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 283.5 283.5">
      
      <defs>
      <style>
        .st0 {
        font-family: Arial-Black, Arial;
        font-size: 62px;
        font-weight: 800;
        }
      </style>
      </defs>
      <path d="M141.1,39.3l-15.7,75.7-28.4-18.6-.6.6,18.6,28.3-75.5,15.7v1.4l75.5,15.7-18.7,28.5.6.6,28.4-18.6,15.7,75.6h1.4l15.7-75.7,28.4,18.6.6-.6-18.6-28.3,75.5-15.7v-1.4l-75.5-15.7,18.7-28.5-.6-.6-28.4,18.6-15.7-75.6h-1.4,0ZM141.1,46.2v93.8l-16.1-16.1,1.7-8,14.5-69.6h0ZM183.5,99.4l-23.7,23.7-1.5-7.2,25.2-16.5h0ZM99.5,100l23.6,23.6-7.2,1.5-16.5-25.1h0ZM159.5,125l8.2,1.7,69.4,14.4h-93.8l16.1-16.1h0ZM46.4,142.3h93.8l-16.1,16.1-8.2-1.7-69.4-14.4h0ZM142.4,143.5l16.1,16.1-1.7,8-14.5,69.6v-93.8h0ZM167.5,158.3l16.5,25.1-23.6-23.6,7.2-1.5h0ZM123.6,160.4l1.5,7.2-25.2,16.5,23.7-23.7h0Z"/>
      <text class="st0" transform="translate(115.9 49)"><tspan x="0" y="0">N</tspan></text>
    </svg>
    </div>
      </div>
    </div>
    </div>
  </body>
  <script>
    // Get current date and time
    var now = new Date();
    var datetime = now.toLocaleDateString();
  
    // Insert date and time into HTML
    document.getElementById("datetime").innerHTML = datetime;
  </script>
</html>

Content

Security

Desktop Apps