From: Ævar Arnfjörð Bjarmason <avarab@gmail.com>
Date: Tue, 23 Jun 2009 12:04:06 +0000 (+0000)
Subject: Change the map key from a static PNG image to a generated HTML table that can be... 
X-Git-Tag: live~7998
X-Git-Url: https://git.openstreetmap.org./rails.git/commitdiff_plain/079b9fed845b429436c5e84c221154b64c500103

Change the map key from a static PNG image to a generated HTML table that can be translated. Solves ticket:1916
---

diff --git a/app/views/site/_key.html.erb b/app/views/site/_key.html.erb
index f01cb67dd..5a623c10b 100644
--- a/app/views/site/_key.html.erb
+++ b/app/views/site/_key.html.erb
@@ -4,15 +4,179 @@
 
 <script type="text/javascript">
 <!--
+
+  function showKeyEntry(image, text, link) {
+    var ret = '';
+    ret += '<tr>';
+    ret += '  <td class="mapkey-table-key" align="center">';
+    ret += '    <img src="/images/mapkey/' + image + '" />';
+    ret += '  </td>';
+    ret += '  <td class="mapkey-table-value">';
+    ret +=      text;
+    ret += '  </td>';
+    ret += '</tr>';
+    return ret;
+  }
   function showKey() {
     var zoomlevel = map.getZoom();
+    var mapkey_values = new Array();
+    mapkey_values['heading']      = "<%= t'site.key.table.heading' %>";
+    mapkey_values['motorway']     = "<%= t'site.key.table.entry.motorway' %>";
+    mapkey_values['trunk']        = "<%= t'site.key.table.entry.trunk' %>";
+    mapkey_values['primary']      = "<%= t'site.key.table.entry.primary' %>";
+    mapkey_values['secondary']    = "<%= t'site.key.table.entry.secondary' %>";
+    mapkey_values['unclassified'] = "<%= t'site.key.table.entry.unclassified' %>";
+    mapkey_values['unsurfaced']   = "<%= t'site.key.table.entry.unsurfaced' %>";
+    mapkey_values['track']        = "<%= t'site.key.table.entry.track' %>";
+    mapkey_values['byway']        = "<%= t'site.key.table.entry.byway' %>";
+    mapkey_values['bridleway']    = "<%= t'site.key.table.entry.bridleway' %>";
+    mapkey_values['cycleway']     = "<%= t'site.key.table.entry.cycleway' %>";
+    mapkey_values['footway']      = "<%= t'site.key.table.entry.footway' %>";
+    mapkey_values['rail']         = "<%= t'site.key.table.entry.rail' %>";
+    mapkey_values['subway']       = "<%= t'site.key.table.entry.subway' %>";
+    mapkey_values['tram']         = "<%= t'site.key.table.entry.tram' %>";
+    mapkey_values['cable']        = "<%= t'site.key.table.entry.cable' %>";
+    mapkey_values['runway']       = "<%= t'site.key.table.entry.runway' %>";
+    mapkey_values['apron']        = "<%= t'site.key.table.entry.apron' %>";
+    mapkey_values['admin']        = "<%= t'site.key.table.entry.admin' %>";
+    mapkey_values['forest']       = "<%= t'site.key.table.entry.forest' %>";
+    mapkey_values['wood']         = "<%= t'site.key.table.entry.wood' %>";
+    mapkey_values['golf']         = "<%= t'site.key.table.entry.golf' %>";
+    mapkey_values['park']         = "<%= t'site.key.table.entry.park' %>";
+    mapkey_values['resident']     = "<%= t'site.key.table.entry.resident' %>";
+    mapkey_values['tourist']      = "<%= t'site.key.table.entry.tourist' %>";
+    mapkey_values['common']       = "<%= t'site.key.table.entry.common' %>";
+    mapkey_values['retail']       = "<%= t'site.key.table.entry.retail' %>";
+    mapkey_values['industrial']   = "<%= t'site.key.table.entry.industrial' %>";
+    mapkey_values['commercial']   = "<%= t'site.key.table.entry.commercial' %>";
+    mapkey_values['heathland']    = "<%= t'site.key.table.entry.heathland' %>";
+    mapkey_values['lake']         = "<%= t'site.key.table.entry.lake' %>";
+    mapkey_values['farm']         = "<%= t'site.key.table.entry.farm' %>";
+    mapkey_values['brownfield']   = "<%= t'site.key.table.entry.brownfield' %>";
+    mapkey_values['cemetery']     = "<%= t'site.key.table.entry.cemetery' %>";
+    mapkey_values['allotments']   = "<%= t'site.key.table.entry.allotments' %>";
+    mapkey_values['pitch']        = "<%= t'site.key.table.entry.pitch' %>";
+    mapkey_values['centre']       = "<%= t'site.key.table.entry.centre' %>";
+    mapkey_values['reserve']      = "<%= t'site.key.table.entry.reserve' %>";
+    mapkey_values['military']     = "<%= t'site.key.table.entry.military' %>";
+    mapkey_values['school']       = "<%= t'site.key.table.entry.school' %>";
+    mapkey_values['building']     = "<%= t'site.key.table.entry.building' %>";
+    mapkey_values['station']      = "<%= t'site.key.table.entry.station' %>";
+    mapkey_values['summit']       = "<%= t'site.key.table.entry.summit' %>";
+    mapkey_values['tunnel']       = "<%= t'site.key.table.entry.tunnel' %>";
+    mapkey_values['bridge']       = "<%= t'site.key.table.entry.bridge' %>";
+    mapkey_values['private']      = "<%= t'site.key.table.entry.private' %>";
+    mapkey_values['permissive']   = "<%= t'site.key.table.entry.permissive' %>";
+    mapkey_values['destination']  = "<%= t'site.key.table.entry.destination' %>";
+    mapkey_values['construction'] = "<%= t'site.key.table.entry.construction' %>";
+
+    var out = '';
+    var suffix = '';
 
-    if (zoomlevel<7 )      { var imgname = 'keymapnik6.png'; }
-    else if (zoomlevel<13) { var imgname = 'keymapnik'+zoomlevel+'.png'; }
-    else if (zoomlevel<15) { var imgname = 'keymapnik13.png'; }
-    else                   { var imgname = 'keymapnik15.png'; }
+    out += '<div id="mapkey">';
+    out += '<h3>' + i18n(mapkey_values['heading'], { zoom_level: zoomlevel }) + "</h3>";
+    out += '<table class="mapkey-table">';
+    out += showKeyEntry('motorway.png', mapkey_values['motorway'], '');
+    
+    if (zoomlevel >= 12) {
+        suffix = 12;
+    }
+    out += showKeyEntry('trunk' + suffix + '.png', mapkey_values['trunk'], '');
+    if (zoomlevel >= 7) {
+        out += showKeyEntry('primary' + suffix + '.png', mapkey_values['primary'], '');
+    }
+    if (zoomlevel >= 9) {
+        out += showKeyEntry('secondary' + suffix + '.png', mapkey_values['secondary'], '');
+    }
+    if (zoomlevel >= 10) {
+        suffix = '';
+        if (zoomlevel >= 13) { suffix="13"; }
+        out += showKeyEntry('unclassified' + suffix + '.png', mapkey_values['unclassified'], '');
+    }
+    if (zoomlevel >= 13) {
+        out += showKeyEntry('unsurfaced.png', mapkey_values['unsurfaced'], '');
+        out += showKeyEntry('track.png', mapkey_values['track'], '');
+        out += showKeyEntry('byway.png', mapkey_values['byway'], '');
+        out += showKeyEntry('bridleway.png', mapkey_values['bridleway'], '');
+        out += showKeyEntry('cycleway.png', mapkey_values['cycleway'], '');
+        out += showKeyEntry('footway.png', mapkey_values['footway'], '');
+    }
+    if (zoomlevel >= 8) {
+        suffix = '';
+        if (zoomlevel >= 13) { suffix = "13"; }
+        out += showKeyEntry('rail' + suffix + '.png', mapkey_values['rail'], '');
+    }
+    if (zoomlevel >= 13) {
+        out += showKeyEntry('subway.png', mapkey_values['subway'], '');
+        out += showKeyEntry('tram.png', mapkey_values['tram'], '');
+    }
+    if (zoomlevel >= 12) {
+        out += showKeyEntry('cable.png', mapkey_values['cable'], '');
+    }
+    if (zoomlevel >= 11) {
+        out += showKeyEntry('runway.png', mapkey_values['runway'], '');
+    }
+    if (zoomlevel >= 12) {
+        out += showKeyEntry('apron.png', mapkey_values['apron'], '');
+    }
+    out += showKeyEntry('admin.png', mapkey_values['admin'], '');
+    if (zoomlevel >= 9) {
+        out += showKeyEntry('forest.png', mapkey_values['forest'], '');
+    }
+    if (zoomlevel >= 10) {
+        out += showKeyEntry('wood.png', mapkey_values['wood'], '');
+        out += showKeyEntry('golf.png', mapkey_values['golf'], '');
+        out += showKeyEntry('park.png', mapkey_values['park'], '');
+    }
+    if (zoomlevel >= 8) {
+        out += showKeyEntry('resident.png', mapkey_values['resident'], '');
+    }
+    if (zoomlevel >= 10) {
+        out += showKeyEntry('tourist.png', mapkey_values['tourist'], '');
+        out += showKeyEntry('common.png', mapkey_values['common'], '');
+        out += showKeyEntry('retail.png', mapkey_values['retail'], '');
+        out += showKeyEntry('industrial.png', mapkey_values['industrial'], '');
+        out += showKeyEntry('commercial.png', mapkey_values['commercial'], '');
+        out += showKeyEntry('heathland.png', mapkey_values['heathland'], '');
+    }
+    if (zoomlevel >= 8) {
+        out += showKeyEntry('lake.png', mapkey_values['lake'], '');
+    }
+    if (zoomlevel >= 10) {
+        out += showKeyEntry('farm.png', mapkey_values['farm'], '');
+        out += showKeyEntry('brownfield.png', mapkey_values['brownfield'], '');
+    }
+    if (zoomlevel >= 11) {
+        out += showKeyEntry('cemetery.png', mapkey_values['cemetery'], '');
+        out += showKeyEntry('allotments.png', mapkey_values['allotments'], '');
+        out += showKeyEntry('pitch.png', mapkey_values['pitch'], '');
+        out += showKeyEntry('centre.png', mapkey_values['centre'], '');
+        out += showKeyEntry('reserve.png', mapkey_values['reserve'], '');
+        out += showKeyEntry('military.png', mapkey_values['military'], '');
+    }
+    if (zoomlevel >= 12) {
+        out += showKeyEntry('school.png', mapkey_values['school'], '');
+        out += showKeyEntry('building.png', mapkey_values['building'], '');
+        out += showKeyEntry('station.png', mapkey_values['station'], '');
+        out += showKeyEntry('summit.png', mapkey_values['summit'], '');
+        out += showKeyEntry('tunnel.png', mapkey_values['tunnel'], '');
+    }
+    if (zoomlevel >= 13) {
+        out += showKeyEntry('bridge.png', mapkey_values['bridge'], '');
+    }
+    if (zoomlevel >= 15) {
+        out += showKeyEntry('private.png', mapkey_values['private'], '');
+        out += showKeyEntry('permissive.png', mapkey_values['permissive'], '');
+        out += showKeyEntry('destination.png', mapkey_values['destination'], '');
+    }
+    if (zoomlevel >= 12) {
+        out += showKeyEntry('construction.png', mapkey_values['construction'], '');
+    }
+        
+    out += "</table>";
+    out += "</div>";
 
-    updateSidebar("<%= t('site.key.map_key') %>", "<p><img src='images/"+imgname+"' /><\/p>");
+    updateSidebar("<%= t('site.key.map_key') %>", out);
     openSidebar({ width: "210px" });
   }
 
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 9b9069dc2..7a6f4bc89 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -568,6 +568,57 @@ en:
     key:
       map_key: "Map key"
       map_key_tooltip: "Map key for the mapnik rendering at this zoom level"
