From cdb6aadd31da618580674d6f192d5995a699f3d0 Mon Sep 17 00:00:00 2001
From: Mark Brown <markabrown87@gmail.com>
Date: Sun, 9 Sep 2018 19:56:05 -0400
Subject: [PATCH 1/3] Added loader to let user know that map is still being
 processed and rendered

---
 js/parking_map.js              | 25 +++++++++---
 js/parking_map_data_control.js |  2 +-
 parking_map.css                | 69 ++++++++++++++++++++++++++++++++++
 parking_map.html               | 11 +-----
 4 files changed, 91 insertions(+), 16 deletions(-)
 create mode 100644 parking_map.css

diff --git a/js/parking_map.js b/js/parking_map.js
index b1300b4..65cfd9c 100644
--- a/js/parking_map.js
+++ b/js/parking_map.js
@@ -41,9 +41,21 @@ function getPaymentMethods(val) {
   }
 }
 
+function renderLoader() {
+  let loader = document.createElement('div');
+  loader.className = 'loader';
+  document.body.insertBefore(loader, document.body.firstChild);
+}
+
+function removeLoader() {
+  let loader = document.querySelector('.loader');
+  document.body.removeChild(loader);
+}
+
 let featuresLayerGroup
 
 function queryArcGIS(map) {
+  renderLoader();
   conditions = []
 
   conditions.push('even_is_parking_available IS NOT NULL AND odd_is_parking_available IS NOT NULL')
@@ -120,18 +132,19 @@ function queryArcGIS(map) {
 
         } else {
           lines.push('No parking available')
-
         }
-
         return lines.join('<br>')
 
-      }).addTo(map)
+      }).addTo(map);
+
+      removeLoader();
 
     }
   })
 }
 
 $(document).ready(() => {
+
   const map = L.map("parking-map").setView([39.743624, -75.549839], 15);
 
   const parkingGarages = new L.GeoJSON.AJAX("https://gist.githubusercontent.com/trescube/14dc08c9fe1d115308176efe88fb05dd/raw/230791df013d36bac441048fecba79b03c0a6916/wilmington_parking_garages.geojson", {
@@ -146,7 +159,7 @@ $(document).ready(() => {
   queryArcGIS(map)
 
   parkingGarages.addTo(map);
-
+  
   parkingGarages.bindTooltip(parkingGarage => {
     const properties = parkingGarage.feature.properties
 
@@ -160,12 +173,12 @@ $(document).ready(() => {
   })
 
   $('.leaflet-control-layers').css({ 'width': '100', 'float': 'right' });
-
   $('#hasMeters').change(queryArcGIS.bind(null, map))
   $('#acceptsCreditCards').change(queryArcGIS.bind(null, map))
   $('#acceptsParkMobile').change(queryArcGIS.bind(null, map))
   $('#acceptsCoins').change(queryArcGIS.bind(null, map))
   $('#freeSaturdayParking').change(queryArcGIS.bind(null, map))
   $('#freeSundayParking').change(queryArcGIS.bind(null, map))
-})
+
+});
 
diff --git a/js/parking_map_data_control.js b/js/parking_map_data_control.js
index 8e8ab37..4c633f0 100644
--- a/js/parking_map_data_control.js
+++ b/js/parking_map_data_control.js
@@ -10,7 +10,7 @@ L.Control.ParkingInput = L.Control.extend({
 
     const inputPanel = L.DomUtil.create('div', 'panel panel-default', container)
     inputPanel.innerHTML = 
-      '<h3>Wilmington, DE</h3>' +
+      '<h4>Wilmington, DE</h4>' +
       '<form id="filter-parking-form">' +
         '<div>' +
         '<label>' +
diff --git a/parking_map.css b/parking_map.css
new file mode 100644
index 0000000..dc89953
--- /dev/null
+++ b/parking_map.css
@@ -0,0 +1,69 @@
+body { 
+    margin:0; 
+    padding:0; 
+}
+
+#parking-map { 
+    position: absolute; 
+    top:0; 
+    bottom:0; 
+    right:0; 
+    left:0; 
+    z-index: 0; 
+}
+
+#parking-map .container .panel.panel-default { 
+    display: flex; 
+    flex-direction: column; 
+    justify-content: center; 
+    align-items: flex-start; 
+    padding: 5px; 
+    max-width: 30vw; 
+    max-height: 40vh; 
+    min-width: 200px; 
+    min-height: 200px; 
+    float: right; 
+    background-color: rgba(255,255,255,0.8);
+    box-shadow: 0px 2px 1px 0px;
+}
+
+#parking-map #filter-parking-form { 
+    margin: 0px; 
+}
+
+#parking-map #filter-parking-form input { 
+    vertical-align: text-bottom; 
+}
+
+#parking-map h4 { 
+    font-weight: 900; 
+    margin: 5px 0px 5px 0px 
+}
+
+@keyframes spin { 
+  0% { border: 16px solid rgba(0,0,0,0); border-top: 16px solid rgb(200,0,0); border-bottom: 16px solid rgb(200,0,0); transform: rotate(0deg); } 
+  50% { border: 16px solid rgba(0,0,0,0); border-top: 16px solid rgb(0,0,200); border-bottom: 16px solid rgb(0,0,200); transform: rotate(180deg); }     
+  100% { border: 16px solid rgba(0,0,0,0); border-top: 16px solid rgb(200,0,0); border-bottom: 16px solid rgb(200,0,0); transform: rotate(360deg); }
+}    
+
+@-webkit-keyframes spin { 
+    0% { border: 16px solid rgba(0,0,0,0); border-top: 16px solid rgb(200,0,0); border-bottom: 16px solid rgb(200,0,0); transform: rotate(0deg); } 
+    50% { border: 16px solid rgba(0,0,0,0); border-top: 16px solid rgb(0,0,200); border-bottom: 16px solid rgb(0,0,200); transform: rotate(180deg); }     
+    100% { border: 16px solid rgba(0,0,0,0); border-top: 16px solid rgb(200,0,0); border-bottom: 16px solid rgb(200,0,0); transform: rotate(360deg); }
+  }    
+
+.loader { 
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    top: 25vh;
+    left: 25vw;
+    margin-top: calc(25vh - 50px);
+    margin-bottom: calc(25vh - 50px);
+    margin-left: calc(25vw - 50px);
+    margin-right: calc(25vw - 50px);
+    border-radius: 50%;
+    z-index: 100;
+    animation: spin 3s linear infinite;
+    -webkit-animation: spin 3s linear infinite;
+}
\ No newline at end of file
diff --git a/parking_map.html b/parking_map.html
index 2737af9..eb6d907 100644
--- a/parking_map.html
+++ b/parking_map.html
@@ -8,6 +8,8 @@
   integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
   crossorigin="anonymous">
 
+  <link rel="stylesheet" href="parking_map.css" />
+
   <!-- Load Leaflet from CDN -->
   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
   integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
@@ -26,15 +28,6 @@
   <script src="https://js.arcgis.com/4.7/"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-ajax/2.1.0/leaflet.ajax.js"></script>
 
-  <style>
-    body { margin:0; padding:0; }
-    #parking-map { position: absolute; top:0; bottom:0; right:0; left:0; }
-    #parking-map .container .panel.panel-default { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; 
-      padding: 5px; max-width: 30vw; max-height: 40vh; min-width: 250px; min-height: 200px; float: right; }
-    #parking-map #filter-parking-form { margin: 0px; }
-    #parking-map #filter-parking-form input { vertical-align: text-bottom; }
-    #parking-map h3 { font-weight: 900; margin: 5px 0px 5px 0px }
-  </style>
 </head>
 <body>
   <div id="parking-map"></div>

