First working version of split road functionality

UI/BigComponents/SimpleAddUI.ts

@@ -76,7 +76,12 @@ export default class SimpleAddUI extends Toggle {
                             State.state.changes.applyAction(newElementAction)
                             selectedPreset.setData(undefined)
                             isShown.setData(false)
-                            Hash.hash.setData(newElementAction.newElementId)
+                            State.state.selectedElement.setData(State.state.allElements.ContainingFeatures.get(
+                                newElementAction.newElementId
+                            ))
+                            console.log("Did set selected element to",State.state.allElements.ContainingFeatures.get(
+                                newElementAction.newElementId
+                            ))
                         }, () => {
                             selectedPreset.setData(undefined)
                         })

UI/Input/LocationInput.ts

@@ -42,7 +42,6 @@ export default class LocationInput extends InputElement<Loc> {
             }
         )
         map.leafletMap.addCallbackAndRunD(leaflet => {
-            console.log(leaflet.getBounds(), leaflet.getBounds().pad(0.15))
             leaflet.setMaxBounds(
                 leaflet.getBounds().pad(0.15)
             )

UI/ShowDataLayer.ts

@@ -23,7 +23,7 @@ export default class ShowDataLayer {
                 layoutToUse: UIEventSource<LayoutConfig>,
                 enablePopups = true,
                 zoomToFeatures = false,
-                name?:string) {
+                name?: string) {
         this._leafletMap = leafletMap;
         this._enablePopups = enablePopups;
         this._features = features;
@@ -130,6 +130,7 @@ export default class ShowDataLayer {
             })
         });
     }
+
     private postProcessFeature(feature, leafletLayer: L.Layer) {
         const layer: LayerConfig = this._layerDict[feature._matching_layer_id];
         if (layer === undefined) {
@@ -157,7 +158,7 @@ export default class ShowDataLayer {
 
         leafletLayer.on("popupopen", () => {
             State.state.selectedElement.setData(feature)
-           
+
             if (infobox === undefined) {
                 const tags = State.state.allElements.getEventSourceById(feature.properties.id);
                 infobox = new FeatureInfoBox(tags, layer);
@@ -172,7 +173,7 @@ export default class ShowDataLayer {
 
 
             infobox.AttachTo(id)
-            infobox.Activate(); 
+            infobox.Activate();
         });
         const self = this;
         State.state.selectedElement.addCallbackAndRunD(selected => {
@@ -185,11 +186,13 @@ export default class ShowDataLayer {
             if (selected.properties.id === feature.properties.id) {
                 // A small sanity check to prevent infinite loops:
                 if (selected.geometry.type === feature.geometry.type  // If a feature is rendered both as way and as point, opening one popup might trigger the other to open, which might trigger the one to open again
-
-                    &&                     feature.id === feature.properties.id // the feature might have as id 'node/-1' and as 'feature.properties.id' = 'the newly assigned id'. That is no good too
-                     ) {
+                    && feature.id === feature.properties.id // the feature might have as id 'node/-1' and as 'feature.properties.id' = 'the newly assigned id'. That is no good too
+                ) {
                     leafletLayer.openPopup()
                 }
+                if(feature.id !== feature.properties.id){
+                    console.log("Not opening the popup for", feature)
+                }
 
             }
         })

UI/SpecialVisualizations.ts

@@ -55,9 +55,12 @@ export default class SpecialVisualizations {
                             if (!tags.hasOwnProperty(key)) {
                                 continue;
                             }
-                            parts.push(key + "=" + tags[key]);
+                            parts.push([key , tags[key] ?? "<b>undefined</b>" ]);
                         }
-                        return parts.join("<br/>")
+                        return new Table(
+                            ["key","value"],
+                            parts
+                        )
                     })).SetStyle("border: 1px solid black; border-radius: 1em;padding:1em;display:block;")
                 })
             },