Display OSM tags and muv JSON in lane popups, in a rather unergonomic

way
a-b-street · Mar 14, 2024 · f2ed6b0 · f2ed6b0
1 parent cd0fc2b
commit f2ed6b0
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 6 deletions.
diff --git a/osm2streets/src/render.rs b/osm2streets/src/render.rs
@@ -148,6 +148,9 @@ impl StreetNetwork {
                     "osm_way_ids",
                     Value::Array(road.osm_ids.iter().map(|id| id.0.into()).collect()),
                 );
+                if let Some(ref muv) = lane.lane {
+                    f.set_property("muv", serde_json::to_value(muv)?);
+                }
                 features.push(f);
             }
         }

diff --git a/web/src/lane-editor/App.svelte b/web/src/lane-editor/App.svelte
@@ -20,7 +20,8 @@
       Improve OSM lane tagging with
       <a href="https://github.com/a-b-street/osm2streets" target="_blank"
         >osm2streets</a
-> and <a href="https://gitlab.com/LeLuxNet/Muv" target="_blank">Muv</a>.
+      >
+      and <a href="https://gitlab.com/LeLuxNet/Muv" target="_blank">Muv</a>.
     </p>
     <hr />
 

diff --git a/web/src/street-explorer/App.svelte b/web/src/street-explorer/App.svelte
@@ -21,7 +21,8 @@
       Understanding OSM streets &amp; intersections with
       <a href="https://github.com/a-b-street/osm2streets" target="_blank"
         >osm2streets</a
-      > and <a href="https://gitlab.com/LeLuxNet/Muv" target="_blank">Muv</a>.
+      >
+      and <a href="https://gitlab.com/LeLuxNet/Muv" target="_blank">Muv</a>.
     </p>
     <hr />
 

diff --git a/web/src/street-explorer/LanePopup.svelte b/web/src/street-explorer/LanePopup.svelte
@@ -7,6 +7,7 @@
 
   let props = structuredClone(lane.properties);
   delete props.osm_way_ids;
+  delete props.muv;
 
   function collapse() {
     $network!.collapseShortRoad(lane.properties.road);
@@ -17,16 +18,34 @@
     $network!.zipSidepath(lane.properties.road);
     $network = $network;
   }
+
+  // TODO Hack because TS doesn't work below
+  let networkValue = $network!;
 </script>
 
 <pre>{JSON.stringify(props, null, "  ")}</pre>
 
-<div>
-  OSM ways:
+{#if lane.properties.muv}
+  <details>
+    <summary>Full Muv JSON</summary>
+    <pre>{JSON.stringify(lane.properties.muv, null, "  ")}</pre>
+  </details>
+{/if}
+
+<hr />
+
+<u>OSM ways:</u>
+<ul>
   {#each lane.properties.osm_way_ids as id}
-    <a href="https://www.openstreetmap.org/way/{id}" target="_blank">{id}</a>,
+    <li>
+      <a href="https://www.openstreetmap.org/way/{id}" target="_blank">{id}</a>
+      <details>
+        <summary>See OSM tags</summary>
+        <pre>{networkValue.getOsmTagsForWay(BigInt(id))}</pre>
+      </details>
+    </li>
   {/each}
-</div>
+</ul>
 
 <div>
   <button type="button" on:click={collapse}>Collapse short road</button>

diff --git a/web/src/street-explorer/Popups.svelte b/web/src/street-explorer/Popups.svelte
@@ -26,6 +26,7 @@
       // Instantiate the Svelte component manually, so we can then put the DOM
       // it creates into the popup
       let container = document.createElement("div");
+      container.style.cssText = "height: 300px; overflow-y: auto;";
       new LanePopup({
         target: container,
         props: { lane: $clickedLane },