+      table:
+        heading: "Legend for z[[zoom_level]]"
+        entry:
+          motorway: "Motorway"
+          trunk: "Trunk road"
+          primary: "Primary road"
+          secondary: "Secondary road"
+          unclassified: "Unclassified road"
+          unsurfaced: "Unsurfaced road"
+          track: "Track"
+          byway: "Byway"
+          bridleway: "Bridleway"
+          cycleway: "Cycleway"
+          footway: "Footway"
+          rail: "Railway"
+          subway: "Subway"
+          tram: "Light rail; tram"
+          cable: "Cable car; chair lift"
+          runway: "Airport Runway; taxiway"
+          apron: "Airport apron; terminal"
+          admin: "Administrative boundary"
+          forest: "Forest"
+          wood: "Wood"
+          golf: "Golf course"
+          park: "Park"
+          resident: "Residential area"
+          tourist: "Tourist attraction"
+          common: "Common; meadow"
+          retail: "Retail area"
+          industrial: "Industrial area"
+          commercial: "Commercial area"
+          heathland: "Heathland"
+          lake: "Lake; reservoir"
+          farm: "Farm"
+          brownfield: "Brownfield site"
+          cemetery: "Cemetery"
+          allotments: "Allotments"
+          pitch: "Sports pitch"
+          centre: "Sports centre"
+          reserve: "Nature reserve"
+          military: "Military area"
+          school: "School; university"
+          building: "Significant building"
+          station: "Railway station"
+          summit: "Summit; peak"
+          tunnel: "Dashed casing = tunnel"
+          bridge: "Black casing = bridge"
+          private: "Private access"
+          permissive: "Permissive access"
+          destination: "Destination access"
+          construction: "Roads under construction"
   trace:
     create:
       upload_trace: "Upload GPS Trace"
