Add feature to the featureInfoBox so that geometry is available there as well

Customizations/LayerDefinition.ts

@@ -90,7 +90,7 @@ export class LayerDefinition {
         title?: TagRenderingOptions,
         elementsToShow?: TagDependantUIElementConstructor[],
         maxAllowedOverlapPercentage?: number,
-        waysToCenterPoints?: boolean,
+        wayHandling?: number,
         style?: (tags: any) => {
             color: string,
             icon: any
@@ -108,11 +108,12 @@ export class LayerDefinition {
         this.title = options.title;
         this.elementsToShow = options.elementsToShow;
         this.style = options.style;
-        this.wayHandling = options.waysToCenterPoints ?? LayerDefinition.WAYHANDLING_DEFAULT;
+        this.wayHandling = options.wayHandling ?? LayerDefinition.WAYHANDLING_DEFAULT;
     }
 
-    asLayer(basemap: Basemap, allElements: ElementStorage, changes: Changes, userDetails: UIEventSource<UserDetails>, selectedElement: UIEventSource<any>,
+    asLayer(basemap: Basemap, allElements: ElementStorage, changes: Changes, userDetails: UIEventSource<UserDetails>,
-            showOnPopup: (tags: UIEventSource<(any)>) => UIElement):
+            selectedElement: UIEventSource<{feature: any}>,
+            showOnPopup: (tags: UIEventSource<(any)>, feature: any) => UIElement):
         FilteredLayer {
         return new FilteredLayer(
             this.name,

Customizations/Layers/NatureReserves.ts

@@ -25,6 +25,13 @@ export class NatureReserves extends LayerDefinition {
         this.style = this.generateStyleFunction();
         this.elementsToShow = [
             new ImageCarouselWithUploadConstructor(),
+            new TagRenderingOptions({
+                freeform: {
+                    key: "_surface",
+                    renderTemplate: "{_surface}m²",
+                    template: "$$$"
+                }
+            }),
             new NameQuestion(),
             new AccessTag(),
             new OperatorTag(),

Logic/FilteredLayer.ts

@@ -41,8 +41,8 @@ export class FilteredLayer {
      * The leaflet layer object which should be removed on rerendering
      */
     private _geolayer;
-    private _selectedElement: UIEventSource<any>;
+    private _selectedElement: UIEventSource<{feature: any}>;
-    private _showOnPopup: (tags: UIEventSource<any>) => UIElement;
+    private _showOnPopup: (tags: UIEventSource<any>, feature: any) => UIElement;
 
     constructor(
         name: string | UIElement,
@@ -52,8 +52,8 @@ export class FilteredLayer {
         maxAllowedOverlap: number,
         wayHandling: number,
         style: ((properties) => any),
-        selectedElement: UIEventSource<any>,
+        selectedElement: UIEventSource<{feature: any}>,
-        showOnPopup: ((tags: UIEventSource<any>) => UIElement)
+        showOnPopup: ((tags: UIEventSource<any>, feature: any) => UIElement)
     ) {
         this._wayHandling = wayHandling;
         this._selectedElement = selectedElement;
@@ -95,6 +95,7 @@ export class FilteredLayer {
             // feature.properties contains all the properties
             var tags = TagUtils.proprtiesToKV(feature.properties);
             if (this.filters.matches(tags)) {
+                feature.properties["_surface"] = GeoOperations.surfaceAreaInSqMeters(feature);
                 if(feature.geometry.type !== "Point"){
                     if(this._wayHandling === LayerDefinition.WAYHANDLING_CENTER_AND_WAY){
                         selfFeatures.push(GeoOperations.centerpoint(feature));
@@ -213,8 +214,8 @@ export class FilteredLayer {
 
                 layer.on("click", function (e) {
                     console.log("Selected ", feature)
-                    self._selectedElement.setData(feature.properties);
+                    self._selectedElement.setData({feature: feature});
-                    const uiElement = self._showOnPopup(eventSource);
+                    const uiElement = self._showOnPopup(eventSource, feature);
                     const popup = L.popup()
                         .setContent(uiElement.Render())
                         .setLatLng(e.latlng)

Logic/StrayClickHandler.ts

@@ -15,7 +15,7 @@ export class StrayClickHandler {
 
     constructor(
         basemap: Basemap,
-        selectElement: UIEventSource<any>,
+        selectElement: UIEventSource<{ feature: any }>,
         fullScreenMessage: UIEventSource<UIElement>, 
         uiToShow: (() => UIElement)) {
         this._basemap = basemap;

UI/FeatureInfoBox.ts

@@ -15,6 +15,13 @@ import Translations from "./i18n/Translations";
 
 export class FeatureInfoBox extends UIElement {
 
+    /**
+     * The actual GEOJSON-object, with geometry and stuff
+     */
+    private _feature: any;
+    /**
+     * The tags, wrapped in a global event source
+     */
     private _tagsES: UIEventSource<any>;
     private _changes: Changes;
     private _userDetails: UIEventSource<UserDetails>;
@@ -31,8 +38,8 @@ export class FeatureInfoBox extends UIElement {
     private _oneSkipped = Translations.t.general.oneSkippedQuestion.Clone();
     private _someSkipped = Translations.t.general.skippedQuestions.Clone();
 
-
     constructor(
+        feature: any,
         tagsES: UIEventSource<any>,
         title: TagRenderingOptions | UIElement,
         elementsToShow: TagDependantUIElementConstructor[],
@@ -40,6 +47,7 @@ export class FeatureInfoBox extends UIElement {
         userDetails: UIEventSource<UserDetails>
     ) {
         super(tagsES);
+        this._feature = feature;
         this._tagsES = tagsES;
         this._changes = changes;
         this._userDetails = userDetails;

UI/SimpleAddUI.ts

@@ -15,14 +15,14 @@ export class SimpleAddUI extends UIElement {
     private _addButtons: UIElement[];
     private _lastClickLocation: UIEventSource<{ lat: number; lon: number }>;
     private _changes: Changes;
-    private _selectedElement: UIEventSource<any>;
+    private _selectedElement: UIEventSource<{feature: any}>;
     private _dataIsLoading: UIEventSource<boolean>;
     private _userDetails: UIEventSource<UserDetails>;
 
     constructor(zoomlevel: UIEventSource<{ zoom: number }>,
                 lastClickLocation: UIEventSource<{ lat: number, lon: number }>,
                 changes: Changes,
-                selectedElement: UIEventSource<any>,
+                selectedElement: UIEventSource<{feature: any}>,
                 dataIsLoading: UIEventSource<boolean>,
                 userDetails: UIEventSource<UserDetails>,
                 addButtons: { name: UIElement; icon: string; tags: Tag[]; layerToAddTo: FilteredLayer }[],
@@ -55,7 +55,7 @@ export class SimpleAddUI extends UIElement {
             const loc = self._lastClickLocation.data;
             let feature = self._changes.createElement(option.tags, loc.lat, loc.lon);
             option.layerToAddTo.AddNewElement(feature);
-            self._selectedElement.setData(feature.properties);
+            self._selectedElement.setData({feature: feature});
         }
     }
 

index.ts

@@ -118,7 +118,8 @@ const secondsTillChangesAreSaved = new UIEventSource<number>(0);
 // This message is shown full screen on mobile devices
 const fullScreenMessage = new UIEventSource<UIElement>(undefined);
 
-const selectedElement = new UIEventSource<any>(undefined);
+// The latest element that was selected - used to generate the right UI at the right place
+const selectedElement = new UIEventSource<{feature: any}>(undefined);
 
 
 const locationControl = new UIEventSource<{ lat: number, lon: number, zoom: number }>({
@@ -179,9 +180,10 @@ let minZoom = 0;
 
 for (const layer of layoutToUse.layers) {
 
-    const generateInfo = (tagsES) => {
+    const generateInfo = (tagsES, feature) => {
 
         return new FeatureInfoBox(
+            feature,
             tagsES,
             layer.title,
             layer.elementsToShow,
@@ -229,7 +231,8 @@ new StrayClickHandler(bm, selectedElement, fullScreenMessage, () => {
 /**
  * Show the questions and information for the selected element on the fullScreen
  */
-selectedElement.addCallback((data) => {
+selectedElement.addCallback((feature) => {
+    const data = feature.feature.properties;
     // Which is the applicable set?
     for (const layer of layoutToUse.layers) {
 
@@ -238,6 +241,7 @@ selectedElement.addCallback((data) => {
             // This layer is the layer that gives the questions
 
             const featureBox = new FeatureInfoBox(
+                feature.feature,
                 allElements.getElement(data.id),
                 layer.title,
                 layer.elementsToShow,