add the drag functionality

vcm/index.html

@@ -220,7 +220,12 @@
                           <iframe style="width: 95%; height:120em;margin-left:1em;margin-right:1em;border: none;" src="https://ww2.unipark.de/uc/HFT_Stuttgart_Studenten/f7c4/"></iframe>
 
                       </div>
-                      <div></div>
+                      <div>
+                        <p class="contentOne">Hier testen wir momentan eine Funktion die es Ihnen erlaubt ihren Lieblingsort zu markieren und zu kommentieren. 
+                            
+                            </p><br> 
+                            <img id="dragFrom" onmouseover="setPointStartEnd('fav')" ondragstart="dragstart_handler(event);" draggable=true src="templates/locationSM.png" style="height:30px;height: 30px; display: inline-block; position: absolute;cursor: -webkit-grab; cursor: grab;">
+                      </div><br><br>
                 </div>
 
             </div>
@@ -346,15 +351,20 @@
                 <button class = "btn_on" onclick="getAccidents('CONSTRUCTION')">On</button>
                 <button class = "btn_off" onclick="deleteAccidents('CONSTRUCTION')">Off</button> -->
                 <h3 id="headNordB">Navigationsrechner</h3>
-                <p class="contentOne">Bitte wählen Sie einen Start und Endpunkt für ihre Route aus. Klicken Sie hierfür auf den Button Startpunkt und danach auf die gewünschte Stelle in der Karte. Wiederholen Sie das für den Endpunkt, dann können Sie sich über die Route Buttons den Weg anzeigen.</p>
-                <div style="width:34em;">
+                <p class="contentOne">Bitte wählen Sie einen Start und Endpunkt für ihre Route aus. Klicken Sie hierfür auf den Button Startpunkt und danach auf die gewünschte Stelle in der Karte. Oder ziehen sie die Marker auf der rechten Seite an die gewünschte Stelle in der Karte mit Drag and Drop. Wiederholen Sie das für den Endpunkt, dann können Sie sich über die Route Buttons den Weg anzeigen.</p>
+                <div style="width:34em;"><br><br>
                 <button class="btn_standard" style="width:10em;height:2em;" onclick="getStart('Start');">Startpunkt</button>
-                <input style="width:12em;height:2em;" type="text" id="Spunktlat" name="Spunktlat">
-                <input style="width:12em;height:2em;" type="text" id="Spunktlon" name="Spunktlon"><br><br>
                 
+                <input style="width:12em;height:2em;" type="text" id="Spunktlat" name="Spunktlat">
+                <input style="width:12em;height:2em;" type="text" id="Spunktlon" name="Spunktlon">
+                <img id="dragFrom" onmouseover="setPointStartEnd('start')" ondragstart="dragstart_handler(event);" draggable=true src="templates/locationSM.png" style="height:30px;height: 30px; display: inline-block; position: absolute;cursor: -webkit-grab; cursor: grab;">
+                <br><br>
+                <!-- <div id=dragFrom2 ><span draggable=true >drop me</span></div> -->
                 <button class="btn_standard" style="width:10em;height:2em;" onclick="getStart('End');">Endpunkt</button>
                 <input style="width:12em;height:2em;" type="text" id="Epunktlat" name="Epunktlat">
-                <input style="width:12em;height:2em;" type="text" id="Epunktlon" name="Epunktlon"><br><br>
+                <input style="width:12em;height:2em;" type="text" id="Epunktlon" name="Epunktlon">
+                <img id="dragFrom2" onmouseover="setPointStartEnd('end')" ondragstart="dragstart_handler(event);" draggable=true src="templates/locationSM.png" style="height:30px;height: 30px; display: inline-block; position: absolute;cursor: -webkit-grab; cursor: grab;">
+                <br><br>
 
                 <button class="btn_standard" id="buttonCar" style="width:13em;height:2em;" onclick="setRouteCar();">Route Auto</button>
                 <button class="btn_standard" id="buttonPub" style="width:13em;height:2em;" onclick="setRoutePublic();">Route ÖPNV<div id="loaderPub" style="display:none;" class="loader"></div></button>
