MUSA611-CPLN692-spring2020 · xiaoranw8 · Mar 10, 2020 · Mar 10, 2020 · Mar 10, 2020
diff --git a/assignment/index.html b/assignment/index.html
@@ -9,9 +9,19 @@
   <body>
     <!-- Sidebar -->
     <div class="sidebar">
-      <!-- =====================
-      Add elements in this space
-      ====================== -->
+      <label id="text-label1" for="text-input1">URL</label>
+      <input id="text-input1" class="input-text" type="text" placeholder="text here" value="input the URL" disabled>
+      <br>
+      <br>
+      <label id="number-label1" for="number-label1">The latitude</label>
+      <input id="numeric-input1" type="number" placeholder="text here" value="input lat" disabled>
+      <br>
+      <br>
+      <label id="number-label2" for="number-label2">The longitude</label>
+      <input id="numeric-input2" type="number" placeholder="text here" value="input lng" disabled>
+      <br>
+      <br>
+      <button>A Button</button>
     </div>
     <!-- Map -->
     <div id="map" class="map"></div>

diff --git a/assignment/js/main.js b/assignment/js/main.js
@@ -1,3 +1,124 @@
 /* =====================
  Copy your code from Week 4 Lab 2 Part 2 part2-app-state.js in this space
 ===================== */
+
+// task 1
+
+// 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-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(downloadData){
+  return JSON.parse(downloadData);
+};
+
+// Write a function to use your parsed data to create a bunch of
+// marker objects (don't plot them!)
+var makeMarkers = function(parsedData){
+  return _.map(parsedData, function(marker){
+    return L.marker([marker.LAT, marker.LNG]);
+  });
+};
+
+// Now we need a function that takes this collection of markers
+// and puts them on the map
+var plotMarkers = function(marker) {
+  _.each(marker, function(x){
+    return x.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(x){
+    map.removeLayer(x);
+  });
+};
+
+/* =====================
+  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); // search Leaflet doc how to remove a marker
+});
+*/
+
+// task 3
+
+$(document).ready(function() {
+  $('#text-input1').val('https://raw.githubusercontent.com/MUSA611-CPLN692-spring2020/datasets/master/json/philadelphia-bike-crashes-snippet.json');
+  $('#numeric-input1').val('lat');
+  $('#numeric-input2').val('lng');
+
+  $("#text-input1").prop('disabled', false);
+  $("#numeric-input1").prop('disabled', false);
+  $("#numeric-input2").prop('disabled', false);
+
+  $('button').click(function() {
+    var readInputVals = {
+      'url': $('#text-input1').val(),
+      'lat': $('#numeric-input1').val(),
+      'lng': $('#numeric-input2').val('lng')
+    };
+    console.log(readInputVals);
+  });
+
+  downloadData.done(function(data) {
+    var parsed = parseData(data);
+    var markers = makeMarkers(parsed);
+    plotMarkers(markers);
+  });
+
+});
diff --git a/assignment/representation.jpg b/assignment/representation.jpg
diff --git a/assignment/visualdesign.jpg b/assignment/visualdesign.jpg
diff --git a/example/example1/js/main.js b/example/example1/js/main.js
@@ -10,6 +10,7 @@ getAndParseData();
 $('button#my-button').click(function(e) {
   appState.numericField1 = $('#num1').val();
   console.log("numericField1", appState.numericField1);
+  debugger; 
 
   appState.numericField2 = $('#num2').val();
   console.log("numericField2", appState.numericField2);

diff --git a/lab/js/part1-jquery.js b/lab/js/part1-jquery.js
@@ -171,5 +171,66 @@ 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
-});
+
+  // task 1
+  $('#text-label1').text('Enter your name');
+  $('#text-label2').text('Enter your user ID');
+  $('#text-label3').text('Your cup preference');
+  $('#number-label1').text('Your latitude');
+  $('#number-label2').text('Your longtitude');
+  $('#checkbox-label1').text('Decaf');
+  $('#checkbox-label2').text('Pick-up');
+  $('#color-label').text('Select your color');
+  $('button').text('Find');
+
+
+  // task 2
+  $('#text-input1').val('The name');
+  $('#text-input2').val('The ID');
+  $('#text-input3').val('regular');
+  $('#numeric-input1').val(39.952998);
+  $('#numeric-input2').val(-75.192254);
+  $('#cbox-input1').prop('checked',false);
+  $('#cbox-input2').prop('checked',true);
+  $('#color-input').val('#55F19F');
+
+  $("#description").val('The location');
+
+
+  // task 4
+  $('#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);
+  $('#color-input').prop('disabled', false);
+  $('#description').prop('disabled', false);
+
+  // task 5
+  $( "Button" ).click(function() {
+    // task 3
+    var readInputVals = {
+      'name': $('#text-input1').val(),
+      'ID': $('#text-input2').val(),
+      'cup': $('#text-input3').val(),
+      'LAT': $('#numeric-input1').val(),
+      'LNG': $('#numeric-input2').val(),
+      'dcaf': $('#cbox-input1').prop('checked'),
+      'pickup': $('#cbox-input2').prop('checked'),
+      'color': $('#color-input').val(),
+      'description': $("#description").val()
+    };
+
+    console.log(readInputVals);
+
+    // task 6
+    L.circleMarker([readInputVals.LAT, readInputVals.LNG], {
+      color: readInputVals[$('#color-input').val()],
+      fillColor: readInputVals[ $('#color-input').val()],
+      radius: 20
+    }).addTo(map).circle.bindPopup(responses.description);
+  });
+
+ });
diff --git a/lab/part1-jquery.html b/lab/part1-jquery.html
@@ -12,33 +12,37 @@
     <!-- Sidebar -->
     <div class="sidebar">
       <h1 id="main-heading">Main Heading</h1>
