MUSA611-CPLN692-spring2020 · cathyxuhyx · Mar 6, 2020 · Mar 6, 2020
diff --git a/assignment/Week5_VisualDesign.PNG b/assignment/Week5_VisualDesign.PNG
diff --git a/assignment/Week5_Wireframe.PNG b/assignment/Week5_Wireframe.PNG
diff --git a/assignment/index.html b/assignment/index.html
@@ -9,9 +9,29 @@
   <body>
     <!-- Sidebar -->
     <div class="sidebar">
-      <!-- =====================
-      Add elements in this space
-      ====================== -->
+      <h3 id="main-heading">websites to choose from:</h3>
+      <a href="https://raw.githubusercontent.com/MUSA611-CPLN692-spring2020/datasets/master/json/philadelphia-crime-snippet.json" target="_blank">Philadelphia Crime</a>
+      <br>
+      <a href="https://raw.githubusercontent.com/MUSA611-CPLN692-spring2020/datasets/master/json/philadelphia-solar-installations.json" target="_blank">Philadelphia Solar Installations</a>
+      <br>
+      <a href="https://raw.githubusercontent.com/MUSA611-CPLN692-spring2020/datasets/master/json/world-country-capitals.json" target="_blank">World Country Capitals</a>
+      <br>
+      <a href="https://raw.githubusercontent.com/CPLN690-MUSA610/datasets/master/json/philadelphia-bike-crashes-snippet.json" target="_blank">Philadelphia Bike Crashes</a>
+      <br>
+      <br>
+      <label id="text-label1" for="text-input1">URL of the dataset</label>
+      <input id="text-input1" class="input-text" type="text" placeholder="text here" value="https://raw.githubusercontent.com/MUSA611-CPLN692-spring2020/datasets/master/json/world-country-capitals.json">
+      <br>
+      <br>
+      <label id="text-label2" for="text-input2">Latitude key in the data</label>
+      <input id="text-input2" class="input-text" type="text" placeholder="text here" value="CapitalLatitude">
+      <br>
+      <br>
+      <label id="text-label3" for="text-input3">Longitude key in the data</label>
+      <input id="text-input3" class="input-text" type="text" placeholder="text here" value="CapitalLongitude">
+      <br>
+      <br>
+      <button>Run</button>
     </div>
     <!-- Map -->
     <div id="map" class="map"></div>

diff --git a/assignment/js/main.js b/assignment/js/main.js
@@ -1,3 +1,101 @@
 /* =====================
- Copy your code from Week 4 Lab 2 Part 2 part2-app-state.js in this space
+  Lab 2, part 2 - application state
+
+  Spatial applications aren't typically as simple as putting data on a map. In
+  addition, you'll usually need to change the stored data in response to user
+  input. This lab walks you through writing a set of functions that are capable
+  of building an interactive application.
+
+  First, we'll need to write a function for loading points onto the map. Choose
+  any dataset from part1 and write a function here to download it, parse it,
+  make it into markers, and plot it. You'll know you've succeeded when you can
+  see markers on the map.
+
+  NOTE 1: When we have added markers to the map in the past, we have used a line like:
+
+       L.marker([50.5, 30.5]).addTo(map);
+
+       This is accomplishing two goals. L.marker([50.5, 30.5]) makes a marker
+       and .addTo(map) adds that marker to the map. This task differs in that
+       you are being asked to create separate functions: one to create markers
+       and one to add them to the map.
+
+  (IMPORTANT!)
+  NOTE 2: These functions are being called for you. Look to the bottom of this file
+       to see where and how the functions you are defining will be used. Remember
+       that function calls (e.g. func();) which are equal to a value (i.e. you
+       can set a var to it: var result = func();) must use the 'return' keyword.
+
+       var justOne = function() {
+         return 1;
+       }
+       var one = justOne();
 ===================== */
