From b13ac4ec21b83b51ebd5ccacc70f518bed03d9b2 Mon Sep 17 00:00:00 2001
From: Anton Khorev <tony29@yandex.ru>
Date: Sat, 23 Dec 2023 20:38:32 +0300
Subject: [PATCH 1/3] Add border/casing/line attribute support to svg map keys

---
 app/helpers/svg_helper.rb       | 34 ++++++++++-
 app/views/site/key.html.erb     |  6 +-
 test/helpers/svg_helper_test.rb | 99 +++++++++++++++++++++++++++++++++
 3 files changed, 133 insertions(+), 6 deletions(-)
 create mode 100644 test/helpers/svg_helper_test.rb

diff --git a/app/helpers/svg_helper.rb b/app/helpers/svg_helper.rb
index abb512f0d..21b7c91ad 100644
--- a/app/helpers/svg_helper.rb
+++ b/app/helpers/svg_helper.rb
@@ -1,7 +1,35 @@
 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
+  def key_svg_tag(**options)
+    border_width = options["border"] ? (options["border-width"] || 1) : 0
+    rect_attrs = {
+      :width => "100%",
+      :height => "100%",
+      :fill => options["fill"] || "none"
+    }
+    if border_width.positive?
+      rect_attrs[:x] = rect_attrs[:y] = format("%g", 0.5 * border_width)
+      rect_attrs[:width] = options["width"] - border_width
+      rect_attrs[:height] = options["height"] - border_width
+    end
+    svg_attrs = options.slice("width", "height", "opacity", :class)
+
+    tag.svg(**svg_attrs) do
+      concat tag.rect(**rect_attrs, **stroke_attrs(options, "border")) if options["fill"] || options["border"]
+      concat tag.line(:x2 => "100%", :y1 => "50%", :y2 => "50%", **stroke_attrs(options, "line")) if options["line"]
+      if options["casing"]
+        casing_width = options["casing-width"] || 1
+        y_top = 0.5 * casing_width
+        y_bottom = options["height"] - (0.5 * casing_width)
+        concat tag.g(tag.line(:x2 => "100%", :y1 => y_top, :y2 => y_top) +
+                     tag.line(:x2 => "100%", :y1 => y_bottom, :y2 => y_bottom),
+                     **stroke_attrs(options, "casing"))
+      end
     end
   end
+
+  private
+
+  def stroke_attrs(attrs, prefix)
+    attrs.select { |key| key.start_with?(prefix) }.transform_keys { |key| key.delete_prefix(prefix).prepend("stroke") }
+  end
 end
diff --git a/app/views/site/key.html.erb b/app/views/site/key.html.erb
index 28e364685..82105097e 100644
--- a/app/views/site/key.html.erb
+++ b/app/views/site/key.html.erb
@@ -4,10 +4,10 @@
       <% 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>
-            <% if entry["width"] && entry["height"] && entry["fill"] %>
-              <%= solid_svg_tag entry["width"], entry["height"], entry["fill"], :class => "d-block mx-auto" %>
-            <% else %>
+            <% if entry["image"] %>
               <%= image_tag "key/#{layer_name}/#{entry['image']}", :class => "d-block mx-auto" %>
+            <% else %>
+              <%= key_svg_tag :class => "d-block mx-auto", **entry %>
             <% end %>
           </td>
           <td>
diff --git a/test/helpers/svg_helper_test.rb b/test/helpers/svg_helper_test.rb
new file mode 100644
index 000000000..14c08539c
--- /dev/null
+++ b/test/helpers/svg_helper_test.rb
@@ -0,0 +1,99 @@
+require "test_helper"
+
+class SvgHelperTest < ActionView::TestCase
+  def test_key_fill
+    svg = key_svg_tag("width" => 60, "height" => 40, "fill" => "green")
+    expected = <<~HTML.gsub(/\n\s*/, "")
+      <svg width="60" height="40">
+        <rect width="100%" height="100%" fill="green" />
+      </svg>
+    HTML
+    assert_dom_equal expected, svg
+  end
+
+  def test_key_border
+    svg = key_svg_tag("width" => 60, "height" => 40, "border" => "red")
+    expected = <<~HTML.gsub(/\n\s*/, "")
+      <svg width="60" height="40">
+        <rect x="0.5" y="0.5" width="59" height="39" fill="none" stroke="red" />
+      </svg>
+    HTML
+    assert_dom_equal expected, svg
+  end
+
+  def test_key_border_width
+    svg = key_svg_tag("width" => 60, "height" => 40, "border" => "red", "border-width" => 3)
+    expected = <<~HTML.gsub(/\n\s*/, "")
+      <svg width="60" height="40">
+        <rect x="1.5" y="1.5" width="57" height="37" fill="none" stroke="red" stroke-width="3" />
+      </svg>
+    HTML
+    assert_dom_equal expected, svg
+  end
+
+  def test_key_border_with_integer_coords
+    svg = key_svg_tag("width" => 60, "height" => 40, "border" => "red", "border-width" => 2)
+    expected = <<~HTML.gsub(/\n\s*/, "")
+      <svg width="60" height="40">
+        <rect x="1" y="1" width="58" height="38" fill="none" stroke="red" stroke-width="2" />
+      </svg>
+    HTML
+    assert_dom_equal expected, svg
+  end
+
+  def test_key_border_fractional_width
+    svg = key_svg_tag("width" => 60, "height" => 40, "border" => "red", "border-width" => 1.5)
+    expected = <<~HTML.gsub(/\n\s*/, "")
+      <svg width="60" height="40">
+        <rect x="0.75" y="0.75" width="58.5" height="38.5" fill="none" stroke="red" stroke-width="1.5" />
+      </svg>
+    HTML
+    assert_dom_equal expected, svg
+  end
+
+  def test_key_line
+    svg = key_svg_tag("width" => 80, "height" => 20, "line" => "blue")
+    expected = <<~HTML.gsub(/\n\s*/, "")
+      <svg width="80" height="20">
+        <line x2="100%" y1="50%" y2="50%" stroke="blue" />
+      </svg>
+    HTML
+    assert_dom_equal expected, svg
+  end
+
+  def test_key_line_width
+    svg = key_svg_tag("width" => 80, "height" => 20, "line" => "blue", "line-width" => 3)
+    expected = <<~HTML.gsub(/\n\s*/, "")
+      <svg width="80" height="20">
+        <line x2="100%" y1="50%" y2="50%" stroke="blue" stroke-width="3" />
+      </svg>
+    HTML
+    assert_dom_equal expected, svg
+  end
+
+  def test_key_casing
+    svg = key_svg_tag("width" => 80, "height" => 20, "casing" => "yellow")
+    expected = <<~HTML.gsub(/\n\s*/, "")
+      <svg width="80" height="20">
+        <g stroke="yellow">
+          <line x2="100%" y1="0.5" y2="0.5" />
+          <line x2="100%" y1="19.5" y2="19.5" />
+        </g>
+      </svg>
+    HTML
+    assert_dom_equal expected, svg
+  end
+
+  def test_key_casing_width
+    svg = key_svg_tag("width" => 80, "height" => 20, "casing" => "yellow", "casing-width" => 5)
+    expected = <<~HTML.gsub(/\n\s*/, "")
+      <svg width="80" height="20">
+        <g stroke="yellow" stroke-width="5">
+          <line x2="100%" y1="2.5" y2="2.5" />
+          <line x2="100%" y1="17.5" y2="17.5" />
+        </g>
+      </svg>
+    HTML
+    assert_dom_equal expected, svg
+  end
+end

