Commit

z4ab · Jul 30, 2022 · 7b57af0 · 7b57af0
1 parent 606fac5
commit 7b57af0
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 56 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/about/index.html b/about/index.html
@@ -49,20 +49,10 @@
   </div>
 
   <div class="grid-item-2">
-    <img class = about-image src="https://o.remove.bg/downloads/135bb76a-9dc0-4c4b-ae96-f6c097343a06/kisspng-interstate-commerce-commission-commerce-clause-wik-heat-map-5b138b52da34f5.2199890215280075068938-removebg-preview.png" alt="Map Signatures" height = 100px>
+    <img class = about-image src="/Assets/MAP.png" alt="Map Signatures" height = 100px>
     <p class="desc">Visual map representation using opacity signatures for areas of higher usage.</p>
   </div>
 </div>
-<div>
-    <style>
-        body {
-          background-image: url("https://alberici.com/wp-content/uploads/2017/10/New_Power_Station.jpg");
-          background-repeat: no-repeat;
-          background-attachment: fixed;
-          background-size: cover;
-        }
-        </style>
-</div>
 </body>
 
 

diff --git a/assets/map.png b/assets/map.png
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <link rel="stylesheet" href="style.css">
-    <link rel="icon" href="assets/logo.png">
+    <link rel="icon" href="/assets/logo.png">
     <title>E-Mission Brampton</title>
     <link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
 </head>

diff --git a/map/index.html b/map/index.html
@@ -27,6 +27,11 @@ <h1 id="locname">Location Name</h1>
       </p>
       <img id="placeimg" src="https://lh5.googleusercontent.com/p/AF1QipN18s6HXvah8Kt6jQEuZ5_Sg335d4_3tfauuaQ_=w408-h272-k-no" alt="">
     </div>
+    <div id="selection">
+      <input type="radio" name="select" id="ghg" > Green House Gas Emissions <br>
+      <input type="radio" name="select" id="elec"> Electricity Usage <br>
+      <input type="radio" name="select" id="nat"> Fossil Fuel Consumption
+    </div>
 
     <!-- 
      The `defer` attribute causes the callback to execute after the full HTML

diff --git a/map/index.js b/map/index.js
@@ -1,22 +1,30 @@
-
-
 let map;
 let url = "https://services3.arcgis.com/rl7ACuZkiFsmDA2g/arcgis/rest/services/Environment/FeatureServer/0/query?where=1%3D1&outFields=*&outSR=4326&f=json"
 
 const req = new Request(url)
 let arr = [];
 let ghgsort = [];
 
+let inps = document.getElementsByName("select")
+let view = "ghg"; 
+
+document.addEventListener('change', (ev) => {
+  view = ev.target.id
+  main()
+})
+
 function initMap() {
   map = new google.maps.Map(document.getElementById("map"), {
     center: { lat: 43.7315, lng: -79.7624 },
-    zoom: 12,
+    zoom: 13,
+    mapTypeId: 'satellite'
   });
   for (let i = 0; i < arr.length; i++) {
     const e = arr[i];
     debug.log(e);
   }
 }