@@ -793,7 +803,7 @@
     <img id="logo_Main" src="images/logo/Logo.svg">
     <p id="logo_title"><span style="color: red">K</span>essel<span style="color: red">K</span>ompass</p>
   </div>
-  <div id="vcs_map_container"></div>
+  <div id="vcs_map_container" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)"></div>
   
     <!--div id="vcs_map_container">
       <div id="vcs_loading" style="background-color:#dee2c9; position:absolute; top:0; left:0; right:0; bottom:0; padding:12% 0; text-align:center; font-family:Arial, sans-serif; font-size:1.4rem; line-height:4rem;">
@@ -848,6 +858,6 @@
                   integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
                   crossorigin="anonymous"></script>
     <script src="templates/story/virtualcitystory.js"></script>
- 
+    <script src="js/DragnDrop.js"></script> 
   </body>
 </html>

vcm/js/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
+          setPoint("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
+}
\ No newline at end of file

vcm/js/ServerorLocal.js

 // Server
 
-var navPublicT = '/partizipation/navPublicT'
-var NavCARdata = '/partizipation/NavCARdata'
-var ROAD_CLOSURE ="https://m4lab.hft-stuttgart.de/partizipation/ROAD_CLOSURE"
-var CONSTRUCTION = "https://m4lab.hft-stuttgart.de/partizipation/CONSTRUCTION"
-var TrafficFlow ="https://m4lab.hft-stuttgart.de/partizipation/TrafficFlow"
-var NAVCAR = "https://m4lab.hft-stuttgart.de/partizipation/NAVCAR"
-var NAVPUB = "https://m4lab.hft-stuttgart.de/partizipation/NAVPUB"
-var addPointurl = "https://m4lab.hft-stuttgart.de/partizipation/addPoint"
-var routecalcurl = "https://m4lab.hft-stuttgart.de/partizipation/Routecalc2"
-var navpublict2url = "https://m4lab.hft-stuttgart.de/partizipation/navPublicT2"
-var StartpointUrl = "https://m4lab.hft-stuttgart.de/partizipation/Startpoint"
-var EndpointUrl = "https://m4lab.hft-stuttgart.de/partizipation/Endpoint"
-var FLOWdataUrl = "/partizipation/FLOWdata"
-var NavCARdataUrl = '/partizipation/NavCARdata'
-var FLOWtestUrl = '/partizipation/FLOWtest'
-var getTrafficIncidentsUrl = '/partizipation/getTrafficIncidents'
-var navPointUrl = '/partizipation/navPoint'
-var RoutecalcUrl = '/partizipation/Routecalc'
-var navPublicTUrl = '/partizipation/navPublicT'
-var NoiseRealTimeUrl = '/partizipation/NoiseRealTime'
-var getNoiseHistUrl = '/partizipation/getNoiseHist'
-var getSTANoiseHistUrl = '/partizipation/getSTANoiseHist'
+// var navPublicT = '/partizipation/navPublicT'
+// var NavCARdata = '/partizipation/NavCARdata'
+// var ROAD_CLOSURE ="https://m4lab.hft-stuttgart.de/partizipation/ROAD_CLOSURE"
+// var CONSTRUCTION = "https://m4lab.hft-stuttgart.de/partizipation/CONSTRUCTION"
+// var TrafficFlow ="https://m4lab.hft-stuttgart.de/partizipation/TrafficFlow"
+// var NAVCAR = "https://m4lab.hft-stuttgart.de/partizipation/NAVCAR"
+// var NAVPUB = "https://m4lab.hft-stuttgart.de/partizipation/NAVPUB"
+// var addPointurl = "https://m4lab.hft-stuttgart.de/partizipation/addPoint"
+// var routecalcurl = "https://m4lab.hft-stuttgart.de/partizipation/Routecalc2"
+// var navpublict2url = "https://m4lab.hft-stuttgart.de/partizipation/navPublicT2"
+// var StartpointUrl = "https://m4lab.hft-stuttgart.de/partizipation/Startpoint"
+// var EndpointUrl = "https://m4lab.hft-stuttgart.de/partizipation/Endpoint"
+// var FLOWdataUrl = "/partizipation/FLOWdata"
+// var NavCARdataUrl = '/partizipation/NavCARdata'
+// var FLOWtestUrl = '/partizipation/FLOWtest'
+// var getTrafficIncidentsUrl = '/partizipation/getTrafficIncidents'
+// var navPointUrl = '/partizipation/navPoint'
+// var RoutecalcUrl = '/partizipation/Routecalc'
+// var navPublicTUrl = '/partizipation/navPublicT'
+// var NoiseRealTimeUrl = '/partizipation/NoiseRealTime'
+// var getNoiseHistUrl = '/partizipation/getNoiseHist'
+// var getSTANoiseHistUrl = '/partizipation/getSTANoiseHist'
 
 
 
 //_________________________________________/
 // Local
 