From cda8ca0607c66db191c0dfa07c275161fb29d74e Mon Sep 17 00:00:00 2001
From: Anton Khorev <tony29@yandex.ru>
Date: Sun, 24 Dec 2023 19:46:43 +0300
Subject: [PATCH 2/3] Use <path> instead of <line>

---
 app/helpers/svg_helper.rb       | 14 +++++++-----
 test/helpers/svg_helper_test.rb | 40 ++++++++++++++++++++++-----------
 2 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/app/helpers/svg_helper.rb b/app/helpers/svg_helper.rb
index 21b7c91ad..a40fa7086 100644
--- a/app/helpers/svg_helper.rb
+++ b/app/helpers/svg_helper.rb
@@ -14,15 +14,17 @@ module SvgHelper
     svg_attrs = options.slice("width", "height", "opacity", :class)
 
     tag.svg(**svg_attrs) do
+      horizontal = "H#{options['width']}"
       concat tag.rect(**rect_attrs, **stroke_attrs(options, "border")) if options["fill"] || options["border"]
-      concat tag.line(:x2 => "100%", :y1 => "50%", :y2 => "50%", **stroke_attrs(options, "line")) if options["line"]
+      if options["line"]
+        y_middle = format("%g", 0.5 * options["height"])
+        concat tag.path(:d => "M0,#{y_middle} #{horizontal}", **stroke_attrs(options, "line"))
+      end
       if options["casing"]
         casing_width = options["casing-width"] || 1
-        y_top = 0.5 * casing_width
-        y_bottom = options["height"] - (0.5 * casing_width)
-        concat tag.g(tag.line(:x2 => "100%", :y1 => y_top, :y2 => y_top) +
-                     tag.line(:x2 => "100%", :y1 => y_bottom, :y2 => y_bottom),
-                     **stroke_attrs(options, "casing"))
+        y_top = format("%g", 0.5 * casing_width)
+        y_bottom = format("%g", options["height"] - (0.5 * casing_width))
+        concat tag.path(:d => "M0,#{y_top} #{horizontal} M0,#{y_bottom} #{horizontal}", **stroke_attrs(options, "casing"))
       end
     end
   end
diff --git a/test/helpers/svg_helper_test.rb b/test/helpers/svg_helper_test.rb
index 14c08539c..25a9e4568 100644
--- a/test/helpers/svg_helper_test.rb
+++ b/test/helpers/svg_helper_test.rb
@@ -52,20 +52,30 @@ class SvgHelperTest < ActionView::TestCase
   end
 
   def test_key_line
-    svg = key_svg_tag("width" => 80, "height" => 20, "line" => "blue")
+    svg = key_svg_tag("width" => 80, "height" => 15, "line" => "blue")
     expected = <<~HTML.gsub(/\n\s*/, "")
-      <svg width="80" height="20">
-        <line x2="100%" y1="50%" y2="50%" stroke="blue" />
+      <svg width="80" height="15">
+        <path d="M0,7.5 H80" stroke="blue" />
       </svg>
     HTML
     assert_dom_equal expected, svg
   end
 
   def test_key_line_width
-    svg = key_svg_tag("width" => 80, "height" => 20, "line" => "blue", "line-width" => 3)
+    svg = key_svg_tag("width" => 80, "height" => 15, "line" => "blue", "line-width" => 3)
+    expected = <<~HTML.gsub(/\n\s*/, "")
+      <svg width="80" height="15">
+        <path d="M0,7.5 H80" stroke="blue" stroke-width="3" />
+      </svg>
+    HTML
+    assert_dom_equal expected, svg
+  end
+
+  def test_key_line_with_integer_coords
+    svg = key_svg_tag("width" => 80, "height" => 20, "line" => "blue")
     expected = <<~HTML.gsub(/\n\s*/, "")
       <svg width="80" height="20">
-        <line x2="100%" y1="50%" y2="50%" stroke="blue" stroke-width="3" />
+        <path d="M0,10 H80" stroke="blue" />
       </svg>
     HTML
     assert_dom_equal expected, svg
@@ -75,10 +85,7 @@ class SvgHelperTest < ActionView::TestCase
     svg = key_svg_tag("width" => 80, "height" => 20, "casing" => "yellow")
     expected = <<~HTML.gsub(/\n\s*/, "")
       <svg width="80" height="20">
-        <g stroke="yellow">
-          <line x2="100%" y1="0.5" y2="0.5" />
-          <line x2="100%" y1="19.5" y2="19.5" />
-        </g>
+        <path d="M0,0.5 H80 M0,19.5 H80" stroke="yellow" />
       </svg>
     HTML
     assert_dom_equal expected, svg
@@ -88,10 +95,17 @@ class SvgHelperTest < ActionView::TestCase
     svg = key_svg_tag("width" => 80, "height" => 20, "casing" => "yellow", "casing-width" => 5)
     expected = <<~HTML.gsub(/\n\s*/, "")
       <svg width="80" height="20">
-        <g stroke="yellow" stroke-width="5">
-          <line x2="100%" y1="2.5" y2="2.5" />
-          <line x2="100%" y1="17.5" y2="17.5" />
-        </g>
+        <path d="M0,2.5 H80 M0,17.5 H80" stroke="yellow" stroke-width="5" />
+      </svg>
+    HTML
+    assert_dom_equal expected, svg
+  end
+
+  def test_key_casing_with_integer_coords
+    svg = key_svg_tag("width" => 80, "height" => 20, "casing" => "yellow", "casing-width" => 2)
+    expected = <<~HTML.gsub(/\n\s*/, "")
+      <svg width="80" height="20">
+        <path d="M0,1 H80 M0,19 H80" stroke="yellow" stroke-width="2" />
       </svg>
     HTML
     assert_dom_equal expected, svg