+function main() {
 window.initMap = initMap;
 fetch(req)
   .then((response) => {
@@ -29,29 +37,35 @@ fetch(req)
   .then((response) => {
     arr = response.features
     ghgsort = arr.slice()
-    ghgsort.sort((a,b) => (a.attributes.GHG_EMISSIONS_KG > b.attributes.GHG_EMISSIONS_KG) ? 1 : ((b.attributes.GHG_EMISSIONS_KG > a.attributes.GHG_EMISSIONS_KG) ? -1 : 0))
+    if (view == "ghg") {
+      ghgsort.sort((a,b) => (a.attributes.GHG_EMISSIONS_KG > b.attributes.GHG_EMISSIONS_KG) ? 1 : ((b.attributes.GHG_EMISSIONS_KG > a.attributes.GHG_EMISSIONS_KG) ? -1 : 0))
+    } else if (view == "elec") {
+      ghgsort.sort((a,b) => (a.attributes.ELECTRICITY_KWH > b.attributes.ELECTRICITY_KWH) ? 1 : ((b.attributes.ELECTRICITY_KWH > a.attributes.ELECTRICITY_KWH) ? -1 : 0))
+    } else if (view == "nat") {
+      ghgsort.sort((a,b) => (a.attributes.NATURAL_GAS_M3 > b.attributes.NATURAL_GAS_M3) ? 1 : ((b.attributes.NATURAL_GAS_M3 > a.attributes.NATURAL_GAS_M3) ? -1 : 0))
+    }
+    console.log(ghgsort)
     ghgsort.reverse()
     arr.forEach(e => {
       var polygon = new google.maps.Circle({
-        strokeColor: "#FF0000",
         strokeOpacity: 0.1,
         strokeWeight: 2,
-        fillColor: "#FF0000",
-        fillOpacity: 0.35,
+        fillOpacity: 0.15,
         map,
         center: { lat: e.geometry.y, lng: e.geometry.x },
-        radius: 50,
+        radius: 200,
       });
       let ghg = e.attributes.GHG_EMISSIONS_KG
       let ghgi = ghgsort.findIndex((el) => el.attributes.GHG_EMISSIONS_KG == ghg)
+      var filop = 0.1
       if (ghgi < 178) {
-        polygon.setOptions({fillColor: "#FF0000"}) 
+        polygon.setOptions({fillColor: "#FF0000", strokeColor: "#FF0000", fillOpacity: filop}) 
       } else if (ghgi < 178*2) {
-        polygon.setOptions({fillColor: "#FFA500"}) 
+        polygon.setOptions({fillColor: "#FFA500", strokeColor: "#FFA500", fillOpacity: filop}) 
       } else if (ghgi < 178*3) {
-        polygon.setOptions({fillColor: "#FFFF00"}) 
+        polygon.setOptions({fillColor: "#FFFF00", strokeColor: "#FFFF00", fillOpacity: filop}) 
       } else {
-        polygon.setOptions({fillColor: "#00FF00"}) 
+        polygon.setOptions({fillColor: "#00FF00", strokeColor: "#00FF00", fillOpacity: filop}) 
       }
       var infoWindow = new google.maps.InfoWindow();
       google.maps.event.addListener(polygon, 'mouseover', function (i) {
@@ -75,3 +89,5 @@ fetch(req)
   }).catch((error) => {
     console.error(error);
   });
+}
+main()
diff --git a/style.css b/style.css
@@ -12,7 +12,7 @@ header{
   width: 100vw;
   height: 200px;
   border-bottom: solid 1px black;
-  background-color: black;
+  background-image: url("https://www.brampton.ca/EN/City-Hall/News/PublishingImages/Banner.jpg");
   display: inline-block;
 }
 
@@ -61,56 +61,33 @@ header p{
 }
 
 .grid-item {
-  background-color: white;
-  border: 2px solid black;
+  background-color: black;
+  border: 2px solid white;
   font-size: 20px;
   text-align: center;
   padding-top: 5px;
 }
 
 .grid-item-2 {
-  border: 3px dashed grey;
+  background-color: black;
+  color: white;
+  border: 2px solid white;
   height: 350px;
 }
 
 a {
-  color: black;
+  color: white;
   text-decoration: none; 
 }
 
 a:hover {
   text-decoration: underline;
 }
 
-#panel {
-  background-color: gray;
-  position:absolute;
-  top: 250px;
-  right: 10px;
-  height: 100%;
-  width: 25%;
-}
-
 img {
   pointer-events: none,
 }
 
-div.gallery {
-  margin: 5px;
-  border: 1px solid #ccc;
-  float: left;
-  width: 180px;
-}
-
-div.gallery:hover {
-  border: 1px solid #777;
-}
-
-div.gallery img {
-  width: 100%;
-  height: auto;
-}
-
 .desc {
   padding: 15px;
   text-align: center;
@@ -126,15 +103,43 @@ div.gallery img {
   padding-top: 50px;
   padding-left: 15%;
   padding-bottom: 50px;
+  background-image: url("https://www.azocleantech.com/images/news/ImageForNews_29061_16159134791065461.jpg");
+  background-repeat: no-repeat;
+  background-attachment: fixed;
 }
 
 fieldset {
   width: 80%;
   text-align: center;
-  border-style: bold;
-  border-width: 10px;
+  border-style: dashed;
+  border-width: 5px;
+  border-color: black;
   padding-top: 5px;
   padding-left: 5px;
   padding-bottom: 5px;
   padding-right: 5px;
+}
+
+#selection{
+  background-color: white;
+  position: absolute;
+  border-radius: 15px;
+  bottom: -200px;
+  display: inline-block;
+  left: 10px;
+  padding-left: 8px;
+  padding-top: 3px;
+  padding-right: 3px;
+}
+
+#panel {
+  background-color: white;
+  position:absolute;
+  top: 250px;
+  right: 10px;
+  height: 100%;
+  width: 25%;
+  padding-left: 3px;
+  padding-top: 3px;
+  padding-right: 3px;
 }