Add a marker with a moving effect

The following example demonstrates the adding a marker with a moving effect

<!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>
    <button type="button" onclick="addMarker();">
        Click to add a marker with a moving effect
     </button>
    <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' };
        let diag = new m2Diag.Engine('canvas', options);
        let projectId = 'YOUR_PROJECT_ID';
        diag.loadCloudData(projectId);

        function addmarker(){
            let ms = new m2Diag.MoveAddMarkerState(diag, '/content/marker_example.png');
            diag.state = ms;

            // if you want to get the new added marker instance, bind the onMarkerAdded event
            ms.onMarkerAdded = function (marker) {
                console.log(marker);
            }
            // or do something if the user right-click to cancel
            ms.onMarkerCanceled = function () {
                // do something
            }
        }
     </script>
  </body>
</html>

results matching ""

    No results matching ""