From 6ba06b0aa247fb168a5ae3b64f6d8058555622b4 Mon Sep 17 00:00:00 2001
From: Anton Khorev <tony29@yandex.ru>
Date: Sat, 23 Dec 2023 20:44:50 +0300
Subject: [PATCH 3/3] Use border/casing/line in map keys

---
 app/assets/images/key/cyclemap/cycleway.png   | Bin 155 -> 0 bytes
 app/assets/images/key/cyclemap/footway.svg    |   3 -
 app/assets/images/key/cyclemap/motorway12.png | Bin 232 -> 0 bytes
 app/assets/images/key/cyclemap/pedestrian.svg |   3 -
 app/assets/images/key/cyclemap/primary12.png  | Bin 205 -> 0 bytes
 app/assets/images/key/cyclemap/rail.png       | Bin 96 -> 0 bytes
 app/assets/images/key/cyclemap/rail14.png     | Bin 103 -> 0 bytes
 .../images/key/cyclemap/secondary12.png       | Bin 203 -> 0 bytes
 app/assets/images/key/cyclemap/track.png      | Bin 147 -> 0 bytes
 app/assets/images/key/cyclemap/trunk12.png    | Bin 211 -> 0 bytes
 app/assets/images/key/mapnik/bridge.svg       |   4 -
 app/assets/images/key/mapnik/bridleway.png    | Bin 162 -> 0 bytes
 app/assets/images/key/mapnik/building15.svg   |   3 -
 app/assets/images/key/mapnik/building16.svg   |   3 -
 app/assets/images/key/mapnik/cycleway.png     | Bin 203 -> 0 bytes
 app/assets/images/key/mapnik/footway.png      | Bin 92 -> 0 bytes
 app/assets/images/key/mapnik/glacier10.svg    |   3 -
 app/assets/images/key/mapnik/glacier5.svg     |   3 -
 app/assets/images/key/mapnik/motorway.png     | Bin 150 -> 0 bytes
 app/assets/images/key/mapnik/rail12.svg       |   4 -
 app/assets/images/key/mapnik/rail18.svg       |   4 -
 app/assets/images/key/mapnik/track.png        | Bin 147 -> 0 bytes
 app/assets/images/key/mapnik/tram15.svg       |   3 -
 app/assets/images/key/mapnik/tunnel.svg       |   4 -
 .../images/key/opnvkarte/main_road11.svg      |   3 -
 .../images/key/opnvkarte/main_road13.svg      |   3 -
 .../images/key/opnvkarte/main_road15.svg      |   3 -
 .../images/key/opnvkarte/main_road17.svg      |   3 -
 .../images/key/opnvkarte/motorway13.svg       |   3 -
 .../images/key/opnvkarte/motorway15.svg       |   4 -
 .../images/key/opnvkarte/motorway17.svg       |   4 -
 app/assets/images/key/opnvkarte/motorway8.svg |   3 -
 app/assets/images/key/opnvkarte/rail11.svg    |   4 -
 app/assets/images/key/opnvkarte/rail15.svg    |   4 -
 config/key.yml                                |  78 +++++++++---------
 35 files changed, 40 insertions(+), 109 deletions(-)
 delete mode 100644 app/assets/images/key/cyclemap/cycleway.png
 delete mode 100644 app/assets/images/key/cyclemap/footway.svg
 delete mode 100644 app/assets/images/key/cyclemap/motorway12.png
 delete mode 100644 app/assets/images/key/cyclemap/pedestrian.svg
 delete mode 100644 app/assets/images/key/cyclemap/primary12.png
 delete mode 100644 app/assets/images/key/cyclemap/rail.png
 delete mode 100644 app/assets/images/key/cyclemap/rail14.png
 delete mode 100644 app/assets/images/key/cyclemap/secondary12.png
 delete mode 100644 app/assets/images/key/cyclemap/track.png
 delete mode 100644 app/assets/images/key/cyclemap/trunk12.png
 delete mode 100644 app/assets/images/key/mapnik/bridge.svg
 delete mode 100644 app/assets/images/key/mapnik/bridleway.png
 delete mode 100644 app/assets/images/key/mapnik/building15.svg
 delete mode 100644 app/assets/images/key/mapnik/building16.svg
 delete mode 100644 app/assets/images/key/mapnik/cycleway.png
 delete mode 100644 app/assets/images/key/mapnik/footway.png
 delete mode 100644 app/assets/images/key/mapnik/glacier10.svg
 delete mode 100644 app/assets/images/key/mapnik/glacier5.svg
 delete mode 100644 app/assets/images/key/mapnik/motorway.png
 delete mode 100644 app/assets/images/key/mapnik/rail12.svg
 delete mode 100644 app/assets/images/key/mapnik/rail18.svg
 delete mode 100644 app/assets/images/key/mapnik/track.png
 delete mode 100644 app/assets/images/key/mapnik/tram15.svg
 delete mode 100644 app/assets/images/key/mapnik/tunnel.svg
 delete mode 100644 app/assets/images/key/opnvkarte/main_road11.svg
 delete mode 100644 app/assets/images/key/opnvkarte/main_road13.svg
 delete mode 100644 app/assets/images/key/opnvkarte/main_road15.svg
 delete mode 100644 app/assets/images/key/opnvkarte/main_road17.svg
 delete mode 100644 app/assets/images/key/opnvkarte/motorway13.svg
 delete mode 100644 app/assets/images/key/opnvkarte/motorway15.svg
 delete mode 100644 app/assets/images/key/opnvkarte/motorway17.svg
 delete mode 100644 app/assets/images/key/opnvkarte/motorway8.svg
 delete mode 100644 app/assets/images/key/opnvkarte/rail11.svg
 delete mode 100644 app/assets/images/key/opnvkarte/rail15.svg