diff --git a/public/images/keymapnik10.png b/public/images/keymapnik10.png
deleted file mode 100644
index b53c6ba58..000000000
Binary files a/public/images/keymapnik10.png and /dev/null differ
diff --git a/public/images/keymapnik11.png b/public/images/keymapnik11.png
deleted file mode 100644
index 40bb654e4..000000000
Binary files a/public/images/keymapnik11.png and /dev/null differ
diff --git a/public/images/keymapnik12.png b/public/images/keymapnik12.png
deleted file mode 100644
index 2d83b8cf9..000000000
Binary files a/public/images/keymapnik12.png and /dev/null differ
diff --git a/public/images/keymapnik13.png b/public/images/keymapnik13.png
deleted file mode 100644
index 51153869c..000000000
Binary files a/public/images/keymapnik13.png and /dev/null differ
diff --git a/public/images/keymapnik15.png b/public/images/keymapnik15.png
deleted file mode 100644
index 51b73351d..000000000
Binary files a/public/images/keymapnik15.png and /dev/null differ
diff --git a/public/images/keymapnik6.png b/public/images/keymapnik6.png
deleted file mode 100644
index e2b5b1dde..000000000
Binary files a/public/images/keymapnik6.png and /dev/null differ
diff --git a/public/images/keymapnik7.png b/public/images/keymapnik7.png
deleted file mode 100644
index c917631c5..000000000
Binary files a/public/images/keymapnik7.png and /dev/null differ
diff --git a/public/images/keymapnik8.png b/public/images/keymapnik8.png
deleted file mode 100644
index 948cc1c85..000000000
Binary files a/public/images/keymapnik8.png and /dev/null differ
diff --git a/public/images/keymapnik9.png b/public/images/keymapnik9.png
deleted file mode 100644
index 4ab9f8b2d..000000000
Binary files a/public/images/keymapnik9.png and /dev/null differ
diff --git a/public/images/mapkey/admin.png b/public/images/mapkey/admin.png
new file mode 100644
index 000000000..db9b50616
Binary files /dev/null and b/public/images/mapkey/admin.png differ
diff --git a/public/images/mapkey/allotments.png b/public/images/mapkey/allotments.png
new file mode 100644
index 000000000..9f8d1bace
Binary files /dev/null and b/public/images/mapkey/allotments.png differ
diff --git a/public/images/mapkey/apron.png b/public/images/mapkey/apron.png
new file mode 100644
index 000000000..ba7ac5427
Binary files /dev/null and b/public/images/mapkey/apron.png differ
diff --git a/public/images/mapkey/bridge.png b/public/images/mapkey/bridge.png
new file mode 100644
index 000000000..c59e05a61
Binary files /dev/null and b/public/images/mapkey/bridge.png differ
diff --git a/public/images/mapkey/bridleway.png b/public/images/mapkey/bridleway.png
new file mode 100644
index 000000000..53fdd3469
Binary files /dev/null and b/public/images/mapkey/bridleway.png differ
diff --git a/public/images/mapkey/brownfield.png b/public/images/mapkey/brownfield.png
new file mode 100644
index 000000000..7567846d5
Binary files /dev/null and b/public/images/mapkey/brownfield.png differ
diff --git a/public/images/mapkey/building.png b/public/images/mapkey/building.png
new file mode 100644
index 000000000..cb24a48d9
Binary files /dev/null and b/public/images/mapkey/building.png differ
diff --git a/public/images/mapkey/byway.png b/public/images/mapkey/byway.png
new file mode 100644
index 000000000..4bb3bdb3e
Binary files /dev/null and b/public/images/mapkey/byway.png differ
diff --git a/public/images/mapkey/cable.png b/public/images/mapkey/cable.png
new file mode 100644
index 000000000..eb391f541
Binary files /dev/null and b/public/images/mapkey/cable.png differ
diff --git a/public/images/mapkey/cemetery.png b/public/images/mapkey/cemetery.png
new file mode 100644
index 000000000..b0b667061
Binary files /dev/null and b/public/images/mapkey/cemetery.png differ
diff --git a/public/images/mapkey/centre.png b/public/images/mapkey/centre.png
new file mode 100644
index 000000000..98d5ebe49
Binary files /dev/null and b/public/images/mapkey/centre.png differ
diff --git a/public/images/mapkey/commercial.png b/public/images/mapkey/commercial.png
new file mode 100644
index 000000000..2d52c6012
Binary files /dev/null and b/public/images/mapkey/commercial.png differ
diff --git a/public/images/mapkey/common.png b/public/images/mapkey/common.png
new file mode 100644
index 000000000..c785eb073
Binary files /dev/null and b/public/images/mapkey/common.png differ
diff --git a/public/images/mapkey/construction.png b/public/images/mapkey/construction.png
new file mode 100644
index 000000000..838c08667
Binary files /dev/null and b/public/images/mapkey/construction.png differ
diff --git a/public/images/mapkey/cycleway.png b/public/images/mapkey/cycleway.png
new file mode 100644
index 000000000..15e793344
Binary files /dev/null and b/public/images/mapkey/cycleway.png differ
diff --git a/public/images/mapkey/destination.png b/public/images/mapkey/destination.png
new file mode 100644
index 000000000..7368fba21
Binary files /dev/null and b/public/images/mapkey/destination.png differ
diff --git a/public/images/mapkey/farm.png b/public/images/mapkey/farm.png
new file mode 100644
index 000000000..355352624
Binary files /dev/null and b/public/images/mapkey/farm.png differ
diff --git a/public/images/mapkey/footway.png b/public/images/mapkey/footway.png
new file mode 100644
index 000000000..33a351002
Binary files /dev/null and b/public/images/mapkey/footway.png differ
diff --git a/public/images/mapkey/forest.png b/public/images/mapkey/forest.png
new file mode 100644
index 000000000..14c6b4275
Binary files /dev/null and b/public/images/mapkey/forest.png differ
diff --git a/public/images/mapkey/golf.png b/public/images/mapkey/golf.png
new file mode 100644
index 000000000..ae91f1329
Binary files /dev/null and b/public/images/mapkey/golf.png differ
diff --git a/public/images/mapkey/heathland.png b/public/images/mapkey/heathland.png
new file mode 100644
index 000000000..4238d66b8
Binary files /dev/null and b/public/images/mapkey/heathland.png differ
diff --git a/public/images/mapkey/industrial.png b/public/images/mapkey/industrial.png
new file mode 100644
index 000000000..bc0243c76
Binary files /dev/null and b/public/images/mapkey/industrial.png differ
diff --git a/public/images/mapkey/lake.png b/public/images/mapkey/lake.png
new file mode 100644
index 000000000..28f3a9df9
Binary files /dev/null and b/public/images/mapkey/lake.png differ
diff --git a/public/images/mapkey/military.png b/public/images/mapkey/military.png
new file mode 100644
index 000000000..c6a11724a
Binary files /dev/null and b/public/images/mapkey/military.png differ
diff --git a/public/images/mapkey/motorway.png b/public/images/mapkey/motorway.png
new file mode 100644
index 000000000..2c962c621
Binary files /dev/null and b/public/images/mapkey/motorway.png differ
diff --git a/public/images/mapkey/park.png b/public/images/mapkey/park.png
new file mode 100644
index 000000000..bce935473
Binary files /dev/null and b/public/images/mapkey/park.png differ
diff --git a/public/images/mapkey/permissive.png b/public/images/mapkey/permissive.png
new file mode 100644
index 000000000..627b8ad37
Binary files /dev/null and b/public/images/mapkey/permissive.png differ
diff --git a/public/images/mapkey/pitch.png b/public/images/mapkey/pitch.png
new file mode 100644
index 000000000..78f5aa17f
Binary files /dev/null and b/public/images/mapkey/pitch.png differ
diff --git a/public/images/mapkey/primary.png b/public/images/mapkey/primary.png
new file mode 100644
index 000000000..12191ebc4
Binary files /dev/null and b/public/images/mapkey/primary.png differ
diff --git a/public/images/mapkey/primary12.png b/public/images/mapkey/primary12.png
new file mode 100644
index 000000000..c9b9cd914
Binary files /dev/null and b/public/images/mapkey/primary12.png differ
diff --git a/public/images/mapkey/private.png b/public/images/mapkey/private.png
new file mode 100644
index 000000000..22e7a3a90
Binary files /dev/null and b/public/images/mapkey/private.png differ
diff --git a/public/images/mapkey/rail.png b/public/images/mapkey/rail.png
new file mode 100644
index 000000000..861f93120
Binary files /dev/null and b/public/images/mapkey/rail.png differ
diff --git a/public/images/mapkey/rail13.png b/public/images/mapkey/rail13.png
new file mode 100644
index 000000000..ec87192fb
Binary files /dev/null and b/public/images/mapkey/rail13.png differ
diff --git a/public/images/mapkey/reserve.png b/public/images/mapkey/reserve.png
new file mode 100644
index 000000000..483d43a3c
Binary files /dev/null and b/public/images/mapkey/reserve.png differ
diff --git a/public/images/mapkey/resident.png b/public/images/mapkey/resident.png
new file mode 100644
index 000000000..26116d0a1
Binary files /dev/null and b/public/images/mapkey/resident.png differ
diff --git a/public/images/mapkey/retail.png b/public/images/mapkey/retail.png
new file mode 100644
index 000000000..6469e15bf
Binary files /dev/null and b/public/images/mapkey/retail.png differ
diff --git a/public/images/mapkey/runway.png b/public/images/mapkey/runway.png
new file mode 100644
index 000000000..2a0b9d3b9
Binary files /dev/null and b/public/images/mapkey/runway.png differ
diff --git a/public/images/mapkey/school.png b/public/images/mapkey/school.png
new file mode 100644
index 000000000..c1478c656
Binary files /dev/null and b/public/images/mapkey/school.png differ
diff --git a/public/images/mapkey/secondary.png b/public/images/mapkey/secondary.png
new file mode 100644
index 000000000..16f254796
Binary files /dev/null and b/public/images/mapkey/secondary.png differ
diff --git a/public/images/mapkey/secondary12.png b/public/images/mapkey/secondary12.png
new file mode 100644
index 000000000..121670fcf
Binary files /dev/null and b/public/images/mapkey/secondary12.png differ
diff --git a/public/images/mapkey/station.png b/public/images/mapkey/station.png
new file mode 100644
index 000000000..1a10b1c49
Binary files /dev/null and b/public/images/mapkey/station.png differ
diff --git a/public/images/mapkey/subway.png b/public/images/mapkey/subway.png
new file mode 100644
index 000000000..76ea5e806
Binary files /dev/null and b/public/images/mapkey/subway.png differ
diff --git a/public/images/mapkey/summit.png b/public/images/mapkey/summit.png
new file mode 100644
index 000000000..4a4ec2426
Binary files /dev/null and b/public/images/mapkey/summit.png differ
diff --git a/public/images/mapkey/tourist.png b/public/images/mapkey/tourist.png
new file mode 100644
index 000000000..df512bb8c
Binary files /dev/null and b/public/images/mapkey/tourist.png differ
diff --git a/public/images/mapkey/track.png b/public/images/mapkey/track.png
new file mode 100644
index 000000000..60bbbe96c
Binary files /dev/null and b/public/images/mapkey/track.png differ
diff --git a/public/images/mapkey/tram.png b/public/images/mapkey/tram.png
new file mode 100644
index 000000000..46f3877ad
Binary files /dev/null and b/public/images/mapkey/tram.png differ
diff --git a/public/images/mapkey/trunk.png b/public/images/mapkey/trunk.png
new file mode 100644
index 000000000..690396363
Binary files /dev/null and b/public/images/mapkey/trunk.png differ
diff --git a/public/images/mapkey/trunk12.png b/public/images/mapkey/trunk12.png
new file mode 100644
index 000000000..399e26bb2
Binary files /dev/null and b/public/images/mapkey/trunk12.png differ
diff --git a/public/images/mapkey/tunnel.png b/public/images/mapkey/tunnel.png
new file mode 100644
index 000000000..cc5b1c32f
Binary files /dev/null and b/public/images/mapkey/tunnel.png differ
diff --git a/public/images/mapkey/unclassified.png b/public/images/mapkey/unclassified.png
new file mode 100644
index 000000000..5f3b8c5a5
Binary files /dev/null and b/public/images/mapkey/unclassified.png differ
diff --git a/public/images/mapkey/unclassified13.png b/public/images/mapkey/unclassified13.png
new file mode 100644
index 000000000..5b63d9194
Binary files /dev/null and b/public/images/mapkey/unclassified13.png differ
diff --git a/public/images/mapkey/unsurfaced.png b/public/images/mapkey/unsurfaced.png
new file mode 100644
index 000000000..2dec21a0d
Binary files /dev/null and b/public/images/mapkey/unsurfaced.png differ
diff --git a/public/images/mapkey/wood.png b/public/images/mapkey/wood.png
new file mode 100644
index 000000000..821781a1c
Binary files /dev/null and b/public/images/mapkey/wood.png differ
diff --git a/public/stylesheets/site.css b/public/stylesheets/site.css
index c8b1c5441..8d7324fc3 100644
--- a/public/stylesheets/site.css
+++ b/public/stylesheets/site.css
@@ -52,6 +52,25 @@ body {
   margin: 0px;
 }
 
+/* The Map Key sidebar */
+#mapkey h3 {
+    font-size: 110%;
+    font-weight: normal;
+    text-align: center;
+}
+
+#mapkey .mapkey-table {
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+/*#mapkey .mapkey-table-key {}*/
+
+#mapkey .mapkey-table-value {
+    font-size: 90%;
+}
+
+
 #greeting {
   float: right;
   height: 20px;