got map working* + added css

scottarterbury · Feb 27, 2024 · 846f5b4 · 846f5b4
1 parent 8d5e3ed
commit 846f5b4
Show file tree

Hide file tree

Showing 3 changed files with 140 additions and 30 deletions.
diff --git a/polylineMap.html b/polylineMap.html
@@ -0,0 +1,37 @@
+<!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>Tornado</title>
+
+  <!-- Leaflet CSS -->
+  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
+    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+    crossorigin="" />
+
+  <!-- Our CSS -->
+  <link rel="stylesheet" type="text/css" href="static/css/polylineCSS.css">
+</head>
+
+<body>
+
+  <!-- The div that holds our map -->
+  <div id="map"></div>
+
+  <!-- Leaflet JS -->
+  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
+    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+    crossorigin=""></script>
+
+  <!-- D3 JavaScript -->
+  <script src="https://d3js.org/d3.v7.min.js"></script>
+
+  <!-- my javascript -->
+  <script type="text/javascript" src="static/polylineMap.js"></script>
+
+</body>
+
+</html>
diff --git a/static/css/polylineCSS.css b/static/css/polylineCSS.css
@@ -0,0 +1,47 @@
+body {
+  padding: 0px;
+  margin: 0px;
+}
+#map,
+body,
+html {
+  height: 100%;
+}
+.leaflet-popup-content {
+  text-align: center;
+}
+
+
+/* CSS from the leaflet-choropleth documentation */
+.legend {
+  color: #555;
+  padding: 6px 8px;
+  font: 12px Arial, Helvetica, sans-serif;
+  font-weight: bold;
+  background: white;
+  background: rgba(255,255,255,0.8);
+  box-shadow: 0 0 15px rgba(0,0,0,0.2);
+  border-radius: 5px;
+}
+.legend ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  clear: both;
+}
+.legend li {
+  display: inline-block;
+  width: 30px;
+  height: 22px;
+}
+.legend .min {
+  float: left;
+  padding-bottom: 5px;
+}
+.legend .max {
+  float: right;
+}
+
+h1 {
+  text-align: center;
+}
diff --git a/static/polylineMap.js b/static/polylineMap.js
@@ -1,10 +1,15 @@
 
-
 // initialize url/ file path
+const url = 'https://raw.githubusercontent.com/brupps/project_3/main/static/data.geojson';
+
+// display the data
+d3.json(url).then(function(response){
+    console.log(response);
+});
 
 // create the map
-let myMap = L.map('// location name',{
-    center: [],
+let myMap = L.map('map',{
+    center: [39.8283, -98.5795],
     zoom: 5
 });
 
@@ -14,31 +19,52 @@ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 }).addTo(myMap);
 
 // create a for loop to gather start and end coords from the json
-for (let i=0; i < data.length; i++){
-
-// initialize variables to store coords and line info
-let startCoords = [];
-let endCoords = [];
-let line = [];
-
-    // only pull data from EF5 tornadoes
-    if (data[i].tor_f_scale == 'EF5'){
-
-        startCoords.push([data[i].begin_lat, data[i].begin_lon]);
-        endCoords.push([data[i].end_lat, data[i].end_lon]);
-        line.push([startCoords, endCoords]);
-
-        let color = '';
-        if (depth > -10 && depth < 10){color = 'green';}
-        else if (depth >= 10 && depth < 30){color = 'yellow';}
-        else if (depth >= 30 && depth < 50){color = 'orange';}
-        else if (depth >= 50 && depth < 70){color = 'red';}
-        else if (depth >= 70 && depth < 90){color = 'purple';}
-        else if (depth > 90){color = 'black';}
-
-        L.polyline(line, {
-            color: color
-        }).bindPopup(`location, property damage`).addTo(myMap);
+d3.json(url).then(function(data){
+
+for (let i=0; i < data.features.length; i++){
+
+    // initialize variables to store coords and line info
+    let startCoords = [];
+    let endCoords = [];
+    let line = [];
+
+    startCoords.push([data.features[i].properties.LAT, data.features[i].properties.LON]);
+    endCoords.push([data.features[i].properties.END_LAT, data.features[i].properties.END_LON]);
+    line.push([startCoords, endCoords]);
+
+    let color = '';
+        if (data.features[i].properties.TOR_F_SCAL == '3'){color = 'rgb(19, 235, 45)';}
+        else if (data.features[i].properties.TOR_F_SCAL == '4'){color = 'rgb(242, 24, 31)';}
+        else if (data.features[i].properties.TOR_F_SCAL == '5'){color = 'rgb(186, 174, 0)';}
+
+    L.polyline(line, {
+        color: color
+    }).bindPopup(`year, location, property damage`).addTo(myMap);
+
+    console.log(line);
+
     };
-};
-// set up the legend 
+});
+
+
+// set up the legend 
+var legend = L.control({position: 'bottomright'});
+  legend.onAdd = function() {
+    var div = L.DomUtil.create('div', 'info legend')
+    var limits = ['EF3', 'EF4', 'EF5'];
+    var colors = ['rgb(19, 235, 45)', 'rgb(242, 24, 31)', 'rgb(186, 174, 0)'];
+    var labels = [];
+
+    // Add min & max
+    div.innerHTML = '<h2>EF rating</h2>'+'<div class="labels"><div class="min">' + limits[0] + '</div> \
+			<div class="max">' + limits[limits.length - 1] + '</div></div>'
+
+    limits.forEach(function (limit, index) {
+      labels.push('<li style="background-color: ' + colors[index] + '"></li>')
+    })
+
+    div.innerHTML += '<ul>' + labels.join('') + '</ul>'
+    return div;
+  };
+
+  legend.addTo(myMap);