+
+/* =====================
+ 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);
+
+var markers;
+// when button clicks, this happens
+$("button").click(function () {
+
+  var urltext = $("#text-input1").val();
+
+  // Use the data source URL from lab 1 in this 'ajax' function:
+  var downloadData = $.ajax(urltext);
+
+  // 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 latval, lngval;
+  var field2 = $("#text-input2").val();
+  var field3 = $("#text-input3").val();
+  var makeMarkers = function (data) {
+    addmarker = _.map(data, function (x) {
+      if(typeof(x[field2]) == 'number') {
+        latval = x[field2];
+        lngval = x[field3];
+      } else {
+        latval = Number(x[field2]);
+        lngval = Number(x[field3]);
+      }
+      return L.marker([latval, lngval]);
+    });
+    return addmarker; };
+
+  // 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); }); };
+
+  // Remove markers
+  var removeMarkers = function (marker) {
+    return _.map(marker, function (x) {map.removeLayer(x); }); };
+
+  downloadData.done(function (data) {
+      var parsed = parseData(data);
+      if (typeof(markers) !== "undefined") {
+        removeMarkers(markers);
+        markers = [];}
+
+      markers = makeMarkers(parsed);
+
+      plotMarkers(markers); });
+});
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("First Name");
+  $("#text-label2").text("Last Name");
+  $("#text-label3").text("Postal Code");
+  $("#number-label").text("Age");
+  $("#checkbox-label1").text("Student or Not");
+  $("#checkbox-label2").text("Lives in Center City");
+  $("#color-label").text("Favorite Color");
+  $('button').text("Plot");
+  //Task 2
+  $("#text-input1").val("Cathy");
+  $("#text-input2").val("Xu");
+  $("#text-input3").val("19104");
+  $("#numeric-input").val(23);
+  $("#cbox-input1").prop("checked", true);
+  $("#cbox-input2").prop("checked", true);
+  $("#color-input").val("#ea83b0");
+  //Task 3
+  var myObj = new Object();
+  myObj[$("#text-label1").text()] = $("#text-input1").val();
+  myObj[$("#text-label2").text()] = $("#text-input2").val();
+  myObj[$("#text-label3").text()] = $("#text-input3").val();
+  myObj[$("#number-label").text()] = $("#numeric-input").val();
+  myObj[$("#checkbox-label1").text()] = $("#cbox-input1").val();
+  myObj[$("#checkbox-label2").text()] = $("#cbox-input2").val();
+  myObj[$("#color-label").text()] = $("#color-input").val();
+  //console.log(myObj);
+  //return myObj;
+  //Task 4
+  $('#text-input1').prop('disabled', false);
+  $('#text-input2').prop('disabled', false);
+  $('#text-input3').prop('disabled', false);
+  $('#numeric-input').prop('disabled', false);
+  $('#cbox-input1').prop('disabled', false);
+  $('#cbox-input2').prop('disabled', false);
+  $('#color-input').prop('disabled', false);
+  //Task 5
+  $("button" ).click(function() {
+    var myObj = new Object();
+    myObj[$("#text-label1").text()] = $("#text-input1").val();
+    myObj[$("#text-label2").text()] = $("#text-input2").val();
+    myObj[$("#text-label3").text()] = $("#text-input3").val();
+    myObj[$("#number-label").text()] = $("#numeric-input").val();
+    myObj[$("#checkbox-label1").text()] = $("#cbox-input1").prop("checked");
+    myObj[$("#checkbox-label2").text()] = $("#cbox-input2").prop("checked");
+    myObj[$("#color-label").text()] = $("#color-input").val();
+    console.log(myObj);
+  });
+  //Task 6
+  $("#color-input").after("<br>","<br>","<label id='number-label2' for='numeric-input2'>Latitude</label>",
+  '<input type="number" id="numeric-input2">',"<br>","<br>","<label id='number-label3' for='numeric-input3'>Longitude</label>",
+  '<input type="number" id="numeric-input3">',"<br>","<br>");
+  $("#numeric-input2").val(39.952361);
+  $("#numeric-input3").val(-75.163593);
+  $("#text-label3").text("Description");
+  $("#text-label3").val('This is a description.');
+  $("button" ).click(function() {
+    var marker = L.circleMarker([$("#numeric-input2").val(), $("#numeric-input3").val()], {
+      color: $("#color-input").val()});
+    marker.addTo(map);
+    marker.bindPopup($("#text-label3").val()).openPopup();
+  });
 });