starting challenge

JodeeHarris · Oct 11, 2023 · 93d7aca · 93d7aca
1 parent 5aba35c
commit 93d7aca
Show file tree

Hide file tree

Showing 11 changed files with 80 additions and 0 deletions.
diff --git a/Starter_Code/Images/1-Logo.png b/Starter_Code/Images/1-Logo.png
diff --git a/Starter_Code/Images/2-BasicMap.png b/Starter_Code/Images/2-BasicMap.png
diff --git a/Starter_Code/Images/3-Data.png b/Starter_Code/Images/3-Data.png
diff --git a/Starter_Code/Images/4-JSON.png b/Starter_Code/Images/4-JSON.png
diff --git a/Starter_Code/Images/5-Advanced.png b/Starter_Code/Images/5-Advanced.png
diff --git a/Starter_Code/Images/6-Time_Keeps_On_Ticking.gif b/Starter_Code/Images/6-Time_Keeps_On_Ticking.gif
diff --git a/Starter_Code/Images/Cluster.png b/Starter_Code/Images/Cluster.png
diff --git a/Starter_Code/Images/Heat.png b/Starter_Code/Images/Heat.png
diff --git a/Starter_Code/index.html b/Starter_Code/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Leaflet Step-1</title>
+
+  <!-- Leaflet CSS -->
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+    crossorigin="" />
+
+  <!-- Our CSS -->
+  <link rel="stylesheet" type="text/css" href="static/css/style.css">
+</head>
+
+<body>
+
+  <!-- The div that holds our map -->
+  <div id="map"></div>
+
+  <!-- Leaflet JS -->
+  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+    crossorigin=""></script>
+  <!-- D3 JavaScript -->
+  <script src="https://d3js.org/d3.v7.min.js"></script>
+  <!-- Our JavaScript -->
+  <script type="text/javascript" src="static/js/logic.js"></script>
+</body>
+
+</html>
diff --git a/Starter_Code/static/css/style.css b/Starter_Code/static/css/style.css
@@ -0,0 +1,10 @@
+body {
+  padding: 0;
+  margin: 0;
+}
+
+#map,
+body,
+html {
+  height: 100%;
+}
diff --git a/Starter_Code/static/js/logic.js b/Starter_Code/static/js/logic.js
@@ -0,0 +1,36 @@
+url = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson"
+depth = function(d){
+    if (d >= 90) {
+         return "red"}
+         else if (d>=70){
+            return "green"
+         }
+         else if (d>=50){
+            return "orange"
+         }
+         else if (d>=30){
+            return "yellow"
+         }
+         else {
+            return "blue"
+         }
+}
+d3.json(url).then(function(eqData){
+    console.log(eqData)
+    map = L.map("map",{
+        center:[0,0],
+        zoom: 2
+    })
+    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);
+})