Enhance visibility of marker

Reviewed-on: #5

static/c4.css

@@ -7,13 +7,31 @@ h1, h1 a  {
     color: #dfaa37; /* C4 Yellow */
 }
 
+#search:focus {
+    outline: 2px solid #dfaa37;
+}
+
 #map {
-  border: 1px solid #202020;
+    border: 1px solid #202020;
-  background: #4d4d4d;
+    background-color: #4d4d4d;
-  max-width: 1440px;
+    max-width: 1440px;
-  max-height: 50vh;
+    max-height: 50vh;
-  aspect-ratio: 2 / 1;
+    aspect-ratio: 2 / 1;
-  box-shadow: 0px 6px 12px #000c;
+    box-shadow: 0px 6px 12px #000c;
+}
+
+#mapnote {
+    background-color: #ccc;
+    color: #333;
+    border-color: #202020;
+    padding: 0.25em 0.5em;
+    position: relative;
+    top: -1px;
+    box-shadow: 0px 6px 12px #000c;
+}
+
+#mapnote:empty {
+    display: none;
 }
 
 .result {
@@ -36,6 +54,21 @@ h1, h1 a  {
     font-size: smaller;
 }
 
+#knowntypes button {
+    color: #220;
+    background-color: #dfaa37;
+    border: 1px solid #220;
+    border-radius: 4px;
+    padding: 0.2em 0.4em;
+    margin: 0.2em;
+    font-weight: bolder;
+    cursor: pointer;
+}
+
+#knowntypes button:hover, #knowntypes button:focus {
+    background-color: #f5c251;
+}
+
 .btn {
   box-shadow: 0 3px 6px -1px rgba(0,0,0,0.3);
 }
@@ -75,8 +108,9 @@ h1, h1 a  {
 }
 
 #mapgrid {
-    outline: 2px solid #dfaa37;
+    outline: 2px solid #333;
-    background: #dfaa3780;
+    background-color: #dfaa37;
+    border-radius: 4px;
     animation: blinker 1s infinite;
 }
 

static/form.js

@@ -65,8 +65,22 @@ function knownTypes() {
       map[i.type] = true;
     }
   }
-  let types = Object.keys(map).sort().join(', ')
+
-  document.getElementById('knowntypes').textContent = `Known types: ${types}.`;
+  // Get location in document.
+  const known_types = document.getElementById('knowntypes');
+  known_types.textContent = `Known types: `;
+
+  // Create a button for every known type.
+  for (let label of Object.keys(map).sort()) {
+    btn = document.createElement('button');
+    btn.setAttribute('type', 'button');
+    btn.textContent = label;
+    btn.addEventListener('click', function() {
+      document.getElementById('type').value = label;
+    });
+
+    known_types.appendChild(btn);
+  }
 }
 
 function save() {