-// var navPublicT = '/navPublicT'
-// var NavCARdata = '/NavCARdata'
-// var ROAD_CLOSURE = "http://localhost:8083/ROAD_CLOSURE"
-// var CONSTRUCTION = "http://localhost:8083/CONSTRUCTION"
-// var TrafficFlow = "http://localhost:8083/TrafficFlow"
-// var NAVCAR = "http://localhost:8083/NAVCAR"
-// var NAVPUB = "http://localhost:8083/NAVPUB"
-// var addPointurl = "http://localhost:8083/addPoint"
-// var routecalcurl = "http://localhost:8083/Routecalc2"
-// var navpublict2url = "http://localhost:8083/navPublicT2"
-// var StartpointUrl = "http://localhost:8083/Startpoint"
-// var EndpointUrl = "http://localhost:8083/Endpoint"
-// var FLOWdataUrl = "/FLOWdata"
-// var NavCARdataUrl = '/NavCARdata'
-// var FLOWtestUrl = '/FLOWtest'
-// var getTrafficIncidentsUrl = '/getTrafficIncidents'
-// var navPointUrl = '/navPoint'
-// var RoutecalcUrl = '/Routecalc'
-// var navPublicTUrl = '/navPublicT'
-// var NoiseRealTimeUrl = '/NoiseRealTime'
-// var getNoiseHistUrl = '/getNoiseHist'
-// var getSTANoiseHistUrl = '/getSTANoiseHist'
+var navPublicT = '/navPublicT'
+var NavCARdata = '/NavCARdata'
+var ROAD_CLOSURE = "http://localhost:8083/ROAD_CLOSURE"
+var CONSTRUCTION = "http://localhost:8083/CONSTRUCTION"
+var TrafficFlow = "http://localhost:8083/TrafficFlow"
+var NAVCAR = "http://localhost:8083/NAVCAR"
+var NAVPUB = "http://localhost:8083/NAVPUB"
+var addPointurl = "http://localhost:8083/addPoint"
+var routecalcurl = "http://localhost:8083/Routecalc2"
+var navpublict2url = "http://localhost:8083/navPublicT2"
+var StartpointUrl = "http://localhost:8083/Startpoint"
+var EndpointUrl = "http://localhost:8083/Endpoint"
+var FLOWdataUrl = "/FLOWdata"
+var NavCARdataUrl = '/NavCARdata'
+var FLOWtestUrl = '/FLOWtest'
+var getTrafficIncidentsUrl = '/getTrafficIncidents'
+var navPointUrl = '/navPoint'
+var RoutecalcUrl = '/Routecalc'
+var navPublicTUrl = '/navPublicT'
+var NoiseRealTimeUrl = '/NoiseRealTime'
+var getNoiseHistUrl = '/getNoiseHist'
+var getSTANoiseHistUrl = '/getSTANoiseHist'
\ No newline at end of file