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>