From 079fb4a058caf50dec9618887eb3de165c079d3b Mon Sep 17 00:00:00 2001
From: Jodee Harris <jodee_harris@yahoo.com>
Date: Tue, 17 Oct 2023 23:03:09 -0500
Subject: [PATCH] Updating document

---
 Starter_Code/static/css/style.css | 17 ++++++++++
 Starter_Code/static/js/logic.js   | 52 +++++++++++++++++++++++++------
 2 files changed, 60 insertions(+), 9 deletions(-)

diff --git a/Starter_Code/static/css/style.css b/Starter_Code/static/css/style.css
index 2f715c9..b3cdb5b 100644
--- a/Starter_Code/static/css/style.css
+++ b/Starter_Code/static/css/style.css
@@ -8,3 +8,20 @@ body,
 html {
   height: 100%;
 }
+.legends{
+  background-color:white;
+  outline: black 1px dotted;
+  padding: 10px;
+}
+.word {
+  width: 100px;
+  overflow-wrap: break-word;  
+  word-wrap: break-word; 
+  word-break: break-word;
+}
+.description{
+  height: 15px;
+  width: 15px;
+  float: left;
+  margin-right: 5px;
+}
\ No newline at end of file
diff --git a/Starter_Code/static/js/logic.js b/Starter_Code/static/js/logic.js
index 73f02c0..9d92d35 100644
--- a/Starter_Code/static/js/logic.js
+++ b/Starter_Code/static/js/logic.js
@@ -24,13 +24,47 @@ d3.json(url).then(function(eqData){
     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
         attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
     }).addTo(map);
-    L.geoJson(eqData,{pointToLayer:function(feature, cord){
-        return L.circleMarker(cord,{
-            color: depth(feature.geometry.coordinates[2]),
-            fillColor: depth(feature.geometry.coordinates[2]),
-            opacity: 1,
-            fillOpacity: .7, 
-            radius: feature.properties.mag * 10
-        })
-    }}).addTo(map);
+    L.geoJson(eqData,{
+        pointToLayer:function(feature, cord){
+            return L.circleMarker(cord,{
+                color: depth(feature.geometry.coordinates[2]),
+                fillColor: depth(feature.geometry.coordinates[2]),
+                opacity: 1,
+                fillOpacity: .7, 
+                radius: feature.properties.mag * 10
+            })
+        },
+        onEachFeature: function(feature, layer){
+            layer.bindPopup(`<h1>LOCATION: ${feature.properties.place.toUpperCase()},
+            LATITUDE: ${feature.geometry.coordinates[1]},
+            LONGITUDE: ${feature.geometry.coordinates[0]},
+            MAGNITUDE: ${feature.properties.mag}</h1>`);
+        }}).addTo(map);
+
+    control = L.control({position:"bottomright"})
+    control.onAdd = function(){
+        let box = L.DomUtil.create("div","legends")
+        let depths = [90,70,50,30,0]
+
+        box.innerHTML = "<h3>Key</h3>"
+        for (let d=0; d < depths.length; d++) {
+            let display;
+
+            if (d == 0){
+                display = "90+"
+            } else if (d == depths.length -1) {
+                display = "<=30"
+            }else {
+                display = `${depths[d-1]}-${depths[d]}`
+            }
+
+            box.innerHTML +=`<div>
+            <div class="description" style="background-color:${depth(depths[d])}"></div> ${display}
+            </div>`
+        }
+        
+
+        return box
+    }
+    control.addTo(map);
 })
\ No newline at end of file