-      <label id="text-label1" for="text-input1">This is the first text input</label>
+      <label id="text-label1" for="text-input1">Your name</label>
       <input id="text-input1" class="input-text" type="text" placeholder="text here" value="some title" disabled>
       <br>
       <br>
-      <label id="text-label2" for="text-input2">This is the second text input</label>
+      <label id="text-label2" for="text-input2">Your ID</label>
       <input id="text-input2" class="input-text" type="text" placeholder="text here" value="some name" disabled>
       <br>
       <br>
-      <label id="text-label3" for="text-input3">This is the third text input</label>
+      <label id="text-label3" for="text-input3">Cup size</label>
       <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="number-label1">Your lat?</label>
+      <input id="numeric-input1" type="number" disabled>
+      <br>
+      <br>
+      <label id="number-label2" for="number-label2">Your lng?</label>
+      <input id="numeric-input2" type="number" disabled>
       <br>
       <br>
       <!-- BE CAREFUL WITH CHECKBOXES! The jQuery API handles checkboxes differently than other inputs! -->
-      <label id="checkbox-label1" for="cbox-input1">This is the first checkbox</label>
-      <input type="checkbox" id="cbox-input1" disabled>
+      <label id="checkbox-label1" for="cbox-input1">Decaf</label>
+      <input id="cbox-input1" type="checkbox" disabled>
       <br>
       <br>
-      <label id="checkbox-label2" for="cbox-input2">This is the second checkbox</label>
-      <input type="checkbox" id="cbox-input2" value="second_checkbox" disabled>
+      <label id="checkbox-label2" for="cbox-input2">Pick-up</label>
+      <input id="cbox-input2" type="checkbox" value="second_checkbox" disabled>
       <br>
       <br>
-      <label id="color-label" for="color-input">This is a color input</label>
-      <input type="color" id="color-input">
+      <label id="color-label" for="color-input">Choose your color</label>
+      <input id="color-input" type="color" disabled>
       <br>
       <button>A Button</button>
     </div>