diff --git a/app/assets/images/key/cyclemap/cycleway.png b/app/assets/images/key/cyclemap/cycleway.png
deleted file mode 100644
index 13bed4a7d997cbd365b6ba2d805d338dfdda5ad4..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 155
zcmeAS@N?(olHy`uVBq!ia0vp^#z4%(!3HG1wm(q<Qfx`y?k)`fL2$v|<&%LToCO|{
z#S9GG!XV7ZFl&wkP>{XE)7O>#K07xLkDl?9CvSj48lEnWArhC9Z@ez)ZJhW}-soRH
uJAardPxYMj1_p*k|I;M+8ajW<Gcyz@M@CAvoN)o_VeoYIb6Mw<&;$T^>MH&K

diff --git a/app/assets/images/key/cyclemap/footway.svg b/app/assets/images/key/cyclemap/footway.svg
deleted file mode 100644
index ecad17425..000000000
--- a/app/assets/images/key/cyclemap/footway.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns='http://www.w3.org/2000/svg' width='50' height='3'>
-<line x1='-2' x2='52' y1='1.5' y2='1.5' stroke='#bd6d6e' stroke-width='1.5' stroke-dasharray='6 2' />
-</svg>
diff --git a/app/assets/images/key/cyclemap/motorway12.png b/app/assets/images/key/cyclemap/motorway12.png
deleted file mode 100644
index 749493ad6b1a56474fb298701eaf04046d9e8936..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 232
zcmeAS@N?(olHy`uVBq!ia0vp^CP2)_!3HFIPVMytagw~<T^Rm@;DWu&Cj&(|3p^r=
z85p>QL70(Y)*K0-AbW|YuPgg~c5W_pm4#<|G=W00nIRD+&iT2ysd*(pE(3#eQEFmI
zYKlU6W=V#EyQgnJie4%^P~6AU#WBR<baGC{jq?Yze?784Y{1|eDcGaKW7NaL=Jo3E
zL3^HFZaxD8Lmp#;H#SEO9XN2H;Nh>c4<AbFak7cAvAMCaX&7EP_&vT}g2CH@S3LS%
Qb}Yz3Pgg&ebxsLQ03l~X+5i9m

diff --git a/app/assets/images/key/cyclemap/pedestrian.svg b/app/assets/images/key/cyclemap/pedestrian.svg
deleted file mode 100644
index af8fce170..000000000
--- a/app/assets/images/key/cyclemap/pedestrian.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns='http://www.w3.org/2000/svg' width='50' height='4'>
-<rect x='-.5' y='.5' width='51' height='3' fill='#e2e3e2' stroke='#9a9a9a' />
-</svg>
diff --git a/app/assets/images/key/cyclemap/primary12.png b/app/assets/images/key/cyclemap/primary12.png
deleted file mode 100644
index fed37d05477c760a62773edcc309a0b1669fafe2..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 205
zcmeAS@N?(olHy`uVBq!ia0vp^CP2)_!3HFIPVMytagw~<T^Rm@;DWu&Cj&(|3p^r=
z85p>QL70(Y)*K0-AbW|YuPgg~c5W_RqxIh}egX<bdAc};Se#Ct^XS#l58waSw>@OA
zxVJwkp)g=VdIHB6X)(K`Tf15(x;8Y=ZFCP$k2rGScdWJK42d?$gvxI}wVAI!)joX4
u_<np{YQme64=D-Be~oo)RCE;%Ffa&miK&YpGx`p+g~8L+&t;ucLK6VMct(i;

diff --git a/app/assets/images/key/cyclemap/rail.png b/app/assets/images/key/cyclemap/rail.png
deleted file mode 100644
index 0abf0c1df09c9440b3ce9cf62e0b6fec05b5b914..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 96
zcmeAS@N?(olHy`uVBq!ia0vp^CP2*0!3HGnu<QH-QtF;Ajv*C{$umr|r=34D(^$HV
ud7gc}9Xs;`L*|bE{OmkmCLGw%t;it2P%F1N*LOWo3xlVtpUXO@geCwS2^p9G

diff --git a/app/assets/images/key/cyclemap/rail14.png b/app/assets/images/key/cyclemap/rail14.png
deleted file mode 100644
index 957f17c850486bf62e97a2c82465ba2b9f34857f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 103
zcmeAS@N?(olHy`uVBq!ia0vp^#z4%>!3HGlZkx9QDLqdY$B+uf<QbO5Y0Luumn+#B
z1UwUbJM-q{<^S!=UtOuMd2nW?al&c#Q+pCcjTwA)?0Wh5kZ3tjCxfS}pUXO@geCx*
CXd+1f

diff --git a/app/assets/images/key/cyclemap/secondary12.png b/app/assets/images/key/cyclemap/secondary12.png
deleted file mode 100644
index cde00852323a35f2cffbfb0fe485d4303c11497c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 203
zcmeAS@N?(olHy`uVBq!ia0vp^CP2)_!3HFIPVMytagw~<T^Rm@;DWu&Cj&(|3p^r=
z85p>QL70(Y)*K0-AbW|YuPgg~c5W^Ml_mZh`+-6co-U3d7N?VA0^c7sh&k}y{=Y;-
zjPDbPJY%iD@_ceZ$vcjpP&#n<+=5l<<~m6o|1SlzskJ4tMa<j#_t1wgKNcoFlzgc#
sFA>2PS9$EfkJpxu3qD*}eESX$Lr$sqbCq?jAV)HIy85}Sb4q9e01hxlK>z>%

diff --git a/app/assets/images/key/cyclemap/track.png b/app/assets/images/key/cyclemap/track.png
deleted file mode 100644
index f294edca0960d86ec1ebce40e1b3a78d3302b212..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 147
zcmeAS@N?(olHy`uVBq!ia0vp^hCs~3!3HEh7MaKcsVGku$B+uf<QX%MU0^>Vf8oQ!
z|Ns9RFGybSBTpx5`NM$UjI!rF(mjqW@)K{564uFDykRA)rwPMHUXwj??T5n>0&n*@
wzvV6ADT%NUE0wai@@nzwxl>OGbolBr<g?w(`km#L3$%s7)78&qol`;+0NBno7ytkO

diff --git a/app/assets/images/key/cyclemap/trunk12.png b/app/assets/images/key/cyclemap/trunk12.png
deleted file mode 100644
index 51230a0214a4ac3277c35b295cdb0fde1e0bc066..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 211
zcmeAS@N?(olHy`uVBq!ia0vp^CP2*2!3HGVr{%o>Qfx`y?k)`fL2$v|<&%LToCO|{
z#S9GG!XV7ZFl&wkNKc8UuPgg~c5W_hsWTGy`hY?So-U3d7N?WHtp1Sv<NJI0!vzfS
zJN6lDSaEBWQG|iSKY2bmtAmyECbovROn00XpBi!G!qxZX5;G*)Bqhq^k}CiIu|53Q
zyu7V7ecr#?QwNH&-|MzzpSdp4-rUYIkIR68LCsZ4vr|+d9B3DVr>mdKI;Vst0L+a?
A=>Px#

