diff --git a/CMakeLists.txt b/CMakeLists.txt
index 46354ae..889b339 100644
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@@ -145,7 +145,7 @@ configure_file(
 file(GLOB_RECURSE osr-test-files test/*cc)
 add_executable(osr-test ${osr-test-files})
 target_include_directories(osr-test PRIVATE ${CMAKE_CURRENT_BINARY_DIR}/generated)
-target_link_libraries(osr-test gtest osr)
+target_link_libraries(osr-test gtest osr boost-json)
 
 # --- MIMALLOC ---
 if (OSR_MIMALLOC)
diff --git a/exe/backend/src/http_server.cc b/exe/backend/src/http_server.cc
index 8dbbe83..4eb87cd 100644
--- a/exe/backend/src/http_server.cc
+++ b/exe/backend/src/http_server.cc
@@ -58,7 +58,7 @@ web_server::string_res_t json_response(
 location parse_location(json::value const& v) {
   auto const& obj = v.as_object();
   return {obj.at("lat").as_double(), obj.at("lng").as_double(),
-          obj.contains("level") ? to_level(obj.at("level").to_number<float>())
+          obj.contains("level") ? level_t{obj.at("level").to_number<float>()}
                                 : kNoLevel};
 }
 
@@ -132,7 +132,7 @@ struct http_server::impl {
                                    {"type", "Feature"},
                                    {
                                        "properties",
-                                       {{"level", to_float(s.from_level_)},
+                                       {{"level", s.from_level_.to_float()},
                                         {"osm_way_id",
                                          s.way_ == way_idx_t::invalid()
                                              ? 0U
@@ -162,7 +162,7 @@ struct http_server::impl {
       }
     });
     auto levels_sorted =
-        utl::to_vec(levels, [](level_t const l) { return to_float(l); });
+        utl::to_vec(levels, [](level_t const l) { return l.to_float(); });
     utl::sort(levels_sorted, [](auto&& a, auto&& b) { return a > b; });
     cb(json_response(req,
                      json::serialize(utl::all(levels_sorted)  //
@@ -184,10 +184,10 @@ struct http_server::impl {
 
     switch (profile) {
       case search_profile::kFoot:
-        send_graph_response<foot<false>>(req, cb, gj);
+        send_graph_response<foot<false, elevator_tracking>>(req, cb, gj);
         break;
       case search_profile::kWheelchair:
-        send_graph_response<foot<true>>(req, cb, gj);
+        send_graph_response<foot<true, elevator_tracking>>(req, cb, gj);
         break;
       case search_profile::kBike: send_graph_response<bike>(req, cb, gj); break;
       case search_profile::kCar: send_graph_response<car>(req, cb, gj); break;
@@ -229,7 +229,7 @@ struct http_server::impl {
 
     auto const query = boost::json::parse(req.body()).as_object();
     auto const level = query.contains("level")
-                           ? to_level(query.at("level").to_number<float>())
+                           ? level_t{query.at("level").to_number<float>()}
                            : kNoLevel;
     auto const waypoints = query.at("waypoints").as_array();
     auto const min = point::from_latlng(
diff --git a/include/osr/extract/tags.h b/include/osr/extract/tags.h
index 19dea54..59da382 100644
--- a/include/osr/extract/tags.h
+++ b/include/osr/extract/tags.h
@@ -53,13 +53,16 @@ struct tags {
             is_platform_ = true;
           }
           break;
+        case cista::hash("layer"):
+          // not correct but layer seems to be used like level in some places :/
+          [[fallthrough]];
         case cista::hash("level"): {
           has_level_ = true;
           auto s = utl::cstr{t.value()};
           while (s) {
             auto l = 0.0F;
             utl::parse_arg(s, l);
-            auto const lvl = to_level(std::clamp(l, kMinLevel, kMaxLevel));
+            auto const lvl = level_t{std::clamp(l, kMinLevel, kMaxLevel)};
             level_bits_ |= (1U << to_idx(lvl));
             if (s) {
               ++s;
diff --git a/include/osr/geojson.h b/include/osr/geojson.h
index 8500a29..a9ee766 100644
--- a/include/osr/geojson.h
+++ b/include/osr/geojson.h
@@ -64,7 +64,7 @@ struct geojson_writer {
           {"properties",
            {{"type", is_way(r) ? "way" : "node"},
             {"platform_idx", to_idx(i)},
-            {"level", to_float(platforms_->get_level(w_, i))},
+            {"level", platforms_->get_level(w_, i).to_float()},
             {"names", platform_names(*platforms_, i)}}},
           {"geometry", geometry}});
     }
@@ -94,8 +94,8 @@ struct geojson_writer {
             {"oneway_car", p.is_oneway_car()},
             {"oneway_bike", p.is_oneway_bike()},
             {"max_speed", p.max_speed_km_per_h()},
-            {"from_level", to_float(level_t{p.from_level()})},
-            {"to_level", to_float(level_t{p.to_level()})},
+            {"from_level", p.from_level().to_float()},
+            {"to_level", p.to_level().to_float()},
             {"is_elevator", p.is_elevator()},
             {"is_steps", p.is_steps()},
             {"is_parking", p.is_parking_}}},
@@ -116,8 +116,8 @@ struct geojson_writer {
                              {"oneway_car", p.is_oneway_car()},
                              {"oneway_bike", p.is_oneway_bike()},
                              {"max_speed", p.max_speed_km_per_h()},
-                             {"from_level", to_float(level_t{p.from_level()})},
-                             {"to_level", to_float(level_t{p.to_level()})},
+                             {"from_level", p.from_level().to_float()},
+                             {"to_level", p.to_level().to_float()},
                              {"is_elevator", p.is_elevator()},
                              {"is_steps", p.is_steps()}}},
                            {"geometry", to_line_string(w_.way_polylines_[i])}});
@@ -142,7 +142,7 @@ struct geojson_writer {
 
       auto levels = std::vector<float>();
       foot<true>::for_each_elevator_level(
-          *w_.r_, n, [&](auto&& l) { levels.push_back(to_float(level_t{l})); });
+          *w_.r_, n, [&](level_t const l) { levels.push_back(l.to_float()); });
 
       auto properties = boost::json::object{
           {"osm_node_id", to_idx(w_.node_to_osm_[n])},
diff --git a/include/osr/location.h b/include/osr/location.h
index 2959734..dc6b227 100644
--- a/include/osr/location.h
+++ b/include/osr/location.h
@@ -14,7 +14,7 @@ struct location {
   CISTA_FRIEND_COMPARABLE(location)
 
   friend std::ostream& operator<<(std::ostream& out, location const& l) {
-    return out << "{ pos=" << l.pos_ << ", lvl=" << to_float(l.lvl_) << " }";
+    return out << "{ pos=" << l.pos_ << ", lvl=" << l.lvl_.to_float() << " }";
   }
 
   geo::latlng pos_;
diff --git a/include/osr/platforms.h b/include/osr/platforms.h
index dc913b4..b459d13 100644
--- a/include/osr/platforms.h
+++ b/include/osr/platforms.h
@@ -133,7 +133,7 @@ struct platforms {
 
   level_t get_level(ways const& w, platform_idx_t const i) const {
     if (i == platform_idx_t::invalid()) {
-      return to_level(0.0);
+      return level_t{0.0F};
     }
     return std::visit(
         utl::overloaded{
diff --git a/include/osr/routing/profiles/bike_sharing.h b/include/osr/routing/profiles/bike_sharing.h
index b3267f3..d39d68e 100644
--- a/include/osr/routing/profiles/bike_sharing.h
+++ b/include/osr/routing/profiles/bike_sharing.h
@@ -83,14 +83,14 @@ struct bike_sharing {
     boost::json::object geojson_properties(ways const& w) const {
       auto properties =
           boost::json::object{{"osm_node_id", to_idx(w.node_to_osm_[n_])},
-                              {"level", to_float(lvl_)},
+                              {"level", lvl_.to_float()},
                               {"type", node_type_to_str(type_)}};
       return properties;
     }
 
     std::ostream& print(std::ostream& out, ways const& w) const {
       return out << "(node=" << w.node_to_osm_[n_]
-                 << ", level=" << to_float(lvl_)
+                 << ", level=" << lvl_.to_float()
                  << ", type=" << node_type_to_str(type_) << ")";
     }
 
diff --git a/include/osr/routing/profiles/car_parking.h b/include/osr/routing/profiles/car_parking.h
index d91b26a..d35722d 100644
--- a/include/osr/routing/profiles/car_parking.h
+++ b/include/osr/routing/profiles/car_parking.h
@@ -42,7 +42,7 @@ struct car_parking {
     boost::json::object geojson_properties(ways const& w) const {
       auto properties =
           boost::json::object{{"osm_node_id", to_idx(w.node_to_osm_[n_])},
-                              {"level", to_float(lvl_)},
+                              {"level", lvl_.to_float()},
                               {"type", node_type_to_str(type_)}};
       if (is_car_node()) {
         properties.emplace("direction", to_str(dir_));
@@ -52,7 +52,7 @@ struct car_parking {
 
     std::ostream& print(std::ostream& out, ways const& w) const {
       return out << "(node=" << w.node_to_osm_[n_]
-                 << ", level=" << to_float(lvl_) << ", dir=" << to_str(dir_)
+                 << ", level=" << lvl_.to_float() << ", dir=" << to_str(dir_)
                  << ", way=" << w.way_osm_idx_[w.r_->node_ways_[n_][way_]]
                  << ", type=" << node_type_to_str(type_) << ")";
     }
diff --git a/include/osr/routing/profiles/foot.h b/include/osr/routing/profiles/foot.h
index a05bfa7..7074a45 100644
--- a/include/osr/routing/profiles/foot.h
+++ b/include/osr/routing/profiles/foot.h
@@ -28,8 +28,7 @@ struct foot {
     static constexpr mode get_mode() noexcept { return mode::kFoot; }
 
     std::ostream& print(std::ostream& out, ways const& w) const {
-      return out << "(node=" << w.node_to_osm_[n_]
-                 << ", level=" << to_float(lvl_) << ")";
+      return out << "(node=" << w.node_to_osm_[n_] << ", level=" << lvl_ << ")";
     }
 
     node_idx_t n_;
@@ -107,9 +106,9 @@ struct foot {
     if (lvl == kNoLevel ||
         (p.from_level() == lvl || p.to_level() == lvl ||
          can_use_elevator(w, n, lvl)) ||
-        (lvl == to_level(0.F) &&
+        (lvl == level_t{0.F} &&
          (p.from_level() == kNoLevel && p.to_level() == kNoLevel))) {
-      f(node{n, lvl == kNoLevel ? p.from_level() : lvl});
+      f(node{n, p.from_level()});
     }
   }
 
@@ -243,7 +242,7 @@ struct foot {
       return way_prop.from_level();
     } else if (way_prop.from_level() == from_level ||
                way_prop.from_level() == kNoLevel || from_level == kNoLevel) {
-      return from_level;
+      return way_prop.from_level();
     } else {
       return std::nullopt;
     }
@@ -263,8 +262,9 @@ struct foot {
                                       Fn&& f) {
     auto const p = w.node_properties_[n];
     if (p.is_multi_level()) {
-      utl::for_each_set_bit(get_elevator_multi_levels(w, n),
-                            [&](auto&& l) { f(level_t{l}); });
+      utl::for_each_set_bit(get_elevator_multi_levels(w, n), [&](auto&& l) {
+        f(level_t{static_cast<std::uint8_t>(l)});
+      });
     } else {
       f(p.from_level());
       f(p.to_level());
diff --git a/include/osr/types.h b/include/osr/types.h
index d2ad0b3..0085c4c 100644
--- a/include/osr/types.h
+++ b/include/osr/types.h
@@ -138,19 +138,26 @@ constexpr direction to_direction(std::string_view s) {
 }
 
 // level
+constexpr auto const kMinLevel = -4.0F;
+constexpr auto const kMaxLevel = 3.5F;
+
 struct level_t {
+  static constexpr auto kNoLevel = 0U;
+
   friend constexpr std::uint8_t to_idx(level_t l) { return l.v_; }
 
   friend std::ostream& operator<<(std::ostream& out, level_t const l) {
-    if (to_idx(l) == 0) {
-      return out << "-";
-    } else {
-      return out << (-4.0 + ((to_idx(l) - 1U) / 4.0F));
-    }
+    return (l.v_ == kNoLevel) ? (out << "-") : (out << l.to_float());
   }
 
-  template <std::integral X>
-  explicit constexpr level_t(X x) : v_{static_cast<std::uint8_t>(x)} {}
+  explicit constexpr level_t(std::uint8_t const x) : v_{x} {}
+
+  explicit constexpr level_t(float const f)
+      : v_{static_cast<std::uint8_t>((f - kMinLevel) / 0.25F + 1U)} {}
+
+  constexpr float to_float() const {
+    return (v_ == kNoLevel) ? 0.0F : (kMinLevel + ((v_ - 1U) / 4.0F));
+  }
 
   constexpr level_t() = default;
 
@@ -161,20 +168,10 @@ struct level_t {
   std::uint8_t v_;
 };
 
-constexpr auto const kNoLevel = level_t{0U};
-constexpr auto const kMinLevel = -4.0F;
-constexpr auto const kMaxLevel = 3.5F;
-
-constexpr level_t to_level(float const f) {
-  return level_t{static_cast<std::uint8_t>((f - kMinLevel) / 0.25F + 1U)};
-}
-
-constexpr float to_float(level_t const l) {
-  return (l == kNoLevel) ? 0.0F : (kMinLevel + ((to_idx(l) - 1U) / 4.0F));
-}
+constexpr auto const kNoLevel = level_t{std::uint8_t{0U}};
 
 constexpr auto const kLevelBits = cista::constexpr_trailing_zeros(
-    cista::next_power_of_two(to_idx(to_level(kMaxLevel)) + 1U));
+    cista::next_power_of_two(to_idx(level_t{kMaxLevel}) + 1U));
 
 using level_bits_t = std::uint32_t;
 
@@ -186,8 +183,8 @@ constexpr std::tuple<level_t, level_t, bool> get_levels(
   auto from = kNoLevel, to = kNoLevel;
   utl::for_each_set_bit(levels, [&](auto&& bit) {
     from == kNoLevel  //
-        ? from = level_t{bit}
-        : to = level_t{bit};
+        ? from = level_t{static_cast<std::uint8_t>(bit)}
+        : to = level_t{static_cast<std::uint8_t>(bit)};
   });
   return {from, to == kNoLevel ? from : to, std::popcount(levels) > 2};
 }
diff --git a/src/route.cc b/src/route.cc
index f893238..9ea7769 100644
--- a/src/route.cc
+++ b/src/route.cc
@@ -133,8 +133,8 @@ double add_path(ways const& w,
       }
     }
   } else {
-    segment.from_level_ = to_level(0);
-    segment.to_level_ = to_level(0);
+    segment.from_level_ = level_t{0.0F};
+    segment.to_level_ = level_t{0.0F};
     segment.from_ = from.get_node();
     segment.to_ = to.get_node();
     // polyline has to be filled by the caller, because we don't know
diff --git a/test/level_test.cc b/test/level_test.cc
index b7807e4..db25aad 100644
--- a/test/level_test.cc
+++ b/test/level_test.cc
@@ -9,12 +9,15 @@
 using namespace osr;
 
 TEST(osr, level) {
-  auto const lvl_0 = to_float(to_level(0.1F));
+  auto const lvl_0 = level_t{0.1F}.to_float();
   EXPECT_EQ(0.0F, lvl_0);
 
-  auto const lvl_4 = to_float(to_level(4.0F));
+  auto const lvl_neg4 = level_t{-4.0F}.to_float();
+  EXPECT_EQ(-4.0F, lvl_neg4);
+
+  auto const lvl_4 = level_t{4.0F}.to_float();
   EXPECT_EQ(4.0F, lvl_4);
 
-  auto const lvl_minus_3 = to_float(to_level(-3.0F));
+  auto const lvl_minus_3 = level_t{-3.0F}.to_float();
   EXPECT_EQ(-3.0F, lvl_minus_3);
 }
\ No newline at end of file
diff --git a/test/lvl_wildcard_test.cc b/test/lvl_wildcard_test.cc
new file mode 100644
index 0000000..db87d63
--- /dev/null
+++ b/test/lvl_wildcard_test.cc
@@ -0,0 +1,90 @@
+#ifdef _WIN32
+#include "windows.h"
+#endif
+
+#include "gtest/gtest.h"
+
+#include <filesystem>
+
+#include "boost/json.hpp"
+
+#include "utl/pipes.h"
+
+#include "fmt/core.h"
+#include "fmt/ranges.h"
+
+#include "osr/extract/extract.h"
+#include "osr/geojson.h"
+#include "osr/lookup.h"
+#include "osr/routing/route.h"
+#include "osr/ways.h"
+
+namespace json = boost::json;
+namespace fs = std::filesystem;
+using namespace osr;
+
+TEST(routing, no_lvl_wildcard) {
+  constexpr auto const kTestFolder = "/tmp/osr_stuttgart";
+
+  auto ec = std::error_code{};
+  fs::remove_all(kTestFolder, ec);
+  fs::create_directories(kTestFolder, ec);
+
+  extract(false, "test/stuttgart.osm.pbf", kTestFolder);
+
+  auto w = osr::ways{kTestFolder, cista::mmap::protection::READ};
+  auto l = osr::lookup{w};
+
+  auto const p = route(w, l, search_profile::kFoot,  //
+                       {{48.7829, 9.18212}, level_t{0.F}},
+                       {{48.7847, 9.18337}, level_t{1.F}},  //
+                       3600, direction::kForward, 100);
+
+  ASSERT_TRUE(p.has_value());
+
+  auto const path = json::serialize(json::object{
+      {"type", "FeatureCollection"},
+      {"metadata", {{"duration", p->cost_}, {"distance", p->dist_}}},
+      {"features",
+       utl::all(p->segments_) | utl::transform([&](const path::segment& s) {
+         return json::object{
+             {"type", "Feature"},
+             {
+                 "properties",
+                 {{"level", s.from_level_.to_float()},
+                  {"osm_way_id", s.way_ == way_idx_t::invalid()
+                                     ? 0U
+                                     : to_idx(w.way_osm_idx_[s.way_])},
+                  {"cost", s.cost_},
+                  {"distance", s.dist_}},
+             },
+             {"geometry", to_line_string(s.polyline_)}};
+       }) | utl::emplace_back_to<json::array>()}});
+  EXPECT_EQ(
+      "{\"type\":\"FeatureCollection\",\"metadata\":{\"duration\":385,"
+      "\"distance\":4.2683610950337305E2},\"features\":[{\"type\":\"Feature\","
+      "\"properties\":{\"level\":0E0,\"osm_way_id\":0,\"cost\":32,\"distance\":"
+      "36},\"geometry\":{\"type\":\"LineString\",\"coordinates\":[[9.18212E0,4."
+      "87829E1],[9.1824098E0,4.87829011E1],[9.1825297E0,4.87829369E1],[9."
+      "1826092E0,4.87829279E1]]}},{\"type\":\"Feature\",\"properties\":{"
+      "\"level\":1E0,\"osm_way_id\":1016875485,\"cost\":308,\"distance\":339},"
+      "\"geometry\":{\"type\":\"LineString\",\"coordinates\":[[9.1826092E0,4."
+      "87829279E1],[9.1827967E0,4.87828835E1],[9.1830696E0,4.87828214E1],[9."
+      "1836147E0,4.87829191E1],[9.1844751E0,4.87833829E1],[9.1845214E0,4."
+      "87834284E1],[9.1845395E0,4.87835258E1],[9.1845748E0,4.87835747E1],[9."
+      "1846319E0,4.8783605E1],[9.1846862E0,4.87836279E1],[9.1847208E0,4."
+      "8783654E1],[9.1847473E0,4.8783684E1],[9.1847559E0,4.87837162E1],[9."
+      "1847516E0,4.8783756E1],[9.1846579E0,4.87840841E1],[9.1846341E0,4."
+      "8784113E1],[9.1845471E0,4.87841486E1],[9.1844849E0,4.87841546E1],[9."
+      "1841289E0,4.87841629E1],[9.1840357E0,4.87841863E1],[9.1838475E0,4."
+      "87842531E1],[9.1835E0,4.8784369E1],[9.1835041E0,4.87843773E1]]}},{"
+      "\"type\":\"Feature\",\"properties\":{\"level\":1E0,\"osm_way_id\":"
+      "713810685,\"cost\":4,\"distance\":4},\"geometry\":{\"type\":"
+      "\"LineString\",\"coordinates\":[[9.1835041E0,4.87843773E1],[9.1835086E0,"
+      "4.87844171E1]]}},{\"type\":\"Feature\",\"properties\":{\"level\":1E0,"
+      "\"osm_way_id\":0,\"cost\":41,\"distance\":47},\"geometry\":{\"type\":"
+      "\"LineString\",\"coordinates\":[[9.1835086E0,4.87844171E1],[9.1834509E0,"
+      "4.87844364E1],[9.1832201E0,4.87845268E1],[9.183214598396768E0,4."
+      "8784528970208854E1],[9.18337E0,4.87847E1]]}}]}",
+      path);
+}
\ No newline at end of file
diff --git a/test/stuttgart.osm.pbf b/test/stuttgart.osm.pbf
new file mode 100644
index 0000000..8a2350d
Binary files /dev/null and b/test/stuttgart.osm.pbf differ
diff --git a/web/index.html b/web/index.html
index 6b74647..422c83b 100644
--- a/web/index.html
+++ b/web/index.html
@@ -2,109 +2,97 @@
 <html lang="en">
 <head>
     <title>Open Street Router</title>
-    <meta property="og:description" content="Pedestrian routing, bike routing and car routing for OpenStreetMap"/>
+    <meta property="og:description"
+          content="Pedestrian routing, bike routing and car routing for OpenStreetMap"/>
     <meta charset='utf-8'>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@4.1.2/dist/maplibre-gl.css'/>
+    <link rel='stylesheet'
+          href='https://unpkg.com/maplibre-gl@4.1.2/dist/maplibre-gl.css'/>
     <script src='https://unpkg.com/maplibre-gl@4.1.2/dist/maplibre-gl.js'></script>
     <script src="https://unpkg.com/maplibre-contour@0.0.5/dist/index.min.js"></script>
     <style>
-        html, body, #map {
-            height: 100%;
-            font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-        }
-
         body {
             margin: 0;
             padding: 0;
-            position: relative;
-        }
-
-        button {
-            all: unset;
-            cursor: pointer;
-        }
-
-        li, ul {
-            all: unset;
         }
 
-        button:focus {
-            outline: blue 1px auto;
+        html, body, #map {
+            height: 100%;
+            font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
         }
 
         #map {
             position: absolute;
-            inset: 0;
-            isolation: isolate;
+            top: 0;
+            bottom: 0;
+            width: 100%;
         }
 
-        .small-button {
-            padding: 10px;
-            border-radius: 3px;
+        #graph-toggle {
+            position: relative;
+            top: 5px;
+            left: 5px;
+            z-index: 1000;
             background: #fff;
+            border-radius: 3px;
+            box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
+            padding: 10px;
             display: flex;
+            width: 28px;
+            height: 28px;
+            text-align: center;
             align-items: center;
             justify-content: center;
             text-decoration: none;
             color: black;
-            width: 24px;
-            height: 24px;
-            border: 2px solid #fff;
-        }
-
-        .small-button:hover {
-            background: #EEE;
-        }
-
-        .small-button.active {
-            background: #bae6fd;
-            border: 2px solid #1890ff;
+            margin-bottom: 16px;
         }
 
-        .controls {
-            box-shadow: none;
-            pointer-events: none;
-            text-decoration: none;
-            width: auto;
-        }
-
-        .controls > :not(.controls) {
+        .level {
+            margin-top: 4px;
+            position: relative;
+            top: 5px;
+            left: 5px;
+            z-index: 1000;
+            background: #fff;
+            border-radius: 3px;
             box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
-            pointer-events: auto;
-        }
-
-        .flex-col {
+            padding: 9.5px;
             display: flex;
-            flex-direction: column;
+            width: 28px;
+            height: 28px;
+            text-align: center;
+            align-items: center;
+            justify-content: center;
+            text-decoration: none;
+            color: black;
+            font-size: 10pt;
         }
 
-        .flex-row {
-            display: flex;
-            flex-direction: row;
+        .active {
+            background: #8fff7b;
         }
 
-        .flex-start {
-            align-items: start;
+        #graph-toggle:hover, .level:hover {
+            background: #EEE;
         }
 
-        .map-button-list {
-            gap: 5px;
-            font-size: 10pt;
+        .active:hover {
+            background: #bdffb1;
         }
 
-        #controls-top-right {
+        #profile, #direction {
             position: absolute;
-            gap: 16px;
             top: 5px;
             right: 5px;
+            z-index: 1000;
+            box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
+            text-align: center;
+            text-decoration: none;
         }
 
-        #controls-top-left {
-            position: absolute;
-            gap: 16px;
-            top: 5px;
-            left: 5px;
+        #direction {
+            top: 48px;
         }
 
         #journey-info {
@@ -112,6 +100,7 @@
             position: absolute;
             bottom: 5px;
             left: 5px;
+            z-index: 1000;
             box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
             text-align: center;
             text-decoration: none;
@@ -120,135 +109,37 @@
             border-radius: 4px;
         }
 
-        #journey-info.error {
-            border: 2px solid rgba(255, 0, 0, 0.5);
-            background: rgba(139, 0, 0, 0.5);
-        }
-
         .context {
             margin: 0.5em;
         }
-
-        .info-popup {
-            max-height: 70vh;
-            overflow: auto;
-            margin-top: -10px;
-        }
-
-        .info-popup-layer-title-container {
-            display: flex;
-            align-items: center;
-            padding: 5px;
-        }
-
-        .info-popup-layer-title {
-            margin: 0 10px 0 0;
-            padding: 0;
-            font-size: 12pt;
-            font-weight: bold;
-        }
-
-        .info-popup-layer-feature-list {
-            list-style: none;
-            padding: 0;
-            margin: 0;
-            display: flex;
-            gap: 5px;
-        }
-
-        .info-popup-layer-feature-list li {
-            cursor: pointer;
-        }
-
-        .info-popup-layer-feature-list li.active {
-            font-weight: bold;
-        }
-
-        .data-grid {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 5px;
-        }
-
-        .data-card {
-            background: #f5f5f5;
-            border-radius: 4px;
-            padding: 5px 10px;
-        }
-
-        .data-label {
-            color: #888;
-            font-size: 8pt;
-        }
-
-        .data-value {
-            color: #333;
-            font-size: 11pt;
-            font-weight: medium;
-        }
     </style>
 </head>
 <body>
-<div id="map"></div>
-
-<div id="controls-top-left" class="controls flex-col">
-    <div class="controls flex-row map-button-list flex-start">
-        <button id="graph-toggle" class="small-button" type="button" onclick="toggleGraph()">G</button>
-        <button id="path-toggle" class="small-button" type="button" onclick="togglePath()">P</button>
-        <div class="flex-col">
-            <select id="graph-node-highlighting" onclick="setGraphNodeHighlighting()">
-                <option value="">None</option>
-                <option value="car">Car</option>
-                <option value="bike">Bike</option>
-                <option value="foot">Foot</option>
-                <option value="is_restricted">Restricted</option>
-                <option value="is_entrace">Entrance</option>
-                <option value="is_elevator">Elevator</option>
-                <option value="is_parking">Parking</option>
-                <option value="multi_level">MultiLevel</option>
-            </select>
-
-            <select id="graph-edge-highlighting" onclick="setGraphEdgeHiglighting()">
-                <option value="">None</option>
-                <option value="car">Car</option>
-                <option value="bike">Bike</option>
-                <option value="foot">Foot</option>
-                <option value="is_destination">Destination</option>
-                <option value="oneway_car">Oneway Car</option>
-                <option value="oneway_bike">Oneway Bike</option>
-                <option value="is_elevator">Elevator</option>
-                <option value="is_steps">Steps</option>
-                <option value="is_parking">Parking</option>
-            </select>
-        </div>
-    </div>
-    <div id="levels" class="controls flex-col map-button-list"></div>
+<a id="graph-toggle" href="#" onclick="toggleGraph()">G</a>
+<div id="levels"></div>
+<select id="profile" onchange="selectProfile(event)">
+    <option value="foot" selected>foot</option>
+    <option value="wheelchair">wheelchair</option>
+    <option value="bike">bike</option>
+    <option value="car">car</option>
+</select>
+<select id="direction" onchange="selectDirection(event)">
+    <option value="forward" selected>forward</option>
+    <option value="backward">backward</option>
+</select>
+<div id="journey-info">
+    Test
 </div>
-<div id="controls-top-right" class="controls flex-col">
-    <select id="profile" onchange="selectProfile(event)">
-        <option value="foot" selected>foot</option>
-        <option value="wheelchair">wheelchair</option>
-        <option value="bike">bike</option>
-        <option value="car">car</option>
-        <option value="car_parking">car parking</option>
-        <option value="car_parking_wheelchair">car parking wheelchair</option>
-    </select>
-
-    <select id="direction" onchange="selectDirection(event)">
-        <option value="forward" selected>forward</option>
-        <option value="backward">backward</option>
-    </select>
-</div>
-<div id="journey-info"></div>
+<div id="map"></div>
 <script type="module">
-    import { style, setStyleLayerFilters } from "./style.js";
+    import {style} from "./style.js";
 
-    const start = [8.663205312233744, 50.106847864540164];
-    const destination = [8.665205312233744, 50.106847864540164];
+    const start = [9.182124, 48.782888]
+    const destination = [9.183369, 48.784705];
     const query = {
         start, destination,
         start_level: 0.0,
-        destination_level: 0.0,
+        destination_level: 1.0,
         profile: document.getElementById('profile').value,
         direction: document.getElementById('direction').value
     };
@@ -258,16 +149,10 @@
     const updateRoute = async () => {
         try {
             const route = await getRoute();
-            map.getSource('path').setData(route);
-            meta.classList.remove('error');
-
-            if (graphActive) {
-                map.getSource('graph').setData(await getGraph(map.getBounds()));
+            if (!route.error) {
+                map.getSource('path').setData(route);
             }
-
         } catch (e) {
-            meta.classList.add('error');
-            meta.innerText = e.message;
         }
     }
 
@@ -287,224 +172,49 @@
         }
     });
 
-    const getDataGrid = (entries, cols = 7) => {
-        const grid = document.createElement('div');
-        
-        grid.classList.add('data-grid');
-        grid.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
-
-        for (const entry of entries) {
-            const cardNode = document.createElement('div');
-            cardNode.classList.add('data-card');
-            cardNode.classList.add(...entry.classes ?? []);
-            
-            const labelNode = document.createElement('div');
-            labelNode.classList.add('data-label');
-            labelNode.innerText = entry.label;
-
-            const valueNode = document.createElement(entry.tag ?? 'div');
-            valueNode.classList.add('data-value');
-            valueNode.innerText = entry.value;
-
-            for (const [key, value] of Object.entries(entry.tagProperties ?? {})) {
-                valueNode.setAttribute(key, value);
-            }
-
-            cardNode.appendChild(labelNode);
-            cardNode.appendChild(valueNode);
-
-            grid.appendChild(cardNode);
-        };
-
-        return grid;
-    }
-
-    function getOsmEntry(key, value) {
-        if (key === 'osm_way_id' && value !== 0) {
-            return {
-                label: key,
-                value: value.toString(),
-                tag: 'a',
-                tagProperties: {
-                    href: `https://www.openstreetmap.org/way/${Math.abs(value)}`,
-                    target: '_blank'
-                }
-            }
-        }
-
-        if (key === 'osm_relation_id' && value !== 0) {
-            return{
-                label: key,
-                value: value.toString(),
-                tag: 'a',
-                tagProperties: {
-                    href: `https://www.openstreetmap.org/relation/${Math.abs(value)}`,
-                    target: '_blank'
-                }
-            }
-        }
-
-        if (key === 'osm_node_id' && value !== 0) {
-            return {
-                label: key,
-                value: value.toString(),
-                tag: 'a',
-                tagProperties: {
-                    href: `https://www.openstreetmap.org/node/${Math.abs(value)}`,
-                    target: '_blank'
-                }
-            }
-        }
-    }
-
-    const getInfoPopupContentForGraphFeatures = (feature) => {
-        const entries = [];
-
-        for (const [key, value] of Object.entries(feature.properties)) {
-            const entry = getOsmEntry(key, value);
-
-            if (entry) {
-                entries.push(entry);
-                continue;
-            }
-
-            entries.push({
-                label: key,
-                value: value.toString(),
-            });
-        };
-
-        return getDataGrid(entries);
-    }
-
-    const getInfoPopupContentForPathSegment = (feature) => {
-        const entries = [];
-
-        for (const [key, value] of Object.entries(feature.properties)) {
-            const entry = getOsmEntry(key, value);
-
-            if (entry) {
-                entries.push(entry);
-                continue;
+    const toTable = (properties) => {
+        var table = document.createElement("table");
+        table.classList.add("routing-graph", "properties");
+        for (var key in properties) {
+            var value = properties[key];
+            var row = document.createElement("tr");
+            var keyCell = document.createElement("td");
+            keyCell.innerText = key;
+            keyCell.className = "key";
+            var valueCell = document.createElement("td");
+            if (key == "osm_way_id" && value != 0) {
+                var osmLink = document.createElement("a");
+                osmLink.href = "https://www.openstreetmap.org/way/" + Math.abs(value);
+                osmLink.target = "_blank";
+                osmLink.innerText = value;
+                valueCell.appendChild(osmLink);
+            } else if (key == "osm_relation_id" && value != 0) {
+                var osmLink = document.createElement("a");
+                osmLink.href =
+                    "https://www.openstreetmap.org/relation/" + Math.abs(value);
+                osmLink.target = "_blank";
+                osmLink.innerText = value;
+                valueCell.appendChild(osmLink);
+            } else if (key == "osm_node_id" && value != 0) {
+                var osmLink = document.createElement("a");
+                osmLink.href =
+                    "https://www.openstreetmap.org/node/" + Math.abs(value);
+                osmLink.target = "_blank";
+                osmLink.innerText = value;
+                valueCell.appendChild(osmLink);
+            } else {
+                valueCell.innerText = value;
             }
-
-
-            entries.push({
-                label: key,
-                value: value.toString(),
-            });
+            valueCell.className = "value";
+            row.appendChild(keyCell);
+            row.appendChild(valueCell);
+            table.appendChild(row);
         }
-
-        return getDataGrid(entries);
-    }
-
-    const getInfoPopupContentForFeature = (feature) => {
-        if (feature.source === 'graph') {
-            return {
-                id: feature.properties.internal_id,
-                content: getInfoPopupContentForGraphFeatures(feature),
-            };
-        }
-
-        if (feature.source === 'path') {
-            return {
-                id: feature.properties.osm_way_id,
-                content: getInfoPopupContentForPathSegment(feature),
-            };
-        }
-
-        const empty = document.createElement('div');
-        empty.innerText = 'No content available for this feature';
-    }
-
-    const getInfoPopupContent = (features) => {
-        const container = document.createElement('div');
-        container.classList.add("info-popup");
-
-        const groupedByLayer = new Map();
-
-        for (const feature of features) {
-            const layer = feature.layer.id;
-            if (!groupedByLayer.has(layer)) {
-                groupedByLayer.set(layer, []);
-            }
-
-            groupedByLayer.get(layer).push(feature);
-        }
-
-        for (const [layer, features] of groupedByLayer.entries()) {
-            const layerContainer = document.createElement('div');
-            layerContainer.classList.add('info-popup-layer-container');
-
-            const titleContainer = document.createElement('div');
-            titleContainer.classList.add('info-popup-layer-title-container');
-            layerContainer.appendChild(titleContainer);
-
-            const layerTitle = document.createElement('h3');
-            layerTitle.classList.add('info-popup-layer-title');
-            layerTitle.innerText = layer;
-            titleContainer.appendChild(layerTitle);
-
-            const featureList = document.createElement('ul');
-            featureList.classList.add('info-popup-layer-feature-list');
-            titleContainer.appendChild(featureList);
-
-            let selected = null;
-
-            for (const feature of features) {
-                const data = getInfoPopupContentForFeature(feature);
-
-                if (!data) {
-                    continue;
-                }
-
-                const { id, content } = data;
-
-                const featureItem = document.createElement('li');
-                featureItem.innerText = id;
-
-                featureItem.onclick = () => {
-
-                    if (selected) {
-                        selected.content.remove();
-                        selected.item.classList.remove('active');
-                    }
-
-                    selected = {
-                        item: featureItem,
-                        content
-                    };
-
-                    featureItem.classList.add('active');
-                    layerContainer.appendChild(content);
-                };
-
-                featureList.appendChild(featureItem);
-
-                if (!selected) {
-                    selected = {
-                        item: featureItem,
-                        content
-                    };
-
-                    featureItem.classList.add('active');
-                }
-            }
-
-            if(!selected) {
-                continue;
-            }
-
-            layerContainer.appendChild(selected.content);
-
-            container.appendChild(layerContainer);
-        };
-
-        return container;
+        return table;
     }
 
     const getRoute = async () => {
-        const response = await fetch('api/route', {
+        const response = await fetch(`${window.origin}/api/route`, {
             method: 'POST',
             mode: 'cors',
             headers: {
@@ -526,25 +236,17 @@
                 direction: query.direction
             })
         });
-
-        if (response.status !== 200) {
-            const error = await response.text();
-            throw new Error('Failed to fetch route. ' + error);
-        }
-
-        const r =  await response.json();
-
+        const r = await response.json();
         const min = Math.floor(r.metadata.duration / 60);
         const sec = r.metadata.duration % 60;
         const m = Math.round(r.metadata.distance);
 
         meta.innerHTML = `${min} min ${sec} s<br>${m} meter`;
-
         return r;
     };
 
     const getGraph = async (bounds) => {
-        const response = await fetch('api/graph', {
+        const response = await fetch(`${window.origin}/api/graph`, {
             method: 'POST',
             mode: 'cors',
             headers: {
@@ -552,15 +254,15 @@
                 'Content-Type': 'application/json'
             },
             body: JSON.stringify({
-                waypoints: bounds.toArray().flat(),
-                profile: query.profile,
+                level: currentLevel,
+                waypoints: bounds.toArray().flat()
             })
         });
         return await response.json();
     };
 
     const getLevels = async (bounds) => {
-        const response = await fetch('api/levels', {
+        const response = await fetch(`${window.origin}/api/levels`, {
             method: 'POST',
             mode: 'cors',
             headers: {
@@ -573,89 +275,39 @@
         });
         return await response.json();
     }
-    let currentLevel = 0;
-    let currentLeveLButton = null;
-    let graphActive = false;
 
+    let graph = false;
+    let currentLevel = 0;
     const levelsDom = document.getElementById('levels');
-
-    const updateRenderedMapLevels = () => {
-        setStyleLayerFilters(map, currentLevel);
-        const filter = [
-            'any',
-            ['==', 'level', currentLevel],
-        ]
-        map.setFilter('path-outline', [
-            'any',
-            ['==', 'level', currentLevel],
-        ])
-        map.setFilter('path', [
-            'any',
-            ['==', 'level', currentLevel],
-        ])
-        map.setFilter('graph-node', [
-            'all',
-            ['in', currentLevel, ['get', 'levels']]
-        ])
-        map.setFilter('graph-geometry', [
-            'all',
-            ['==', 'type', 'geometry'],
-            [
-                'any',
-                ['==', 'from_level', currentLevel],
-                ['==', 'to_level', currentLevel],
-            ],
-        ])
-        map.setFilter('graph-edge', [
-            'all',
-            ['==', 'type', 'edge'],
-            [
-                'any',
-                ['==', 'from_level', currentLevel],
-                ['==', 'to_level', currentLevel],
-            ],
-        ])
-
-    }
-
     const setLevels = async (levels) => {
         if (levels.length === 0 && currentLevel !== 0) {
             currentLevel = 0;
-            updateRenderedMapLevels();
+            graph = false;
+            style(map, 0);
+            await addRouting();
+            await updateGraph();
         }
-
         levelsDom.innerHTML = '';
-
         levels.forEach(l => {
-            const levelButton = document.createElement('button');
-            levelButton.type = 'button';
-            levelButton.textContent = `${l}`;
-            levelButton.classList.add('small-button', 'level');
-
-            if (l === currentLevel) {
-                levelButton.classList.add('active');
-                currentLeveLButton = levelButton;
-            }
-
-            levelButton.onclick = async () => {
+            const levelLink = document.createElement('a');
+            levelLink.href = '#';
+            levelLink.textContent = `${l}`;
+            levelLink.classList.add('level');
+            levelLink.onclick = async () => {
                 currentLevel = l;
-                currentLeveLButton?.classList.remove('active');
-                currentLeveLButton = levelButton;
-                levelButton.classList.add('active');
-                updateRenderedMapLevels();
+                graph = false;
+                style(map, l);
+                await addRouting();
+                await updateGraph();
             };
-
-            levelsDom.appendChild(levelButton);
+            levelsDom.appendChild(levelLink);
         })
     }
 
-    const addRouting = () => {
+    const addRouting = async () => {
         map.addSource('path', {
             type: 'geojson',
-            data: {
-                type: 'FeatureCollection',
-                features: []
-            },
+            data: await getRoute()
         });
         map.addLayer({
             'id': 'path-outline',
@@ -665,10 +317,15 @@
                 'line-join': 'round',
                 'line-cap': 'round',
             },
+            'filter': [
+                'any',
+                ['!has', 'level'],
+                ['==', 'level', currentLevel]
+            ],
             'paint': {
-                'line-color': ['interpolate-lab', ['linear'], ['/', ['number', ['get', 'cost'], 0], ['max', ['number', ['get', 'distance'], 1], 1]], 0, 'green', 0.25, 'darkorange', 0.5, 'chocolate', 1, 'darkred'],
-                'line-width': 12,
-                'line-opacity': 1,
+                'line-color': '#1966a4',
+                'line-width': 7.5,
+                'line-opacity': 0.8
             }
         });
         map.addLayer({
@@ -679,53 +336,15 @@
                 'line-join': 'round',
                 'line-cap': 'round',
             },
+            'filter': [
+                'any',
+                ['!has', 'level'],
+                ['==', 'level', currentLevel]
+            ],
             'paint': {
-                'line-color': ['match', ['get', 'type', ['get', 'to_node']], 'foot', 'lightcyan', 'bike', 'cyan', 'car', 'skyblue', 'lightcyan'],
+                'line-color': '#42a5f5',
                 'line-width': 5,
-                'line-opacity': 1,
-            }
-        });
-    }
-
-    const addGraph = () => {
-        map.addSource('graph', {
-            type: 'geojson',
-            data: {
-                type: 'FeatureCollection',
-                features: []
-            },
-        });
-        map.addLayer({
-            'id': 'graph-geometry',
-            'type': 'line',
-            'source': 'graph',
-            'layout': {
-                'line-join': 'round',
-                'line-cap': 'round',
-            },
-            'paint': {
-                'line-width': 3,
-                'line-opacity': 1
-            }
-        });
-        map.addLayer({
-            'id': 'graph-edge',
-            'type': 'line',
-            'source': 'graph',
-            'layout': {
-                'line-join': 'round',
-                'line-cap': 'round',
-            },
-            'paint': {
-                'line-width': 3
-            }
-        });
-        map.addLayer({
-            'id': 'graph-node',
-            'type': 'circle',
-            'source': 'graph',
-            'paint': {
-                'circle-radius': 6,
+                'line-opacity': 0.8
             }
         });
     }
@@ -738,142 +357,112 @@
         }
     }
 
-    const graphToggle = document.getElementById("graph-toggle");
-    const toggleGraph = async (setTo = !graphActive) => {
-        if (setTo === graphActive) {
-            return;
-        }
-
-        graphActive = setTo;
-
-        if (graphActive) {
-            graphToggle.classList.add('active');
-            map.getSource('graph').setData(await getGraph(map.getBounds()));
-            map.setLayoutProperty('graph-node', 'visibility', 'visible');
-            map.setLayoutProperty('graph-edge', 'visibility', 'visible');
-            map.setLayoutProperty('graph-geometry', 'visibility', 'visible');
-        } else {
-            graphToggle.classList.remove('active');
-            map.setLayoutProperty('graph-node', 'visibility', 'none');
-            map.setLayoutProperty('graph-edge', 'visibility', 'none');
-            map.setLayoutProperty('graph-geometry', 'visibility', 'none');
-        }
-    }
-
-    const graphEdgeHighlightingDomElement = document.getElementById('graph-edge-highlighting');
-    let currentlyHighlightedGraphEdge = undefined;
-    const setGraphEdgeHiglighting = () => {
-        const selected = graphEdgeHighlightingDomElement.value;
-
-        if (selected === currentlyHighlightedGraphEdge) {
-            return;
-        }; 
-
-        if (selected === '') {
-            map.setPaintProperty('graph-edge', 'line-color', '#a300d9');
-            map.setPaintProperty('graph-geometry', 'line-color', '#e55e5e');
-        } else {
-            map.setPaintProperty('graph-edge', 'line-color', [
-                'case',
-                ['to-boolean', ['get', selected]], 'cyan',
-                '#a300d9',
-            ]);
-
-            map.setPaintProperty('graph-geometry', 'line-color', [
-                'case',
-                ['to-boolean', ['get', selected]], 'cyan',
-                '#e55e5e',
-            ]);
-        }
-
-        currentlyHighlightedGraphEdge = selected;
-    }
-
-    window.setGraphEdgeHiglighting = setGraphEdgeHiglighting;
-
-    const graphNodeHighlightingDomElement = document.getElementById('graph-node-highlighting');
-    let currentlyHighlightedGraphNode = undefined;
-    const setGraphNodeHighlighting = () => {
-        const selected = graphNodeHighlightingDomElement.value;
-
-        if (selected === currentlyHighlightedGraphNode) {
-            return;
-        }; 
-
-        if (selected === '') {
-            map.setPaintProperty('graph-node', 'circle-color', [
-                'match',
-                ['get', 'label'],
-                'unreachable', '#ff1150',
-                '#11ffaf'
-            ]);
-            map.setPaintProperty('graph-node', 'circle-stroke-width', 0)
-            map.setPaintProperty('graph-node', 'circle-radius', 6)
-        } else {
-            map.setPaintProperty('graph-node', 'circle-color', [
-                'case',
-                ['!=', ['get', 'label'], 'unreachable'], '#11ffaf',
-                ['to-boolean', ['get', selected]], 'orange',
-                '#ff1150',
-            ]);
-
-            map.setPaintProperty('graph-node', 'circle-stroke-color', [
-                'case',
-                ['to-boolean', ['get', selected]], 'orange',
-                ['!=', ['get', 'label'], 'unreachable'], '#11ffaf',
-                '#ff1150',
-            ]);
-
-            map.setPaintProperty('graph-node', 'circle-radius', 4);
-            map.setPaintProperty('graph-node', 'circle-stroke-width', 2);
-        }
-
-        currentlyHighlightedGraphNode = selected;
-    }
-
-    window.setGraphNodeHighlighting = setGraphNodeHighlighting;
-
-
     map.on('load', async () => {
         style(map, 0);
         await updateLevels();
-        addGraph();
-        addRouting();
-        await updateRoute();
-        updateRenderedMapLevels();
-        setGraphNodeHighlighting();
-        setGraphEdgeHiglighting();
+        await addRouting();
     });
 
+    const updateGraph = async () => {
+        if (!graphActive && graph) {
+            graph = false;
+            try {
+                graphToggle.classList.remove('active');
+                map.removeLayer('graph-geometry');
+                map.removeLayer('graph-edge');
+                map.removeLayer('graph-node');
+                map.removeSource('graph');
+            } catch (e) {
+                // ignore, already removed
+            }
+        } else if (graphActive && !graph) {
+            graph = true;
+            graphToggle.classList.add('active');
+            map.addSource('graph', {
+                type: 'geojson',
+                data: await getGraph(map.getBounds())
+            });
+            map.addLayer({
+                'id': 'graph-geometry',
+                'type': 'line',
+                'source': 'graph',
+                'filter': [
+                    'all',
+                    ['==', 'type', 'geometry'],
+                    [
+                        'any',
+                        ['!has', 'level'],
+                        ['==', 'level', currentLevel]
+                    ]
+                ],
+                'layout': {
+                    'line-join': 'round',
+                    'line-cap': 'round',
+                },
+                'paint': {
+                    'line-color': '#e55e5e',
+                    'line-width': 3,
+                    'line-opacity': 1
+                }
+            });
+            map.addLayer({
+                'id': 'graph-edge',
+                'type': 'line',
+                'source': 'graph',
+                'filter': [
+                    'all',
+                    ['==', 'type', 'edge'],
+                    [
+                        'any',
+                        ['!has', 'level'],
+                        ['==', 'level', currentLevel]
+                    ]
+                ],
+                'layout': {
+                    'line-join': 'round',
+                    'line-cap': 'round',
+                },
+                'paint': {
+                    'line-color': '#a300d9',
+                    'line-width': 3
+                }
+            });
+            map.addLayer({
+                'id': 'graph-node',
+                'type': 'circle',
+                'source': 'graph',
+                'filter': [
+                    'all',
+                    ['==', '$type', 'Point']
+                ],
+                'paint': {
+                    'circle-color': [
+                        'match',
+                        ['get', 'label'],
+                        'unreachable', '#ff1150',
+                        '#11ffaf'
+                    ],
+                    'circle-radius': 6,
+                }
+            });
+        }
+    }
+
+    const graphToggle = document.getElementById("graph-toggle");
+    let graphActive = false;
     window.toggleGraph = async () => {
-        await toggleGraph();
+        graphActive = !graphActive;
+        await updateGraph();
     }
 
     window.selectProfile = async (e) => {
         query.profile = e.target.value;
-        updateRoute();
+        map.getSource('path').setData(await getRoute());
     };
 
     window.selectDirection = async (e) => {
         query.direction = e.target.value;
-        updateRoute();
-    }
-
-    const pathToggle = document.getElementById("path-toggle");
-    let pathVisible = true;
-    pathToggle.classList.add('active');
-    window.togglePath = () => {
-        pathVisible = !pathVisible;
-
-        if (pathVisible) {
-            pathToggle.classList.add('active');
-            map.setLayoutProperty('path', 'visibility', 'visible');
-            map.setLayoutProperty('path-outline', 'visibility', 'visible');
-        } else {
-            pathToggle.classList.remove('active');
-            map.setLayoutProperty('path', 'visibility', 'none');
-            map.setLayoutProperty('path-outline', 'visibility', 'none');
-        }
+        map.getSource('path').setData(await getRoute());
     }
 
     map.on('moveend', async () => {
@@ -883,26 +472,15 @@
         updateLevels();
     });
 
-    map.on('click', (e) => {
-        
-        const features = map.queryRenderedFeatures(e.point, {
-            layers: ['graph-node', 'graph-edge', 'graph-geometry', 'path-outline']
+    ['graph-node', 'graph-edge', 'graph-geometry'].forEach((layer) => {
+        map.on('click', layer, (e) => {
+            new maplibregl.Popup()
+                .setLngLat(e.lngLat)
+                .setDOMContent(toTable(e.features[0].properties))
+                .addTo(map);
+            e.originalEvent.stopPropagation();
         });
 
-        if (features.length === 0) {
-            return;
-        }
-
-        new maplibregl.Popup()
-            .setLngLat(e.lngLat)
-            .setMaxWidth('30vw')
-            .setDOMContent(getInfoPopupContent(features))
-            .addTo(map);
-
-    });
-
-    
-    ['graph-node', 'graph-edge', 'graph-geometry', 'path-outline'].forEach(layer => {
         map.on('mouseenter', layer, () => {
             map.getCanvas().style.cursor = 'pointer';
         });
@@ -916,27 +494,27 @@
         draggable: true,
         color: 'green'
     })
-    .setLngLat(start)
-    .addTo(map)
-    .on('dragend', async () => {
-        const x = startMarker.getLngLat();
-        query.start = [x.lng, x.lat];
-        query.start_level = currentLevel;
-        updateRoute();
-    });
+        .setLngLat(start)
+        .addTo(map)
+        .on('dragend', async () => {
+            const x = startMarker.getLngLat();
+            query.start = [x.lng, x.lat];
+            query.start_level = currentLevel;
+            updateRoute();
+        });
 
     const destinationMarker = new maplibregl.Marker({
         draggable: true,
         color: 'red'
     })
-    .setLngLat(destination)
-    .addTo(map)
-    .on('dragend', async () => {
-        const x = destinationMarker.getLngLat();
-        query.destination = [x.lng, x.lat];
-        query.destination_level = currentLevel;
-        updateRoute();
-    });
+        .setLngLat(destination)
+        .addTo(map)
+        .on('dragend', async () => {
+            const x = destinationMarker.getLngLat();
+            query.destination = [x.lng, x.lat];
+            query.destination_level = currentLevel;
+            updateRoute();
+        });
 
     let popup = null;
     map.on('contextmenu', (e) => {