From: Tom Hughes <tom@compton.nu>
Date: Tue, 19 Dec 2023 18:59:03 +0000 (+0000)
Subject: Merge remote-tracking branch 'upstream/pull/4423'
X-Git-Tag: live~1663
X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/dcfccbc26068f2aa2fed7bf675d74e4e1cb61ec7?hp=3575ea5703b22bc26605f7556333a8bc2b279d65

Merge remote-tracking branch 'upstream/pull/4423'
---

diff --git a/app/assets/images/key/mapnik/runway.png b/app/assets/images/key/mapnik/runway.png
deleted file mode 100644
index c65672806..000000000
Binary files a/app/assets/images/key/mapnik/runway.png and /dev/null differ
diff --git a/app/assets/images/key/mapnik/runway11.svg b/app/assets/images/key/mapnik/runway11.svg
new file mode 100644
index 000000000..088893c51
--- /dev/null
+++ b/app/assets/images/key/mapnik/runway11.svg
@@ -0,0 +1,4 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='52' height='3'>
+<line x2='50%' y1='50%' y2='50%' stroke='#bbc' stroke-width='2' />
+<line x1='50%' x2='100%' y1='50%' y2='50%' stroke='#bbc' />
+</svg>
diff --git a/app/assets/images/key/mapnik/runway12.svg b/app/assets/images/key/mapnik/runway12.svg
new file mode 100644
index 000000000..205a18e4a
--- /dev/null
+++ b/app/assets/images/key/mapnik/runway12.svg
@@ -0,0 +1,4 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='52' height='5'>
+<line x2='50%' y1='50%' y2='50%' stroke='#bbc' stroke-width='4' />
+<line x1='50%' x2='100%' y1='50%' y2='50%' stroke='#bbc' />
+</svg>
diff --git a/app/assets/images/key/mapnik/runway13.svg b/app/assets/images/key/mapnik/runway13.svg
new file mode 100644
index 000000000..e4d712772
--- /dev/null
+++ b/app/assets/images/key/mapnik/runway13.svg
@@ -0,0 +1,4 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='52' height='6'>
+<line x2='50%' y1='50%' y2='50%' stroke='#bbc' stroke-width='6' />
+<line x1='50%' x2='100%' y1='50%' y2='50%' stroke='#bbc' stroke-width='2' />
+</svg>
diff --git a/app/assets/images/key/mapnik/runway14.svg b/app/assets/images/key/mapnik/runway14.svg
new file mode 100644
index 000000000..dc9958d76
--- /dev/null
+++ b/app/assets/images/key/mapnik/runway14.svg
@@ -0,0 +1,4 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='52' height='12'>
+<line x2='50%' y1='50%' y2='50%' stroke='#bbc' stroke-width='12' />
+<line x1='50%' x2='100%' y1='50%' y2='50%' stroke='#bbc' stroke-width='4' />
+</svg>
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 6a6e45186..d598d10e3 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -562,16 +562,6 @@ header .search_forms,
   display: none;
 }
 
-/* Rules for the map key which appears in the popout sidebar */
-
-#mapkey {
- .mapkey-table-key img {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
 /* Rules for search sidebar */
 
 #sidebar .search_results_entry {
diff --git a/app/helpers/svg_helper.rb b/app/helpers/svg_helper.rb
new file mode 100644
index 000000000..abb512f0d
--- /dev/null
+++ b/app/helpers/svg_helper.rb
@@ -0,0 +1,7 @@
+module SvgHelper
+  def solid_svg_tag(width, height, fill, **options)
+    tag.svg :width => width, :height => height, **options do
+      tag.rect :width => "100%", :height => "100%", :fill => fill
+    end
+  end
+end
diff --git a/app/views/site/key.html.erb b/app/views/site/key.html.erb
index 60eff9a44..8b61b92bf 100644
--- a/app/views/site/key.html.erb
+++ b/app/views/site/key.html.erb
@@ -1,16 +1,16 @@
 <div id="mapkey">
-  <table class="table table-sm table-borderless mapkey-table mb-0">
+  <table class="table table-sm table-borderless mb-0 align-middle">
     <% @key.each do |layer_name, layer_data| %>
       <% layer_data.each do |entry| %>
         <%= tag.tr :class => "mapkey-table-entry", :data => { :layer => layer_name, :zoom_min => entry["min_zoom"], :zoom_max => entry["max_zoom"] } do %>
-          <td class="mapkey-table-key align-middle">
+          <td>
             <% if entry["width"] && entry["height"] && entry["fill"] %>
-              <%= image_tag "data:image/svg+xml,#{u("<svg xmlns='http://www.w3.org/2000/svg' width='#{entry['width']}' height='#{entry['height']}'><rect width='100%' height='100%' fill='#{entry['fill']}' /></svg>")}" %>
+              <%= solid_svg_tag entry["width"], entry["height"], entry["fill"], :class => "d-block mx-auto" %>
             <% else %>
-              <%= image_tag "key/#{layer_name}/#{entry['image']}" %>
+              <%= image_tag "key/#{layer_name}/#{entry['image']}", :class => "d-block mx-auto" %>
             <% end %>
           </td>
-          <td class="mapkey-table-value">
+          <td>
             <%= Array(t(".table.entry.#{entry['name']}")).to_sentence %>
           </td>
         <% end %>
diff --git a/config/key.yml b/config/key.yml
index 877f853ef..058057079 100644
--- a/config/key.yml
+++ b/config/key.yml
@@ -20,7 +20,10 @@ mapnik:
   - { min_zoom: 15, name: tram_only, image: tram15.svg }
   - { min_zoom: 17, name: tram_only, width: 52, height: 2, fill: "#6e6e6e" }
   - { min_zoom: 12, name: cable, image: cable.png }
-  - { min_zoom: 11, name: runway, image: runway.png }
+  - { min_zoom: 11, name: runway, image: runway11.svg }
+  - { min_zoom: 12, name: runway, image: runway12.svg }
+  - { min_zoom: 13, name: runway, image: runway13.svg }
+  - { min_zoom: 14, name: runway, image: runway14.svg }
   - { min_zoom: 11, name: apron_only, width: 26, height: 10, fill: "#dadae0" } # landcover.mss
   # administrative boundaries: admin.mss
   - { name: admin, width: 52, height: 2, fill: "#8d618b88" }