Updating document

JodeeHarris · Oct 18, 2023 · 079fb4a · 079fb4a
1 parent 93d7aca
commit 079fb4a
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 9 deletions.
diff --git 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;
+}
diff --git 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);
 })