diff --git a/app/assets/images/key/mapnik/bridge.svg b/app/assets/images/key/mapnik/bridge.svg
deleted file mode 100644
index 4096e8166..000000000
--- a/app/assets/images/key/mapnik/bridge.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns='http://www.w3.org/2000/svg' width='30' height='5' stroke='black'>
-<line y1='0.5' y2='0.5' x2='30' />
-<line y1='4.5' y2='4.5' x2='30' />
-</svg>
diff --git a/app/assets/images/key/mapnik/bridleway.png b/app/assets/images/key/mapnik/bridleway.png
deleted file mode 100644
index 9aec1ad3338d7946a52ed75be51a6a00e08de637..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 162
zcmeAS@N?(olHy`uVBq!ia0vp^hCs~3!3HEh7MaKcsZ387$B+uf<b)R~9&C?9HFnH(
zeER?Ye;%G#o^KLGcX{*@cFM6;^6cbm^O+#S(flK02eTS`$n_pQ{;A5RZ528L7AzE=
zV0fZ2fcdOLjY$scwAaZKjwy+=7W1^ls5@&;a^}A9bYW4-PId+#$<ER_5lr`hmNIy{
L`njxgN@xNAAM!M;

diff --git a/app/assets/images/key/mapnik/building15.svg b/app/assets/images/key/mapnik/building15.svg
deleted file mode 100644
index cc0507340..000000000
--- a/app/assets/images/key/mapnik/building15.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'>
-<rect x='.5' y='.5' width='9' height='9' fill='#b9a99c' stroke='#a99a8d' />
-</svg>
diff --git a/app/assets/images/key/mapnik/building16.svg b/app/assets/images/key/mapnik/building16.svg
deleted file mode 100644
index 6ff2210a5..000000000
--- a/app/assets/images/key/mapnik/building16.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'>
-<rect x='.5' y='.5' width='9' height='9' fill='#c4b6ab' stroke='#a99a8d' />
-</svg>
diff --git a/app/assets/images/key/mapnik/cycleway.png b/app/assets/images/key/mapnik/cycleway.png
deleted file mode 100644
index a1a16f1edc26b0db39ee436da2e63caf04e7872e..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 203
zcmeAS@N?(olHy`uVBq!ia0vp^MnKHO!3-pIXV>ciDYF2d5ZC|z|2sImwX^$R<NV3q
z9)#?iKG-^bv;!iCPqq#pY#cw@I)1Wo_+V@Q!PeoU4M^~#!N2vBfF=l)1o;Is$SA5=
z+B&&M#b@M|Rd@E!*zm~jkttBt$kW9!q=K>Zq&wq*0G^`;=68S3w7=P}u&c{E@$$?|
tvR~TH&#&uanYLucB+*I2^Y&~pW>_u6?4De<p#!L!!PC{xWt~$(699z|OF#es

