MUSA611-CPLN692-spring2020 · djzzhu · Mar 6, 2020
diff --git a/assignment/README.md b/assignment/README.md
@@ -45,4 +45,3 @@ event on it. When the button is clicked, it should run a function that selects
 the three input fields, checks their values, and assigns those values to
 variables. Those variables should be used in your application to replace
 previously hardcoded data.
-
diff --git a/assignment/figma 1.png b/assignment/figma 1.png
diff --git a/assignment/figma 2.png b/assignment/figma 2.png
diff --git a/assignment/index.html b/assignment/index.html
@@ -9,9 +9,23 @@
   <body>
     <!-- Sidebar -->
     <div class="sidebar">
-      <!-- =====================
-      Add elements in this space
-      ====================== -->
+
+            <h1 id="main-heading">Dataset Map</h1>
+            <label id="linkurl" for="link-input">dataset URL</label>
+            <input id="link-input" class="link-text" type="link" placeholder="link here" value="some link" Enable>
+            <br>
+            <br>
+            <label id="number-label1" for="numeric-input1">latitude key</label>
+            <input type="number" id="numeric-input1" placeholder="longitude" Enable>
+            <br>
+            <br>
+            <label id="number-label2" for="numeric-input2">longitude key</label>
+            <input type="number" id="numeric-input2" placeholder="latitude" Enable>
+            <br>
+            <br>
+            <button id= 'button1'>Show</button>
+            show the marker on the map
+
     </div>
     <!-- Map -->
     <div id="map" class="map"></div>

diff --git a/assignment/js/main.js b/assignment/js/main.js
@@ -1,3 +1,103 @@
 /* =====================
  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("http://raw.githubusercontent.com/MUSA611-CPLN692-spring2020/datasets/master/json/philadelphia-bike-crashes-snippet.json");
+
+// Write a function to prepare your data (clean it up, organize it
+// as you like, create fields, etc)
+var parseData = function(data) {
+  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) {
+  return _.map(data,function (x) {
+  return L.marker([x.LAT,x.LNG])
+});
+};
+
+// Now we need a function that takes this collection of markers
+// and puts them on the map
+var plotMarkers = function(markers) {
+  for(var i = 0; i < markers.length; i++){
+    markers[i].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(marker) {
+  return _.map(marker,function(dot){
+    map.removeLayer(dot);
+  })
+};
+
+/* =====================
+  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!
+===================== */
+
+
+
+
+$('#button1').click(function(){
+  url = $('#link-input').val();
+  console.log(url);
+
+  lat = $('#numeric-input1').val();
+  console.log(lat);
+
+  long = $('#numeric-input2').val();
+  console.log(long);
+
+$.ajax(url).done(function(data) {
+    var parsed = parseData(data);
+    var markers = makeMarkers(parsed);
+    plotMarkers(markers);
+  });
+})
diff --git a/example/example1/index.html b/example/example1/index.html
@@ -7,15 +7,16 @@
   <body>
 
     <!--Left Panel-->
-    <div style="position: absolute; left: 0px; width: 400px; top: 0; bottom: 0;">
+    <div id= "non" style="position: absolute; left: 0px; width: 400px; top: 0; bottom: 0;">
       <br>
       Numeric filter: <input id="num1" type="number" name="num1" value=""> to <input id="num2" type="number" name="num2" value="">
       <br>
       String filter: <input id="string" type="text">
       <br>
       Boolean filter: <input id="boolean" type="checkbox">
       <br>
-      <button id="my-button">Plot Data</button>
+      <button id="my-button">Plot Data
+      </button>
     </div>
     <!-- Map -->
     <div id="map" style="position: absolute; right: 0; left: 400px; top: 0; bottom: 0;"></div>
@@ -24,6 +25,11 @@
     <script src="js/leaflet.js"></script>
     <script src="js/underscore.js"></script>
     <script src="js/jquery-2.2.0.js"></script>
+        <script>
+          $(function(){
+            $("non").hide();
+          })
+        </script>
 
     <!-- Javascript Code: Notice that code is executed in the order of import -->
     <script src="js/setup.js"></script>

diff --git a/example/example1/js/application.js b/example/example1/js/application.js
@@ -46,3 +46,8 @@ var plotData = function() {
     marker.addTo(map);
   });
 };
+
+
+$(function(){
+  $("non").hide();
+})
diff --git a/example/example2/index.html b/example/example2/index.html
@@ -12,7 +12,6 @@
 <html>
   <head>
     <!-- CSS Imports -->
-    <link rel="stylesheet" href="css/reset.css" />
     <link rel="stylesheet" href="css/grid.css" />
     <link rel="stylesheet" href="css/style-part2.css" />
   </head>

