test

serveralternative.js

@@ -10,11 +10,18 @@ const request = require('ajax-request');
 
 app.use(express.static('vcm'));
 app.listen(process.env.PORT || 8083);
-console.log("on 8080");
+console.log("on 8083");
 
 
 
 var IDGeojson = 100000
+var ballonContent = {
+  header: "Test",
+  Content: "This is a test",
+  lat: "",
+  lon: "",
+  categorie: "locationSM.png"
+}
 
 app.post('/newBallon', function(req,res){
 
@@ -22,20 +29,26 @@ app.post('/newBallon', function(req,res){
 
       const data = req.body;
        console.log("data ==============")
-       console.log(data.id);
-      args.gmlid = data.id
-       console.log(data[0]);
-       console.log(data[1]);
+       console.log(data.header);
+       console.log(data.Content);
+       console.log(data.lat);
+       console.log(data.lon);
+       console.log(data.categorie);
+      ballonContent.header = data.header;
+      ballonContent.Content = data.Content;
+      ballonContent.lat = data.lat;
+      ballonContent.lon = data.lon;
+      ballonContent.categorie = data.categorie;
        console.log("args ==============")
-       console.log(args);
+      //  console.log(args);
       //asdf
-      const returnedTarget = Object.assign(args.ui,data);
-       args.ui = data;
-       args.gmlid = data.id;
-       console.log("returned ==============")
-       console.log(returnedTarget)
-       console.log("args ==============")
-       console.log(args); 
+      // const returnedTarget = Object.assign(args.ui,data);
+      //  args.ui = data;
+      //  args.gmlid = data.id;
+      //  console.log("returned ==============")
+      //  console.log(returnedTarget)
+      //  console.log("args ==============")
+      //  console.log(args); 
 
       getCurrentFilenames();
       writeGeojsonFile();
@@ -79,7 +92,7 @@ function writeGeojsonFile() {
     ' "name": "data_point",' +
     '"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },' +
     ' "features": [' +
-    ' { "type": "Feature", "properties": { "id": null, "name": "datapoint" }, "geometry": { "type": "Point", "coordinates": [ 9.195387, 48.835579 ] } }' +
+    ' { "type": "Feature", "properties": { "id": null, "name": "datapoint" }, "geometry": { "type": "Point", "coordinates": [ ' + ballonContent.lon + ', ' + ballonContent.lat + ' ] } }' +
     ' ]' +
     ' }'
   console.log(geojsontemplate);
@@ -116,7 +129,7 @@ var newtext = contentSync.toString().replace('"layers": [','"layers": [' +
     '"style": {' +
     '  "image": {' +
     '    "icon": {' +
-    '      "src": "./templates/test.png",' +
+    '      "src": "./templates/' + ballonContent.categorie + '",' +
     '      "scale": 0.5' +
     '    }' +
     '  }' +
@@ -127,10 +140,10 @@ var ballonText = "\"balloonTypes\": [" +
 "{" +
   "\"template\": [" +
   "\"<div class='balloon' onclick='' id='myBalloon'>\"," +
-    "\"   <h1 class='balloon-title'>Test</h1>\"," +
+    "\"   <h1 class='balloon-title'>'" + ballonContent.header + "'</h1>\"," +
     "\"   <div class='balloon-content' style='height:290px; margin-right: 0px;'\"," +
     "\"   </div>\"," +
-    "\"<p class='balloon-text'><span>Das hier ist ein Test Ballon. Er wurde von einem User erstellt.</span><br></p>\"," +
+    "\"<p class='balloon-text'><span>" + ballonContent.Content + "</span><br></p>\"," +
     // "\"<img style='padding-top:10px' src='images/content/contentboeckingerstrasse/station3_outdoorkiosk1.jpg' alt='Simply Easy Learning' width='375'>\"," +
     "\"</div>\"," +
     "\"<%  %>\"" +

vcm/index.html

@@ -186,7 +186,7 @@
                                         <!-- <a href="#" onclick="">Luftbilder</a>   -->
                                         <a href="#" onclick="addingPin()">Adding a Pin</a>
                                         
-                                        <span data-v-7b90bcab="" tabindex="0" class="vcm-LeadButton vcm-btn-base-dye02 vcm-btn-font-dye01 vcm-btn-font-dye01-hover vcm-btn-border vcm-border-dye02 vcm-btn-base-splash-hover vcm-no-select image-button active point" title="Point"></span>
+                                        <!-- <span data-v-7b90bcab="" tabindex="0" class="vcm-LeadButton vcm-btn-base-dye02 vcm-btn-font-dye01 vcm-btn-font-dye01-hover vcm-btn-border vcm-border-dye02 vcm-btn-base-splash-hover vcm-no-select image-button active point" title="Point"></span> -->
                                     </div>
                                 <!-- <button class="accordion">Energy</button>
                                     <div class="sub-menu">
@@ -601,6 +601,7 @@
     <script src="sources/nouislider.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
     <script src="templates/slider.js"></script>
+    <script src="templates/UserBalloon.js"></script>
     <link href="templates/sliders.css" rel="stylesheet">
 
     <script src="templates/limesurvey.js"></script>

vcm/templates/UserBalloon.js

@@ -3,7 +3,7 @@ var ballonContent = {
     Content: "This is a test",
     lat: "",
     lon: "",
-    categorie: ""
+    categorie: "locationSM.png"
   }
 
 
@@ -32,4 +32,47 @@ function PostUserInput(){
     catch (err) {
         console.log('->  function PostUserInput() failed!\n' + err);
     }
+}
+
+function addingPin() {
+    var map = vcs.vcm.Framework.getInstance().getActiveMap();
+    var CViewer = map.viewer
+    var CScene = map.viewer.scene
+
+    // Mouse over the globe to see the cartographic position
+    handler = new Cesium.ScreenSpaceEventHandler(CScene.canvas);
+    handler.setInputAction(function (movement) {
+      var cartesian = CViewer.camera.pickEllipsoid(
+        movement.position,
+        CScene.globe.ellipsoid
+      );
+      if (cartesian) {
+        var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+        var longitudeString = Cesium.Math.toDegrees(
+          cartographic.longitude
+        ).toFixed(6);
+        ballonContent.lon = longitudeString;
+        var latitudeString = Cesium.Math.toDegrees(
+          cartographic.latitude
+        ).toFixed(6);
+        ballonContent.lat = latitudeString;
+        alert(         "Lon: " + longitudeString +
+          "\u00B0" +
+          "\nLat: " +
+          ("   " + latitudeString).slice(-7) +
+          "\u00B0");
+
+          PostUserInput();
+
+      } else {
+        
+      }
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
+
+
+
+
+
+    
+
 }
\ No newline at end of file