Display invalid markers in a separate sidebar

main.css

@@ -134,7 +134,7 @@ html, body
 .leaflet-control-zoom.leaflet-bar.leaflet-control
 {
     position: fixed;
-    right: 1%;
+    right: calc(250px + 3%);
     bottom: 3%;
 }
 
@@ -302,6 +302,26 @@ html, body
     background: #00254A;
 }
 
+#dataTable .map-pin
+{
+    display: inline-block;
+}
+
+#dataTable .map-pin:after
+{
+    background: 0;
+}
+
+#dataTable p
+{
+    /* Set the height to height of icons */
+    height: 32px;
+
+    display: inline-block;
+    margin: 0 0 0 4px;
+    vertical-align: middle;
+}
+
 #dataTable .col1 { width: 75px; text-align: center; }
 #dataTable .col2 { width: 375px; text-align: center; }
 #dataTable .col3 { width: 75px; text-align: center; }

map.js

@@ -55,6 +55,7 @@
 
     const sidebar = document.getElementById("sidebar");
     const sidebarToggle = document.getElementById("sidebarToggle");
+    const parentList = document.getElementById('badMarkers');
 
     //Start with sidebar closed if mobile
     if (screen.width <= 800) {
@@ -163,7 +164,11 @@
             markers.forEach((marker) => {
                 if (marker.type.toLowerCase() === type && marker.isMapped) {
                     if (marker.inDate) {
-                        marker.pin.addTo(map);
+                        if (marker.isMapped) {
+                            marker.pin.addTo(map);
+                        } else {
+                            parentList.appendChild(marker.tableEl);
+                        }
                     }
                     marker.filtered = false;
                 }
@@ -407,6 +412,30 @@
 
                         record.isMapped = true;
                     } else {
+                        // Give non-mapped markers a list element for displaying in a separate list
+                        // of non-mapped markers
+                        const li = document.createElement('li');
+                        const headerLine = document.createElement('p');
+
+                        const options = dataSource.icon.options;
+                        const icon = document.createElement('div');
+                        icon.className = options.className;
+                        icon.innerHTML = options.html;
+                        icon.style.width = options.iconSize[0];
+                        icon.style.height = options.iconSize[1];
+
+                        if (dataSource.table) {
+                            headerLine.innerHTML = dataSource.table(record);
+                        } else {
+                            headerLine.innerHTML = dataSource.title(record);
+                        }
+
+                        li.appendChild(icon);
+                        li.appendChild(headerLine);
+
+                        parentList.appendChild(li);
+
+                        record.tableEl = li;
                         record.isMapped = false;
                     }
                     markers.push(record);
@@ -656,7 +685,6 @@
             fetchPittData('Laundry', 'SUTH_EAST', true),
             fetchPittData('Laundry', 'SUTH_WEST', true),
             fetchPittData('Laundry', 'FORBES_CRAIG', true)
-
         ]).catch((err) => {
             displayNotification(err, "error", (retryDiv) => {
                 var retryButton = document.createElement("button");