3/21 initial upload

canayter · web-flow · commit 9ad10e78e35c · 2024-03-21T13:06:30.000-05:00
initial upload of challenge 15 files
diff --git a/index.html b/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/static/css/style.css b/static/css/style.css
@@ -0,0 +1,37 @@
+body {
+  padding: 0;
+  margin: 0;
+}
+
+#map,
+body,
+html {
+  height: 100%;
+}
+
+.legend {
+  padding: 10px;
+  line-height: 15px;
+  color: #555;
+  background: #fff;
+  border-radius: 5px;
+}
+
+.legend i {
+  float: left;
+  width: 18px;
+  height: 18px;
+  margin-right: 5px;
+  opacity: 0.7;
+}
+
+.leaflet-bottom.leaflet-left {
+  width: 90%;
+}
+
+.leaflet-control-container .leaflet-timeline-controls{
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  margin-bottom: 15px;
+}
diff --git a/static/js/logic.js b/static/js/logic.js
@@ -0,0 +1,81 @@
+let basemap = L.tileLayer(
+    "https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png", {
+    attribution: 'Map data: &copy; OpenTopoMap contributors'
+});
+
+let map = L.map("map", {
+    center: [40.7, -94.5],
+    zoom: 3
+});
+
+basemap.addTo(map);
+
+function getColor(depth) {
+    if(depth > 90) {
+        return "#ea2c2c"
+    } else if (depth > 70) {
+        return "#ea822c"
+    } else if (depth > 50) {
+        return "#ee9c00"
+    } else if (depth > 30) {
+        return "#eecc00"
+    } else if (depth > 10) {
+        return "#d4ee00"
+    }
+    else {
+        return "#98ee00"
+    }
+}
+
+function getRadius(magnitude) {
+    if(magnitude === 0) {
+        return 1
+    }
+    return magnitude * 4
+}
+
+d3.json("https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson").then(function(data) {
+    function styleInfo(feature) {
+        return {
+            opacity: 1,
+            fillOpacity: 1,
+            fillColor: getColor(feature.geometry.coordinates[2]),
+            color: "#000000",
+            weight: 0.5
+    }
+    }
+
+    L.geoJson(data, {
+        pointToLayer: function(feature, latlng) {
+            return L.circleMarker(latlng, {
+                radius: getRadius(feature.properties.mag)
+            });
+        },
+        style: styleInfo,
+        onEachFeature: function(feature, layer) {
+            layer.bindPopup(`
+                Magnitude: ${feature.properties.mag} <br>
+                Depth: ${feature.geometry.coordinates[2]} <br>
+                Location: ${feature.properties.place}
+            `);
+        }
+    }).addTo(map);
+
+    let legend = L.control({ position: "bottomright" });
+
+    legend.onAdd = function(map) {
+        let container = L.DomUtil.create("div", "info legend");
+        const grades = [-10, 10, 30, 50, 70, 90];
+        const colors = ["#98ee00", "#d4ee00", "#eecc00", "#ee9c00", "#ea822c", "#ea2c2c"];
+
+        for (let i = 0; i < grades.length; i++) {
+            container.innerHTML +=
+                '<i style="background:' + colors[i] + '"></i> ' +
+                grades[i] + (grades[i + 1] ? '&ndash;' + grades[i + 1] + '<br>' : '+');
+        }
+
+        return container;
+    };
+
+    legend.addTo(map);
+});
