#Hello, World

Make sure you already have a Publishable API Key (Cloud API integration)

The simplest way to display a floor plan embedded in your website is with the following example:

<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
    <title>M2Diagram hello world demo</title>
    <script src="https://diagram.measuresquare.com/scripts/m2diag.js"></script>
 </head>
 <body>
    <div style="text-align:center;">
        <div id="canvas" style="width:750px;height:450px;border:1px solid #333;"></div>
    </div>
    <script>
        let options = { apiKey: 'YOUR_PUBLISHABLE_API_KEY' };
        let diag = new m2Diag.Engine('canvas', options);
        let projectId = 'YOUR_PROJECT_ID';
        diag.loadCloudData(projectId);
     </script>
  </body>
</html>

hello world

Consider the following:

  1. Declare the application as HTML5 using <!DOCTYPE html>.

  2. Load the M2Diagram SDK using a script tag

  3. Create a div element named "canvas" to hold the floor plan.

  4. Create a new m2Diag.Engine instance passing the "canvas" element id.

  5. Add your publishable API key in the StartupOptions.apiKey (see Cloud API integration)

  6. Load the floor plan data specified by its unique id by calling:

    diag.loadCloudData(projectId)

results matching ""

    No results matching ""