DragnDrop.js

var startend = ""

function dragstart_handler(e){
    var img = new Image();
    img.src = '../templates/locationSMsmall.png';
    e.dataTransfer.setDragImage(img, 23, 45);    
    // e.dataTransfer.setDragImage(img, 75, 145); 
}

function dragEnter(e){

    
    var map = vcs.vcm.Framework.getInstance().getActiveMap();
var viewer = map.getCesiumWidget()
var scene = map.getCesiumWidget()._scene

// var scene = viewer.scene;
var billboards = scene.primitives.add(new Cesium.BillboardCollection());

   event.preventDefault();
   return true;
}

function dragDrop(e) {

  var map = vcs.vcm.Framework.getInstance().getActiveMap();
  var viewer = map.getCesiumWidget()
  var scene = map.getCesiumWidget()._scene

// var scene = viewer.scene;
// var billboards = scene.primitives.add(new Cesium.BillboardCollection());

    // var canvas = document.createElement('canvas');
    // canvas.width = 32;
    // canvas.height = 32;
    // var ctx = canvas.getContext('2d');
    // ctx.beginPath();
    // ctx.arc(16, 16, 15, 0, Cesium.Math.TWO_PI, true);
    // ctx.closePath();
    // ctx.fillStyle = `hsl(${Math.random()*360},55%,55%)`;
    // ctx.fill();


    var cartesian = viewer.camera.pickEllipsoid(
      new Cesium.Cartesian3(e.clientX, e.clientY), 
      scene.globe.ellipsoid
    );

    // billboards.add({
    //   image: canvas,
    //   position: cartesian
    // });
    var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
        console.log(cartographic)
        var longitudeString = Cesium.Math.toDegrees(
          cartographic.longitude
        );
        ballonContent.lon = longitudeString;
        var latitudeString = Cesium.Math.toDegrees(
          cartographic.latitude
        );
        ballonContent.lat = latitudeString;

    if (startend == "start"){
        var pointd = {
          lat:"",
          lon:"",
          loc:""
      }
          pointd.lat = ballonContent.lat
          pointd.lon = ballonContent.lon
          pointd.loc = "Start"
          var text = document.getElementById('Spunktlat');
          text.value = ballonContent.lat;
          var text = document.getElementById('Spunktlon');
          text.value = ballonContent.lon;
          // visualize a Point at the clicked location
          setPoint("Start", pointd);

      } else if (startend == "end"){
        var pointd = {
          lat:"",
          lon:"",
          loc:""
      }
          pointd.lat = ballonContent.lat
          pointd.lon = ballonContent.lon
          pointd.loc = "End"

          var text = document.getElementById('Epunktlat');
          text.value = ballonContent.lat;
          var text = document.getElementById('Epunktlon');
          text.value = ballonContent.lon;
          // visualize a Point at the clicked location
          setPoint("End", pointd);
      } else if (startend == "fav"){
        var pointd = {
          lat:"",
          lon:"",
          loc:""
      }
          pointd.lat = ballonContent.lat
          pointd.lon = ballonContent.lon
          pointd.loc = "fav"

          // var text = document.getElementById('Epunktlat');
          // text.value = ballonContent.lat;
          // var text = document.getElementById('Epunktlon');
          // text.value = ballonContent.lon;
          // visualize a Point at the clicked location
          setPointFav("fav", pointd);
      }
}

function dragOver(e){
    var map = vcs.vcm.Framework.getInstance().getActiveMap();
var viewer = map.getCesiumWidget()
var scene = map.getCesiumWidget()._scene


// var scene = viewer.scene;
var billboards = scene.primitives.add(new Cesium.BillboardCollection());
   e.preventDefault();
}



function setPointStartEnd(loc){
startend = loc
}