// marker layer
Msource = new ol.source.Vector();

markLayer = new ol.layer.Vector({
  source: Msource,
  style: new ol.style.Style({
    image: new ol.style.Icon({
      opacity: 0.95,
      src: 'http://www..../images/mapplot.png',
     color: "red"
    })
  })
});

var mark;
var counter = "true";

function addMark(Type) {

  counter = "true";

  mark = new ol.interaction.Draw({
    source: Msource,
    type: Type
  });

  // limit the marker to 4
  if (Msource.getFeatures().length < 4) {

    map.addInteraction(mark);

    // occurs when you finish to draw the current element
    mark.on("drawend", function(){
      counter = "true";
      drawingMarker();
    });

    // occurs just after you finish to draw the current element
    markLayer.on("change", function(){
      map.removeInteraction(mark);

      if (counter == "true") {
        counter = "false";
        var ind = Msource.getFeatures().length - 1;
        Msource.getFeatures()[ind].setId(MarkId - 1);
      }

    });

  } else {

    map.removeInteraction(mark);

    // show max marker message
    $(".maxmarkers").css("display", "inline");

  }

} // end addDraw


$("#Marker").click(function(e) {
  e.preventDefault();
  addMark("Point");
});