From a33da8555cb199c93c5ef7d7c3be53bc8bbf2ea1 Mon Sep 17 00:00:00 2001
From: JoyceLiu <57802310+joyceyuqiliu@users.noreply.github.com>
Date: Thu, 5 Mar 2020 22:16:25 -0500
Subject: [PATCH] hw6

Has a few fix left to do on the marker part in main.js.
Not sure if the last week's hw was received through the "sharing option" on Figma? This was completed by Thursday last week.
---
 .DS_Store             | Bin 0 -> 6148 bytes
 assignment/index.html |  12 ++++++
 assignment/js/main.js |  90 ++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 102 insertions(+)
 create mode 100644 .DS_Store

diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..3bbd7ee413f7580a2c5116f7d8eac6fc7fcd8375
GIT binary patch
literal 6148
zcmeHKIc~#13?v;Dg59`GxnIZ+7KZZze;|hp!+;VOPI^^&SDu#PQN)nl$&D}+$l0Yh
zD`*N)6cOEgcTXZ~5ozIu@?&9acHewti_9nxjx!GODIc;&{2EnXPZ)P8uX4t9{Lk;s
z@BQ29)LQ|K3Qz$mKn17(6_`wcY_08TvJ-g_6`%rhQNX?r1#Vaqhd}>yAovIXY>;-t
z+Gh!1u>`Ot4uQzPG^oI!YK|BhbmU9c)x;q%=%P7%Xg*nULQ#J@&M#grS_2uW02R1Y
z;32ka>;KR28}t7qi90Gl1!kpyHrw5HgICJlI(j+lwFUkHx0+wL8P-lg@OBLJc8ra+
e<3}%wx?*eGuZcsT(~);NkUs;a3yligTY*1c+7+z;

literal 0
HcmV?d00001

diff --git a/assignment/index.html b/assignment/index.html
index 42cf30d..90352aa 100644
--- a/assignment/index.html
+++ b/assignment/index.html
@@ -12,6 +12,18 @@
       <!-- =====================
       Add elements in this space
       ====================== -->
+      <label id="url" for="enter-url">URL</label>
+      <input id="enter-url" class="input-text" type="text" placeholder="url" required>
+      <br> <br>
+      <label id="lat" for="enter-lat">Latitude</label>
+      <input id="enter-lat" class="input-text" type="text" placeholder="latitude" required>
+      <br> <br>
+      <label id="long" for="enter-long">Longitude</label>
+      <input id="enter-long" class="input-text" type="text" placeholder="longitude" required>
+      <br>
+      <button>
+        <input type="submit" value="run">
+      </button>
     </div>
     <!-- Map -->
     <div id="map" class="map"></div>
diff --git a/assignment/js/main.js b/assignment/js/main.js
index c43a026..f26234d 100644
--- a/assignment/js/main.js
+++ b/assignment/js/main.js
@@ -1,3 +1,93 @@
 /* =====================
  Copy your code from Week 4 Lab 2 Part 2 part2-app-state.js in this space
 ===================== */
+// Use the data source URL from lab 1 in this 'ajax' function:
+var downloadData = $.ajax("https://raw.githubusercontent.com/MUSA611-CPLN692-spring2020/datasets/master/json/philadelphia-solar-installations.json");
+
+// Write a function to prepare your data (clean it up, organize it
+// as you like, create fields, etc)
+var parseData = function (data) {
+  for (i=0; i<data.length; i++){
+  return JSON.parse(data);}
+  }
+
+
+// Write a function to use your parsed data to create a bunch of
+// marker objects (don't plot them!)
+var makeMarkers = function(data) {
+  for (i=0; i< data.length; i++){
+  return L.marker([data[i].lat, data[i].log]);
+  var markers = [];
+  markers.push(m);
+}}
+
+// Now we need a function that takes this collection of markers
+// and puts them on the map
+var plotMarkers = function(m) {
+  _.map(m, function(loop){
+    loop.addTo(map);
+   }
+   };
+
+
+
+// At this point you should see a bunch of markers on your map if
+// things went well.
+// Don't continue on until you can make them appear!
+
+/* =====================
+  Define the function removeData so that it clears the markers you've written
+  from the map. You'll know you've succeeded when the markers that were
+  previously displayed are (nearly) immediately removed from the map.
+
+  In Leaflet, the syntax for removing one specific marker looks like this:
+
+  map.removeLayer(marker);
+
+  In real applications, this will typically happen in response to changes to the
+  user's input.
+===================== */
+
+// Look to the bottom of this file and try to reason about what this
+// function should look like
+var removeMarkers = function(m) {
+  _map.(markers, function(loop){
+    map.removeLayer(loop);
+  }
+};
+
+/* =====================
+  Optional, stretch goal
+  Write the necessary code (however you can) to plot a filtered down version of
+  the downloaded and parsed data.
+
+  Note: You can add or remove from the code at the bottom of this file
+  for the stretch goal.
+===================== */
+
+/* =====================
+ Leaflet setup - feel free to ignore this
+===================== */
+
+var map = L.map('map', {
+  center: [39.9522, -75.1639],
+  zoom: 14
+});
+var Stamen_TonerLite = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.{ext}', {
+  attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+  subdomains: 'abcd',
+  minZoom: 0,
+  maxZoom: 20,
+  ext: 'png'
+}).addTo(map);
+
+/* =====================
+ CODE EXECUTED HERE!
+===================== */
+
+downloadData.done(function(data) {
+  var parsed = parseData(data);
+  var markers = makeMarkers(parsed);
+  plotMarkers(markers);
+  removeMarkers(markers);
+});