update

public/application/js/cesium_mouse_handling.js

@@ -69,6 +69,7 @@ const clickHandler = viewer.screenSpaceEventHandler.getInputAction(
 //     Cesium.ScreenSpaceEventType.MOUSE_MOVE);
 
 // Color a feature on selection and show metadata in the InfoBox.
+polygon_lorawan = []
 viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(
         movement
     ) {
@@ -82,7 +83,9 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(
             $("#sensor-hint").show()
         }
         // Pick a new feature
+        
         const pickedFeature = viewer.scene.pick(movement.position);
+        earthPosition = viewer.scene.pickPosition(movement.position);
         if (!Cesium.defined(pickedFeature)) {
             clickHandler(movement);
             return;
@@ -93,7 +96,7 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(
         }
         selected.feature = pickedFeature;
         last_picked_3DTiles = pickedFeature;
-
+        last_position = movement.position
         //check if it is [3D Tile building] else [Pipe]. 
         if (!pickedFeature.id) {
             var all_selected_property_names = last_picked_3DTiles.getPropertyNames();
@@ -112,6 +115,9 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(
             pickedFeature.color = Cesium.Color.LIME;
             // Set feature infobox description
             const featureName = pickedFeature.getProperty("name");
+            last_picked_3DTiles_id = pickedFeature.getProperty("gml_id");
+            last_picked_3DTiles_function = pickedFeature.getProperty("Function_DE");
+
             selectedEntity.name = featureName;
             attribute_text = ``
             for (let index = 0; index < all_selected_property_names.length; index++) {
@@ -129,8 +135,9 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(
                 </table>
             `
             $("#attribute-table-area").html(table_attribute_html)
+            $(".lorawan_on_click").removeAttr('disabled');
         } else {
-
+            $(".lorawan_on_click").prop("disabled", true);
             // This case, if users click on the PIPE station
 
 
@@ -221,4 +228,72 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(
 
         }
     },
-    Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    Cesium.ScreenSpaceEventType.LEFT_CLICK);
\ No newline at end of file
+
+    $(".lorawan_on_click").click(function () {
+        drawPolygon = true
+        $(".lorawan_on_click").prop("disabled", true);
+        if (drawPolygon) {
+            var distance = parseInt($("#distanceStepRange").val())
+            polygon_lorawan[last_picked_3DTiles_id] = viewer.entities.add({
+                position: earthPosition,
+                name: "Green circle at height with outline",
+                ellipse: {
+                  semiMinorAxis: distance, // e.g. 250
+                  semiMajorAxis: distance, // e.g. 250
+                  clampToGround: true,
+                  material: new Cesium.ColorMaterialProperty(
+                        // Cesium.Color.RED.withAlpha(0.7)
+                        Cesium.Color.fromCssColorString(`${$("#lorawanColor").val()}80`)
+                      )
+                },
+                label : {
+                    text : last_picked_3DTiles_id,
+                    font : '14pt monospace',
+                    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+                    outlineWidth : 2,
+                    verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
+                    pixelOffset : new Cesium.Cartesian2(0, -9)
+                }
+              });
+
+            $("#lorawan_list").append(`
+                
+                <div class="row my-2" id="${last_picked_3DTiles_id}"> 
+                    <div class="col">
+                        ID: <b>${last_picked_3DTiles_id}</b>
+                    </div>
+                    <div class="col">
+                        Function: <b>${last_picked_3DTiles_function}</b>
+                    </div>
+                    <div class="col">
+                        Coverage: <b>${distance}</b> m.
+                    </div>
+                    <div class="col">
+                        <button type="button" class="btn icon btn-danger removeLorawn" id="rm_${last_picked_3DTiles_id}" style="margin-top: -10px;">
+                            <i class="bi bi-trash-fill"></i>
+                        </button>
+                    </div>
+                    <hr>
+                </div>
+                
+                
+            `)
+
+            $(".removeLorawn").click(function () {
+                var this_id = this.id
+                var tile_id = this_id.replace("rm_", "")
+                console.log(`removing ${tile_id}`)
+                viewer.entities.remove(polygon_lorawan[tile_id]);
+                $(`#${tile_id}`).remove();
+            });
+        }
+    })
+
+    // $("#distanceStepRange").change(function () {
+    //     $("#distanceStep").html($(this).val())
+    // })
+
+    $('#distanceStepRange').on('input', function() {
+        $("#distanceStep").html($(this).val())
+      });
\ No newline at end of file