diff --git a/lab/js/part1-jquery.js b/lab/js/part1-jquery.js
@@ -94,7 +94,11 @@ var Stamen_TonerLite = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/ton
     you might want to include a name, an address, an age, a couple of boolean characteristics, and a
     favorite color. Don't spend too much time on thinking about the perfect object to represent with
     this form, just about anything will do.
+===================== */
+
 
+
+/* =====================
   Task 2: Setting (writing) input values
     *NOTE*: An input's value is not the same as an HTML element's text. We use $(selector).val() as
             opposed to $(selector).text() in this case.
@@ -171,5 +175,68 @@ var Stamen_TonerLite = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/ton
 // the function passed to `ready` until the HTML document is fully loaded and all scripts have
 // been interpreted. It is, therefore, an example of asynchronous behavior.
 $(document).ready(function() {
-  // Do your stuff here
+   $('#text-label1').text('bike');
+   $('#text-label2').text('year');
+   $('#text-label3').text('address');
+   $('#number-label1').text('lat');
+   $('#number-label2').text('long');
+   $('#checkbox-label1').text('drinking');
+   $('#checkbox-label2').text('speeding');
+   $('#color-label').text('lable');
+
+   $('#text-input1').val('mode');
+   $('#text-input2').val('2016');
+   $('#text-input3').val('4114 powelton');
+   $('#numeric-input1').val(40.00);
+   $('#numeric-input2').val(-75.08);
+   $('#cbox-input1').prop('checked',false);
+   $('#cbox-input2').prop('checked',true);
+
+
+
+   var input = {
+     'bike': $('#text-input1').val(),
+      'year': $('#text-input2').val(),
+      'address': $('#text-input3').val(),
+      'lat':$('#numeric-input1').val(),
+      'long':$('#numeric-input2').val(),
+      'drinking':$('#cbox-input1').prop('checked'),
+      'speeding':$('#cbox-input2').prop('checked')
+   }
+   console.log(input)
+
+
+   $('#text-input1').prop('disabled',false);
+   $('#text-input2').prop('disabled',false);
+   $('#text-input3').prop('disabled',false);
+   $('#numeric-input1').prop('disabled',false);
+   $('#numeric-input2').prop('disabled',false);
+   $('#cbox-input1').prop('disabled',false);
+   $('#cbox-input2').prop('disabled',false);
+
+   $('button#button1').click(function(){
+     var input = {
+       'bike': $('#text-input1').val(),
+        'year': $('#text-input2').val(),
+        'address': $('#text-input3').val(),
+        'lat':$('#numeric-input1').val(),
+        'long':$('#numeric-input2').val(),
+        'drinking':$('#cbox-input1').prop('checked'),
+        'speeding':$('#cbox-input2').prop('checked'),
+        'lable': $('#color-input').val()
+     }
+     console.log(input)
+
+     if (input['lat'] == ''){
+       input.lat = 40.00;
+     }
+     if (input['long'] == ''){
+       input.long = -75.08;
+     }
+     if(input['bike'] == ''){
+       input['bike'] = 'mode'
+     }
+
+    marker = L.marker([input.lat, input.lon]).addTo(map).bindPopup(input['bike']);
+   })
 });
diff --git a/lab/part1-jquery.html b/lab/part1-jquery.html
@@ -24,8 +24,12 @@ <h1 id="main-heading">Main Heading</h1>
       <input id="text-input3" class="input-text" type="text" placeholder="text here" value="some address" disabled>
       <br>
       <br>
-      <label id="number-label" for="numeric-input">This is a numeric input</label>
-      <input type="number" id="numeric-input" disabled>
+      <label id="number-label1" for="numeric-input1">This is a numeric input</label>
+      <input type="number" id="numeric-input1" disabled>
+      <br>
+      <br>
+      <label id="number-label2" for="numeric-input2">This is a numeric input</label>
+      <input type="number" id="numeric-input2" disabled>
       <br>
       <br>
       <!-- BE CAREFUL WITH CHECKBOXES! The jQuery API handles checkboxes differently than other inputs! -->
@@ -40,7 +44,9 @@ <h1 id="main-heading">Main Heading</h1>
       <label id="color-label" for="color-input">This is a color input</label>
       <input type="color" id="color-input">
       <br>
-      <button>A Button</button>
+      <button id= 'button1'>A Button</button>
+
+
     </div>
     <!-- Map -->
     <div id="map" class="map"></div>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -45,4 +45,3 @@ event on it. When the button is clicked, it should run a function that selects
		the three input fields, checks their values, and assigns those values to
		variables. Those variables should be used in your application to replace
		previously hardcoded data.