From bd6418225dd5fd84bc2a5d1c381433b64bfe5149 Mon Sep 17 00:00:00 2001
From: Mark Brown <markabrown87@gmail.com>
Date: Sun, 9 Sep 2018 22:35:36 -0400
Subject: [PATCH 2/3] Added support for safari

---
 js/parking_map.js |  6 ++++--
 parking_map.css   | 13 ++++++++-----
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/js/parking_map.js b/js/parking_map.js
index 65cfd9c..9f49f9a 100644
--- a/js/parking_map.js
+++ b/js/parking_map.js
@@ -49,13 +49,15 @@ function renderLoader() {
 
 function removeLoader() {
   let loader = document.querySelector('.loader');
-  document.body.removeChild(loader);
+  if (loader) document.body.removeChild(loader);
 }
 
 let featuresLayerGroup
 
 function queryArcGIS(map) {
-  renderLoader();
+
+  let loader = document.querySelector('.loader');
+  if (!loader) renderLoader();
   conditions = []
 
   conditions.push('even_is_parking_available IS NOT NULL AND odd_is_parking_available IS NOT NULL')
diff --git a/parking_map.css b/parking_map.css
index dc89953..1083998 100644
--- a/parking_map.css
+++ b/parking_map.css
@@ -46,10 +46,10 @@ body {
   100% { border: 16px solid rgba(0,0,0,0); border-top: 16px solid rgb(200,0,0); border-bottom: 16px solid rgb(200,0,0); transform: rotate(360deg); }
 }    
 
-@-webkit-keyframes spin { 
-    0% { border: 16px solid rgba(0,0,0,0); border-top: 16px solid rgb(200,0,0); border-bottom: 16px solid rgb(200,0,0); transform: rotate(0deg); } 
-    50% { border: 16px solid rgba(0,0,0,0); border-top: 16px solid rgb(0,0,200); border-bottom: 16px solid rgb(0,0,200); transform: rotate(180deg); }     
-    100% { border: 16px solid rgba(0,0,0,0); border-top: 16px solid rgb(200,0,0); border-bottom: 16px solid rgb(200,0,0); transform: rotate(360deg); }
+@-webkit-keyframes safarispin { 
+    0% { border: 16px solid rgba(0,0,0,0); border-top: 16px solid rgb(200,0,0); border-bottom: 16px solid rgb(200,0,0); -webkit-transform: rotate(0deg); } 
+    50% { border: 16px solid rgba(0,0,0,0); border-top: 16px solid rgb(0,0,200); border-bottom: 16px solid rgb(0,0,200); -webkit-transform: rotate(180deg); }     
+    100% { border: 16px solid rgba(0,0,0,0); border-top: 16px solid rgb(200,0,0); border-bottom: 16px solid rgb(200,0,0); -webkit-transform: rotate(360deg); } 
   }    
 
 .loader { 
@@ -63,7 +63,10 @@ body {
     margin-left: calc(25vw - 50px);
     margin-right: calc(25vw - 50px);
     border-radius: 50%;
+    border: 16px solid rgba(0,0,0,0); 
+    border-top: 16px solid rgb(0,0,0); 
+    border-bottom: 16px solid rgb(0,0,0);
     z-index: 100;
     animation: spin 3s linear infinite;
-    -webkit-animation: spin 3s linear infinite;
+    -webkit-animation: safarispin 3s linear infinite;
 }
\ No newline at end of file

From 3fc2512f853a78015047709861ab370e9753f5e3 Mon Sep 17 00:00:00 2001
From: Mark Brown <markabrown87@gmail.com>
Date: Sun, 9 Sep 2018 22:42:40 -0400
Subject: [PATCH 3/3] Added support for Edge

---
 parking_map.css | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/parking_map.css b/parking_map.css
index 1083998..dff208d 100644
--- a/parking_map.css
+++ b/parking_map.css
@@ -50,7 +50,13 @@ body {
     0% { border: 16px solid rgba(0,0,0,0); border-top: 16px solid rgb(200,0,0); border-bottom: 16px solid rgb(200,0,0); -webkit-transform: rotate(0deg); } 
     50% { border: 16px solid rgba(0,0,0,0); border-top: 16px solid rgb(0,0,200); border-bottom: 16px solid rgb(0,0,200); -webkit-transform: rotate(180deg); }     
     100% { border: 16px solid rgba(0,0,0,0); border-top: 16px solid rgb(200,0,0); border-bottom: 16px solid rgb(200,0,0); -webkit-transform: rotate(360deg); } 
-  }    
+}
+
+@-ms-keyframes msspin { 
+    0% { border: 16px solid rgba(0,0,0,0); border-top: 16px solid rgb(200,0,0); border-bottom: 16px solid rgb(200,0,0); -webkit-transform: rotate(0deg); } 
+    50% { border: 16px solid rgba(0,0,0,0); border-top: 16px solid rgb(0,0,200); border-bottom: 16px solid rgb(0,0,200); -webkit-transform: rotate(180deg); }     
+    100% { border: 16px solid rgba(0,0,0,0); border-top: 16px solid rgb(200,0,0); border-bottom: 16px solid rgb(200,0,0); -webkit-transform: rotate(360deg); } 
+}    
 
 .loader { 
     position: absolute;
@@ -69,4 +75,5 @@ body {
     z-index: 100;
     animation: spin 3s linear infinite;
     -webkit-animation: safarispin 3s linear infinite;
+    -ms-animation: msspin 3s linear infinite;
 }
\ No newline at end of file