Add marker on click

The following example demonstrates the adding a marker on click.

<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
    <title>M2Diagram add marker demo</title>
    <script src="https://diagram.measuresquare.com/scripts/m2diag.js"></script>
 </head>
 <body>
    <div style="text-align:center;margin-top:20px;">
        <div id="canvas" style="width:750px;height:450px;border:1px solid #333;"></div>
    </div>
    <script>
        let options = {
            apiKey: 'YOUR_PUBLISHABLE_API_KEY',
            eventState: {
                onSelectShape: function (event, shape, point) {
                    let marker = diag.addMarker(point, '/content/marker_example.png');
                    diag.refresh();
                }
            }
        };
        let diag = new m2Diag.Engine('canvas', options);
        let projectId = 'YOUR_PROJECT_ID';
        diag.loadCloudData(projectId);
     </script>
  </body>
</html>

results matching ""

    No results matching ""