DragnDrop.js

var startend = ""

// function preload(arrayOfImages) {
//   $(arrayOfImages).each(function(){
//       $('<img/>')[0].src = this;
//       // Alternatively you could use:
//       // (new Image()).src = this;
//   });
// }

// // Usage:

// preload([
//   '../datasource-data/NoiseData/Icons_soundquiz/s_noise_spacecadet.png',
//   '../datasource-data/NoiseData/Icons_soundquiz/s_noise_paologreen.png',
//   '../datasource-data/NoiseData/Icons_soundquiz/s_noise_rosybrown.png'
// ]);







function dragstart_handler(e){
    var img = new Image();
    img.src = '../templates/locationSMsmall.png';

    e.dataTransfer.setDragImage(img, 11, 24);    
    // e.dataTransfer.setDragImage(img, 75, 145); 
}
function dragstart_handler_quiz1(e){
  // var img = new Image();
  // img.src = '../datasource-data/NoiseData/Icons_soundquiz/s_noise_spacecadet.png';
  // e.dataTransfer.setDragImage(img, 23, 45);    
  // e.dataTransfer.setDragImage(img, 75, 145); 
}
function dragstart_handler_quiz2(e){
  // var img = new Image();
  // img.src = '../datasource-data/NoiseData/Icons_soundquiz/s_noise_paologreen.png';
  // e.dataTransfer.setDragImage(img, 23, 45);    
  // e.dataTransfer.setDragImage(img, 75, 145); 
}
function dragstart_handler_quiz3(e){
  // var img = new Image();
  // img.src = '../datasource-data/NoiseData/Icons_soundquiz/s_noise_rosybrown.png';
  // e.dataTransfer.setDragImage(img, 23, 45);    
  // e.dataTransfer.setDragImage(img, 75, 145); 
}
function dragstart_handler_quiz4(e){
  // var img = new Image();
  // img.src = '../datasource-data/NoiseData/Icons_soundquiz/s_noise_rosevale.png';
  // e.dataTransfer.setDragImage(img, 23, 45);    
  // e.dataTransfer.setDragImage(img, 75, 145); 
}
function dragstart_handler_quiz5(e){
  // var img = new Image();
  // img.src = '../datasource-data/NoiseData/Icons_soundquiz/s_noise_myrtlegreen.png';
  // e.dataTransfer.setDragImage(img, 23, 45);    
  // e.dataTransfer.setDragImage(img, 75, 145); 
}
function dragstart_handler_quiz6(e){
  // var img = new Image();
  // img.src = '../datasource-data/NoiseData/Icons_soundquiz/s_noise_babyblue.png';
  // e.dataTransfer.setDragImage(img, 23, 45);    
  // e.dataTransfer.setDragImage(img, 75, 145); 
}
function dragstart_handler_quiz7(e){
  // var img = new Image();
  // img.src = '../datasource-data/NoiseData/Icons_soundquiz/s_noise_rubyred.png';
  // e.dataTransfer.setDragImage(img, 23, 45);    
  // e.dataTransfer.setDragImage(img, 75, 145); 
}
function dragstart_handler_quiz8(e){
  // var img = new Image();
  // img.src = '../datasource-data/NoiseData/Icons_soundquiz/s_noise_greensheen.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

  // stop Firefox from executing its default behaviour
  if(e.preventDefault) { e.preventDefault(); }
    if(e.stopPropagation) { e.stopPropagation(); }

// 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);
        }else if (startend == "quiz_baustelle"){
          var pointd = {
            lat:"",
            lon:"",
            loc:""
        }
            pointd.lat = ballonContent.lat
            pointd.lon = ballonContent.lon
            pointd.loc = "quiz_baustelle"
            point_baustelle = pointd

            setPointFav("quiz_baustelle", pointd);
      }else if (startend == "quiz_pragfriedhof"){
        var pointd = {
          lat:"",
          lon:"",
          loc:""
      }
          pointd.lat = ballonContent.lat
          pointd.lon = ballonContent.lon
          pointd.loc = "quiz_pragfriedhof"
          point_pragfriedhof = pointd

          setPointFav("quiz_pragfriedhof", pointd);
      }else if (startend == "quiz_marktplatz"){
        var pointd = {
          lat:"",
          lon:"",
          loc:""
      }
          pointd.lat = ballonContent.lat
          pointd.lon = ballonContent.lon
          pointd.loc = "quiz_marktplatz"
          point_marktplatz = pointd

          setPointFav("quiz_marktplatz", pointd);
    }else if (startend == "quiz_skaten"){
      var pointd = {
        lat:"",
        lon:"",
        loc:""
    }
        pointd.lat = ballonContent.lat
        pointd.lon = ballonContent.lon
        pointd.loc = "quiz_skaten"
        point_skaten = pointd

        setPointFav("quiz_skaten", pointd);
  }else if (startend == "quiz_kirche"){
    var pointd = {
      lat:"",
      lon:"",
      loc:""
  }
      pointd.lat = ballonContent.lat
      pointd.lon = ballonContent.lon
      pointd.loc = "quiz_kirche"
      point_kirche = pointd

      setPointFav("quiz_kirche", pointd);
}else if (startend == "quiz_meerschweinchen"){
  var pointd = {
    lat:"",
    lon:"",
    loc:""
}
    pointd.lat = ballonContent.lat
    pointd.lon = ballonContent.lon
    pointd.loc = "quiz_meerschweinchen"
    point_meerschweinchen = pointd

    setPointFav("quiz_meerschweinchen", pointd);
}else if (startend == "quiz_ufapalast"){
  var pointd = {
    lat:"",
    lon:"",
    loc:""
}
    pointd.lat = ballonContent.lat
    pointd.lon = ballonContent.lon
    pointd.loc = "quiz_ufapalast"
    point_ufapalast = pointd

    setPointFav("quiz_ufapalast", pointd);
}else if (startend == "quiz_rostensteinpark"){
  var pointd = {
    lat:"",
    lon:"",
    loc:""
}
    pointd.lat = ballonContent.lat
    pointd.lon = ballonContent.lon
    pointd.loc = "quiz_rostensteinpark"
    point_rosensteinpark = pointd

    setPointFav("quiz_rostensteinpark", 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
}