diff --git a/app/assets/images/key/mapnik/footway.png b/app/assets/images/key/mapnik/footway.png
deleted file mode 100644
index 4486119baafec27a9cb8fca9ef8327b8b1cc2e09..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 92
zcmeAS@N?(olHy`uVBq!ia0vp^MnKHO!3HFyT>E8!l(MIbV@L&K@{e~(;k-wx|NZ}O
qzvL#5eT=NpKI_}(*}3>K%@{($Ua8A3xsU`@&fw|l=d#Wzp$P!u@)_p<

diff --git a/app/assets/images/key/mapnik/glacier10.svg b/app/assets/images/key/mapnik/glacier10.svg
deleted file mode 100644
index be79f238a..000000000
--- a/app/assets/images/key/mapnik/glacier10.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns='http://www.w3.org/2000/svg' width='26' height='10'>
-<rect x='.5' y='.5' width='25' height='9' fill='#ddecec' stroke='#9cf' stroke-dasharray='4 2' />
-</svg>
diff --git a/app/assets/images/key/mapnik/glacier5.svg b/app/assets/images/key/mapnik/glacier5.svg
deleted file mode 100644
index 8e6d368eb..000000000
--- a/app/assets/images/key/mapnik/glacier5.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns='http://www.w3.org/2000/svg' width='26' height='10'>
-<rect x='.5' y='.5' width='25' height='9' fill='#ddecec' stroke='#9cf' />
-</svg>
diff --git a/app/assets/images/key/mapnik/motorway.png b/app/assets/images/key/mapnik/motorway.png
deleted file mode 100644
index 484fc9daa3bbae3d126a4810ac83de738a462ac9..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 150
zcmeAS@N?(olHy`uVBq!ia0vp^CP2)_!3HFIPVMytQjEnx?oJHr&dIz4a#+$GeH|GX
zHuiJ>Nn{1`ISV`@iy0V%N<f(LUYdLbP*B^`#WBRfKY7pMssH9DN-!Q1pDf0!&2Q-V
rGLgA$ZhKq2+%JBXfNus2JUk5h9Jqh@CBO9tYGd$p^>bP0l+XkK9r-7y

diff --git a/app/assets/images/key/mapnik/rail12.svg b/app/assets/images/key/mapnik/rail12.svg
deleted file mode 100644
index 45c76a41e..000000000
--- a/app/assets/images/key/mapnik/rail12.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns='http://www.w3.org/2000/svg' width='52' height='3'>
-<rect width='100%' height='100%' fill='#707070' />
-<line x2='100%' y1='50%' y2='50%' stroke='white' stroke-dasharray='8' stroke-dashoffset='2' />
-</svg>
diff --git a/app/assets/images/key/mapnik/rail18.svg b/app/assets/images/key/mapnik/rail18.svg
deleted file mode 100644
index 5094bafde..000000000
--- a/app/assets/images/key/mapnik/rail18.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns='http://www.w3.org/2000/svg' width='52' height='4'>
-<rect width='100%' height='100%' fill='#707070' />
-<line x2='100%' y1='50%' y2='50%' stroke='white' stroke-dasharray='8' stroke-dashoffset='2' stroke-width='2' />
-</svg>
diff --git a/app/assets/images/key/mapnik/track.png b/app/assets/images/key/mapnik/track.png
deleted file mode 100644
index f294edca0960d86ec1ebce40e1b3a78d3302b212..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 147
zcmeAS@N?(olHy`uVBq!ia0vp^hCs~3!3HEh7MaKcsVGku$B+uf<QX%MU0^>Vf8oQ!
z|Ns9RFGybSBTpx5`NM$UjI!rF(mjqW@)K{564uFDykRA)rwPMHUXwj??T5n>0&n*@
wzvV6ADT%NUE0wai@@nzwxl>OGbolBr<g?w(`km#L3$%s7)78&qol`;+0NBno7ytkO

diff --git a/app/assets/images/key/mapnik/tram15.svg b/app/assets/images/key/mapnik/tram15.svg
deleted file mode 100644
index 8f873f7ee..000000000
--- a/app/assets/images/key/mapnik/tram15.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns='http://www.w3.org/2000/svg' width='52' height='3'>
-<line x2='100%' y1='50%' y2='50%' stroke='#6e6e6e' stroke-width='1.5' />
-</svg>
diff --git a/app/assets/images/key/mapnik/tunnel.svg b/app/assets/images/key/mapnik/tunnel.svg
deleted file mode 100644
index 05cd7e713..000000000
--- a/app/assets/images/key/mapnik/tunnel.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns='http://www.w3.org/2000/svg' width='30' height='5' stroke='grey' stroke-dasharray='4 2' stroke-dashoffset='-1'>
-<line y1='0.5' y2='0.5' x2='30' />
-<line y1='4.5' y2='4.5' x2='30' />
-</svg>
diff --git a/app/assets/images/key/opnvkarte/main_road11.svg b/app/assets/images/key/opnvkarte/main_road11.svg
deleted file mode 100644
index b03c74414..000000000
--- a/app/assets/images/key/opnvkarte/main_road11.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns='http://www.w3.org/2000/svg' width='52' height='4'>
-<rect x='-.5' y='.5' width='53' height='3' fill='#dddddd' stroke='#a1968b' />
-</svg>
diff --git a/app/assets/images/key/opnvkarte/main_road13.svg b/app/assets/images/key/opnvkarte/main_road13.svg
deleted file mode 100644
index 2d5902236..000000000
--- a/app/assets/images/key/opnvkarte/main_road13.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns='http://www.w3.org/2000/svg' width='52' height='8'>
-<rect x='-.5' y='.5' width='53' height='7' fill='#dddddd' stroke='#a1968b' />
-</svg>
diff --git a/app/assets/images/key/opnvkarte/main_road15.svg b/app/assets/images/key/opnvkarte/main_road15.svg
deleted file mode 100644
index cb5391648..000000000
--- a/app/assets/images/key/opnvkarte/main_road15.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns='http://www.w3.org/2000/svg' width='52' height='13'>
-<rect x='-.5' y='.5' width='53' height='12' fill='#dddddd' stroke='#a1968b' />
-</svg>
diff --git a/app/assets/images/key/opnvkarte/main_road17.svg b/app/assets/images/key/opnvkarte/main_road17.svg
deleted file mode 100644
index de7db0f17..000000000
--- a/app/assets/images/key/opnvkarte/main_road17.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns='http://www.w3.org/2000/svg' width='52' height='17'>
-<rect x='-.5' y='.5' width='53' height='16' fill='#dddddd' stroke='#a1968b' />
-</svg>
diff --git a/app/assets/images/key/opnvkarte/motorway13.svg b/app/assets/images/key/opnvkarte/motorway13.svg
deleted file mode 100644
index c44e777a2..000000000
--- a/app/assets/images/key/opnvkarte/motorway13.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns='http://www.w3.org/2000/svg' width='52' height='8'>
-<rect x='-.5' y='.5' width='53' height='7' fill='#dddddd' stroke='#6d6d6d' />
-</svg>
diff --git a/app/assets/images/key/opnvkarte/motorway15.svg b/app/assets/images/key/opnvkarte/motorway15.svg
deleted file mode 100644
index c217bb2a7..000000000
--- a/app/assets/images/key/opnvkarte/motorway15.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns='http://www.w3.org/2000/svg' width='52' height='13'>
-<rect x='-.5' y='.5' width='53' height='12' fill='#dddddd' stroke='#6d6d6d' />
-<line x1='-4' x2='60' y1='6.5' y2='6.5' stroke='#ffffff' stroke-dasharray='12' />
-</svg>
diff --git a/app/assets/images/key/opnvkarte/motorway17.svg b/app/assets/images/key/opnvkarte/motorway17.svg
deleted file mode 100644
index 36b37db59..000000000
--- a/app/assets/images/key/opnvkarte/motorway17.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns='http://www.w3.org/2000/svg' width='52' height='17'>
-<rect x='-1' y='1' width='54' height='15' fill='#dddddd' stroke='#6d6d6d' stroke-width='2' />
-<line x1='-4' x2='60' y1='8.5' y2='8.5' stroke='#ffffff' stroke-dasharray='12' />
-</svg>
diff --git a/app/assets/images/key/opnvkarte/motorway8.svg b/app/assets/images/key/opnvkarte/motorway8.svg
deleted file mode 100644
index 21f006cef..000000000
--- a/app/assets/images/key/opnvkarte/motorway8.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns='http://www.w3.org/2000/svg' width='52' height='4'>
-<rect x='-.5' y='.5' width='53' height='3' fill='#dddddd' stroke='#6d6d6d' />
-</svg>
diff --git a/app/assets/images/key/opnvkarte/rail11.svg b/app/assets/images/key/opnvkarte/rail11.svg
deleted file mode 100644
index 849f5cf94..000000000
--- a/app/assets/images/key/opnvkarte/rail11.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns='http://www.w3.org/2000/svg' width='52' height='3'>
-<rect width='100%' height='100%' fill='#868686' />
-<line x2='100%' y1='50%' y2='50%' stroke='#eeeeee' stroke-dasharray='10 10' stroke-dashoffset='9' />
-</svg>
diff --git a/app/assets/images/key/opnvkarte/rail15.svg b/app/assets/images/key/opnvkarte/rail15.svg
deleted file mode 100644
index efe7792b9..000000000
--- a/app/assets/images/key/opnvkarte/rail15.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns='http://www.w3.org/2000/svg' width='52' height='4'>
-<rect width='100%' height='100%' fill='#868686' />
-<line x2='100%' y1='50%' y2='50%' stroke='#eeeeee' stroke-dasharray='10 10' stroke-dashoffset='9' stroke-width='2' />
-</svg>
diff --git a/config/key.yml b/config/key.yml
index d7d4017b1..5341245e5 100644
--- a/config/key.yml
+++ b/config/key.yml
@@ -1,24 +1,24 @@
 mapnik:
   # transportation: roads.mss
-  - { min_zoom:  6, name: motorway, image: motorway.png }
+  - { min_zoom:  6, name: motorway, width: 52, height: 5, fill: "#e892a2", casing: "#dc2a67" }
   - { min_zoom:  6, name: main_road, image: mainroad.png }
   - { min_zoom:  8, name: main_road, image: mainroad8.png }
   - { min_zoom: 12, name: main_road, image: mainroad12.png }
-  - { min_zoom: 13, name: track, image: track.png }
-  - { min_zoom: 13, name: bridleway, image: bridleway.png }
-  - { min_zoom: 13, name: cycleway, image: cycleway.png }
-  - { min_zoom: 13, name: footway, image: footway.png }
+  - { min_zoom: 13, name: track, width: 52, height: 3, opacity: .8, line: "#996600", line-width: 1.5, line-dasharray: "6 5" }
+  - { min_zoom: 13, name: bridleway, width: 52, height: 3, line: green, line-width: 1.25, line-dasharray: "4 2" }
+  - { min_zoom: 13, name: cycleway, width: 52, height: 1, line: blue, line-dasharray: "3 3.5" }
+  - { min_zoom: 13, name: footway, width: 52, height: 3, line: salmon, line-width: 1.3, line-dasharray: "3 3.5" }
   - { min_zoom:  8, name: rail, width: 52, height: 1, fill: "#787878" }
-  - { min_zoom: 12, name: rail, image: rail12.svg }
-  - { min_zoom: 18, name: rail, image: rail18.svg }
+  - { min_zoom: 12, name: rail, width: 52, height: 3, fill: "#707070", line: white, line-dasharray: 8, line-dashoffset: 2 }
+  - { min_zoom: 18, name: rail, width: 52, height: 4, fill: "#707070", line: white, line-dasharray: 8, line-dashoffset: 2, line-width: 2 }
   - { min_zoom: 12, name: subway, width: 52, height: 2, fill: "#999" }
   - { min_zoom:  8, name: light_rail, width: 52, height: 1, fill: "#ccc" }
   - { min_zoom: 10, name: light_rail, width: 52, height: 1, fill: "#aaa" }
   - { min_zoom: 13, name: light_rail, width: 52, height: 2, fill: "#666" }
-  - { min_zoom: 12, name: tram_only, width: 52, height: 1, fill: "#6e6e6eaa" }
-  - { min_zoom: 14, name: tram_only, width: 52, height: 1, fill: "#6e6e6e" }
-  - { 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: tram_only, width: 52, height: 1, line: "#6e6e6e", line-width: 0.75 }
+  - { min_zoom: 14, name: tram_only, width: 52, height: 3, line: "#6e6e6e", line-width: 1 }
+  - { min_zoom: 15, name: tram_only, width: 52, height: 3, line: "#6e6e6e", line-width: 1.5 }
+  - { min_zoom: 17, name: tram_only, width: 52, height: 2, line: "#6e6e6e", line-width: 2 }
   - { min_zoom: 12, name: [cable_car, chair_lift], image: cable.png }
   - { min_zoom: 11, name: [runway_only, taxiway], image: runway11.svg }
   - { min_zoom: 12, name: [runway_only, taxiway], image: runway12.svg }
@@ -30,8 +30,8 @@ mapnik:
   # landcover z5: landcover.mss, water.mss
   - { name: [lake_only, reservoir], width: 26, height: 10, fill: "#aad3df" }
   - { name: intermittent_water, image: intermittent_water.svg }
-  - { min_zoom:  5, name: glacier, image: glacier5.svg }
-  - { min_zoom: 10, name: glacier, image: glacier10.svg }
+  - { min_zoom:  5, name: glacier, width: 26, height: 10, fill: "#ddecec", border: "#9cf" }
+  - { min_zoom: 10, name: glacier, width: 26, height: 10, fill: "#ddecec", border: "#9cf", border-dasharray: "4 2" }
   - { min_zoom: 10, name: reef, image: reef.png }
   - { min_zoom: 10, name: wetland, image: wetland.png }
   - { min_zoom:  5, name: [forest_only, wood], width: 26, height: 10, fill: "#bddab1" }
@@ -74,40 +74,42 @@ mapnik:
   - { min_zoom: 13, name: [school_only, university, hospital], image: school.svg }
   # buildings: buildings.mss
   - { min_zoom: 14, name: building, width: 10, height: 10, fill: "#ab9793" }
-  - { min_zoom: 15, name: building, image: building15.svg }
-  - { min_zoom: 16, name: building, image: building16.svg }
+  - { min_zoom: 15, name: building, width: 10, height: 10, fill: "#b9a99c", border: "#a99a8d" }
+  - { min_zoom: 16, name: building, width: 10, height: 10, fill: "#c4b6ab", border: "#a99a8d" }
   # stations: stations.mss
   - { min_zoom: 12, name: station, width: 4, height: 4, fill: "#7981b0" }
   - { min_zoom: 13, name: station, width: 6, height: 6, fill: "#7981b0" }
   - { min_zoom: 15, name: station, width: 9, height: 9, fill: "#7981b0" }
   # other
   - { min_zoom: 11, name: [summit_only, peak], image: summit.svg } # amenity-points.mss
-  - { min_zoom: 13, name: tunnel, image: tunnel.svg } # roads.mss
-  - { min_zoom: 13, name: bridge, image: bridge.svg } # roads.mss
+  - { min_zoom: 13, name: tunnel, width: 50, height: 5, casing: grey, casing-dasharray: "4 2", casing-dashoffset: 1 } # roads.mss
+  - { min_zoom: 13, name: bridge, width: 50, height: 5, casing: black } # roads.mss
   - { min_zoom: 15, name: private, image: private.png }
   - { min_zoom: 15, name: destination, image: destination.png }
   - { min_zoom: 12, name: construction, image: construction.png }
 cyclemap:
   - { min_zoom:  5, name: motorway, width: 50, height: 3, fill: "#9a9ab1" }
-  - { min_zoom: 12, name: motorway, image: motorway12.png }
+  - { min_zoom: 12, name: motorway, width: 50, height: 5, fill: "#bdbece", casing: "#8d95a7" }
   - { min_zoom:  6, name: trunk, width: 50, height: 2, fill: "#c8d8c8" }
-  - { min_zoom: 12, name: trunk, image: trunk12.png }
+  - { min_zoom: 12, name: trunk, width: 50, height: 5, fill: "#c8d8c8", casing: "#abb5a4" }
   - { min_zoom:  8, name: primary, width: 50, height: 2, fill: "#d8c8c8" }
-  - { min_zoom: 12, name: primary, image: primary12.png }
+  - { min_zoom: 12, name: primary, width: 50, height: 4, fill: "#f0e3e3", casing: "#d4b6b7" }
   - { min_zoom: 10, name: secondary, width: 50, height: 1, fill: "#dadacc" }
-  - { min_zoom: 12, name: secondary, image: secondary12.png }
-  - { min_zoom: 15, name: pedestrian, image: pedestrian.svg }
-  - { min_zoom: 13, name: track, image: track.png }
-  - { min_zoom:  8, name: cycleway, image: cycleway.png }
+  - { min_zoom: 12, name: secondary, width: 50, height: 4, fill: "#ededc8", casing: "#c8b48a" }
+  - { min_zoom: 15, name: pedestrian, width: 50, height: 4, fill: "#e2e3e2", casing: "#9a9a9a" }
+  - { min_zoom: 13, name: track, width: 50, height: 3, fill: white, casing: "#999", casing-dasharray: "5 3", casing-dashoffset: 1 }
+  - { min_zoom: 15, name: track, width: 50, height: 4, fill: white, casing: "#999", casing-dasharray: "5 3", casing-dashoffset: 1 }
+  - { min_zoom: 17, name: track, width: 50, height: 5, fill: white, casing: "#999", casing-dasharray: "5 3", casing-dashoffset: 1 }
+  - { min_zoom:  8, name: cycleway, width: 50, height: 3, line: "#0100fe", line-width: 1.5, line-dasharray: "6 2" }
   - { min_zoom:  5, name: cycleway_national, width: 50, height: 2, fill: "#fe0000" }
   - { min_zoom: 13, name: cycleway_national, width: 50, height: 4, fill: "#ffb3b3" }
   - { min_zoom:  7, name: cycleway_regional, width: 50, height: 2, fill: "#b638fb" }
   - { min_zoom: 13, name: cycleway_regional, width: 50, height: 4, fill: "#ddb5d9" }
   - { min_zoom:  8, name: cycleway_local, width: 50, height: 2, fill: "#0100fe" }
   - { min_zoom: 13, name: cycleway_local, width: 50, height: 4, fill: "#b2b2ff" }
-  - { min_zoom: 13, name: footway, image: footway.svg }
-  - { min_zoom:  7, name: rail, image: rail.png }
-  - { min_zoom: 14, name: rail, image: rail14.png }
+  - { min_zoom: 13, name: footway, width: 50, height: 3, line: "#bd6d6e", line-width: 1.5, line-dasharray: "6 2" }
+  - { min_zoom:  7, name: rail, width: 50, height: 3, line: "#999999", line-width: 1.5 }
+  - { min_zoom: 14, name: rail, width: 50, height: 4, fill: "#999999", line: white, line-dasharray: 4, line-width: 2 }
   - { min_zoom:  1, name: [lake_only, reservoir], width: 26, height: 10, fill: "#addeff" }
   - { min_zoom:  9, name: [forest_only, wood], width: 26, height: 10, fill: "#b3d6a4" }
   - { min_zoom: 10, name: meadow, width: 26, height: 10, fill: "#c0de9c" }
@@ -119,8 +121,8 @@ cyclemap:
 opnvkarte:
   - { min_zoom:  6, name: rail, width: 52, height: 1, fill: "#868686" }
   - { min_zoom:  8, name: rail, width: 52, height: 2, fill: "#868686" }
-  - { min_zoom: 11, name: rail, image: rail11.svg }
-  - { min_zoom: 15, name: rail, image: rail15.svg }
+  - { min_zoom: 11, name: rail, width: 52, height: 3, fill: "#868686", line: "#eeeeee", line-dasharray: 10, line-dashoffset: 9 }
+  - { min_zoom: 15, name: rail, width: 52, height: 4, fill: "#868686", line: "#eeeeee", line-dasharray: 10, line-dashoffset: 9, line-width: 2 }
   - { min_zoom: 17, name: rail, image: rail17.svg }
   - { min_zoom:  6, name: train, width: 52, height:  2, fill: "#ffc366" }
   - { min_zoom: 10, name: train, width: 52, height:  3, fill: "#ffc366" }
@@ -154,15 +156,15 @@ opnvkarte:
   - { min_zoom: 15, name: bus_stop, image: bus_stop15.svg }
   - { min_zoom: 13, name: stop, image: stop13.svg }
   - { min_zoom: 15, name: stop, image: stop15.svg }
-  - { min_zoom:  8, name: motorway, image: motorway8.svg }
-  - { min_zoom: 13, name: motorway, image: motorway13.svg }
-  - { min_zoom: 15, name: motorway, image: motorway15.svg }
-  - { min_zoom: 17, name: motorway, image: motorway17.svg }
-  - { min_zoom:  8, name: main_road, width: 52, height: 1, fill: "#5c6d6d88" }
-  - { min_zoom: 11, name: main_road, image: main_road11.svg }
-  - { min_zoom: 13, name: main_road, image: main_road13.svg }
-  - { min_zoom: 15, name: main_road, image: main_road15.svg }
-  - { min_zoom: 17, name: main_road, image: main_road17.svg }
+  - { min_zoom:  8, name: motorway, width: 52, height:  4, fill: "#dddddd", casing: "#6d6d6d" }
+  - { min_zoom: 13, name: motorway, width: 52, height:  8, fill: "#dddddd", casing: "#6d6d6d" }
+  - { min_zoom: 15, name: motorway, width: 52, height: 13, fill: "#dddddd", casing: "#6d6d6d", line: "#ffffff", line-dasharray: 12, line-dashoffset: 4 }
+  - { min_zoom: 17, name: motorway, width: 52, height: 17, fill: "#dddddd", casing: "#6d6d6d", line: "#ffffff", line-dasharray: 12, line-dashoffset: 4, casing-width: 2 }
+  - { min_zoom:  8, name: main_road, width: 52, height:  1, fill: "#5c6d6d88" }
+  - { min_zoom: 11, name: main_road, width: 52, height:  4, fill: "#dddddd", casing: "#a1968b" }
+  - { min_zoom: 13, name: main_road, width: 52, height:  8, fill: "#dddddd", casing: "#a1968b" }
+  - { min_zoom: 15, name: main_road, width: 52, height: 13, fill: "#dddddd", casing: "#a1968b" }
+  - { min_zoom: 17, name: main_road, width: 52, height: 17, fill: "#dddddd", casing: "#a1968b" }
   # landcover
   - { min_zoom:  0, name: [lake_only, reservoir], width: 26, height: 10, fill: "#a1cbea" }
   - { min_zoom:  8, name: [lake_only, reservoir], width: 26, height: 10, fill: "#bfd3ef" }