MUSA611-CPLN692-spring2020 · Shuchangd · Feb 28, 2020 · Mar 4, 2020 · Mar 4, 2020 · Mar 6, 2020
diff --git a/assignment/framework.png b/assignment/framework.png
diff --git a/assignment/homepage.png b/assignment/homepage.png
diff --git a/assignment/index.html b/assignment/index.html
@@ -8,11 +8,30 @@
   </head>
   <body>
     <!-- Sidebar -->
-    <div class="sidebar">
-      <!-- =====================
-      Add elements in this space
-      ====================== -->
+    <div class="sidebar" style="position: absolute; left: 0px; width: 25%; top: 0; bottom: 0;
+    background-color: #e6e6e6; color: #343e47;">
+      <h1 id="main-heading">Customize Data Source</h1>
+      <label id="url-label" >Data Source</label>
+      <input id="url" class="input-text" type="text" placeholder="Input Data URL" value = "" enabled>
+      <br>
+      <br>
+      <label id="lat-label" >Latitude &nbsp &nbsp &nbsp</label>
+      <input id="lat" class="input-text" type="text" placeholder="Input latitude key" value = "" enabled>
+      <br>
+      <br>
+      <label id="lon-label" for="text-input3">Longitude &nbsp &nbsp</label>
+      <input id="lon" class="input-text" type="text" placeholder="Input longitude key" value = "" enabled>
+      <br>
+      <br>
+      <label id="value-label" for="text-input3">Value Field &nbsp &nbsp</label>
+      <input id="value" class="input-text" type="text" placeholder="Input value field" value = "" enabled>
+      <br>
+      <br>
+      <br>
+      <button id = "my-button">Plot Data</button>
+      <br>
     </div>
+
     <!-- Map -->
     <div id="map" class="map"></div>
     <!-- Javascript Imports -->

diff --git a/assignment/js/main.js b/assignment/js/main.js
@@ -1,3 +1,82 @@
-/* =====================
- Copy your code from Week 4 Lab 2 Part 2 part2-app-state.js in this space
-===================== */
+// Set up base map
+var map = L.map('map', {
+  center: [39.9522, -75.1639],
+  zoom: 12
+});
+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);
+
+
+// parse our data
+var parseData = function(data) {
+  var parsed = JSON.parse(data);
+  return parsed;
+};
+
+// Make marker objects
+var makeMarkers = function(data) {
+  var marks = _.map(data, function(arr){
+    var pathOpts = {'radius': Math.log(arr[value]) * 5, 
+                'fillColor': '#00F090'}  
+    var circle = L.circleMarker([arr[lon], arr[lat]], pathOpts);
+    return circle;
+  });
+  return marks;
+};
+
+// Add markers to our map
+var plotMarkers = function(marks) {
+  _.map(marks, function(circle){
+    circle.addTo(map);
+  })
+};
+
+// Clear out the current markers
+var removeMarkers = function() {
+    _.map(markers, function(circle){
+    map.removeLayer(circle);
+  })
+};
+
+
+// Plot the data based on input value
+var plotData = function() {
+  var raw = $.ajax(url);
+  raw.done(function(data){
+    var parsedata = parseData(data);
+    markers = makeMarkers(parsedata);
+    plotMarkers(markers);
+  })
+};
+
+
+// Initial the markers when loading the map for the first time
+var markers = [L.circleMarker([39.9522, -75.1639],{'radius': 5, 
+                'fillColor': '#00F090'}).addTo(map)];
+
+// Execute our code on click the button
+$('button#my-button').click(function(e) {
+  url = $('#url').val();
+  console.log("data source:", url);
+
+
+  // Input the latitude key, for example, X in the solar panel dataset.
+  lat = $('#lat').val();
+  console.log("latitude key:", lat);
+
+  lon = $('#lon').val();
+  console.log("longitude key:", lon);
+
+  // Input a value field that will affect the size of the circle, for example, KW in the solar panel dataset.
+  value = $('#value').val();
+  console.log("value field:", value);
+
+  removeMarkers();
+  plotData();
+});
+
diff --git a/assignment/labs.png b/assignment/labs.png
diff --git a/assignment/login0.png b/assignment/login0.png
diff --git a/assignment/login1.png b/assignment/login1.png
diff --git a/lab/js/part1-jquery.js b/lab/js/part1-jquery.js
@@ -13,8 +13,46 @@ var Stamen_TonerLite = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/ton
   ext: 'png'
 }).addTo(map);
 
+
+/* =====================
+  Call getAndParseData to grab our dataset through a jQuery.ajax call ($.ajax)
+===================== */
+
+//getAndParseData();
+
+/* =====================
+  The code here is triggered when you click on the button with ID #my-button
+  ALL functions called here will be called EVERY time a click event fires
+===================== */
+$('button#my-button').click(function(e) {
+  appState.stringField1 = $('#blockid').val();
+  console.log("stringField1", appState.stringField1);
+
+  appState.stringField2 = $('#streetid').val();
+  console.log("stringField2", appState.stringField2);
+
+  appState.booleanField = $('#cbox-input1')[0].checked;
+  console.log("booleanField", appState.booleanField);
+
+  appState.numericField = $('#string').val();
+  console.log("numericField", appState.numericField);
+
+
+  /* =====================
+    Call our resetMap function to remove markers from the map and clear out the array of marker
+    objects
+  ===================== */
+  resetMap();
+
+  /* =====================
+    Call our plotData function. It should plot all the markers that meet our criteria
+  ===================== */
+  plotData();
+});
+
+
 /* =====================
-  Lab - jQuery
+  Lab - jQuery  
 
   In this course, we've set our focus on HTML, CSS, & Javascript as they are useful in the construction
   of mapping applications. One thing that isn't yet clear is how to handle user input. This is difficult
@@ -170,6 +208,92 @@ var Stamen_TonerLite = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/ton
 // This is a popular pattern that you'll run into in programs that run jQuery. It says not to run
 // 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('Crime Type');
+   $("#text-label2").text('Block Name');
+   $("#text-label3").text('Street Name');
+   $("#number-label1").text('latitude');
+   $("#number-label2").text('longitude');  
+   $("#checkbox-label1").text('Is Gunshot?');
+   $("#checkbox-label2").text("Is Sex Assault?");
+   $("#color-label").text("Display Color");
+   $("#mybutton").text("Plot Data");
+
+  // Task 2
+   $("#text-input1").val('eg. robbery');
+   $("#text-input2").val('eg. university city');
+   $("#text-input3").val('eg. 3600 Chestnut ST');
+   $("#numeric-input1").val(39.954367);
+   $("#numeric-input2").val(-75.162158);
+   $("#cbox-input1").prop( "checked", false );
+   $("#cbox-input2").prop( "checked", true );
+   $("#color-input").val('#2f67C3');
+
+  // Task 3
+  var dict = {
+      'crime type': $('#text-input1').val(),
+      'block name': $('#text-input2').val(),
+      'street name': $('#text-input3').val(),
+      'lat': $('#numeric-input1').val(),
+      'lon': $('#numeric-input2').val(),
+      'is gunshot': $('#cbox-input1').prop('checked'),
+      'is sex assault': $('#cbox-input2').prop('checked'),
+      'display color': $('#color-input').val()
+    }
+  console.log(dict)
+
+  // 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);
+
+  // Task 5
+   $("button#mybutton").click(function() {
+
+      var dictionary = {
+      'crime type': $('#text-input1').val(),
+      'block name': $('#text-input2').val(),
+      'street name': $('#text-input3').val(),
+      'lat': $('#numeric-input1').val(),
+      'lon': $('#numeric-input2').val(),
+      'is gunshot': $('#cbox-input1').prop('checked'),
+      'is sex assault': $('#cbox-input2').prop('checked'),
+      'display color': $('#color-input').val()
+      }
+
+     console.log(dictionary);
+
+     if (dictionary.lat == '') {
+       dictionary.lat = 39.954367;
+     }
+     if (dictionary.lon == '') {
+       dictionary.lon = -75.162158;
+     }
+     if (dictionary['crime type'] == '') {
+       dictionary['crime type'] = 'robbery';
+     }
+     if (dictionary['display color'] == '') {
+       dictionary['display color'] = '#2f67C3';
+     }
+
+
+    var icon = L.divIcon({
+         className: "leaflet-marker-icon",
+         iconSize: [0, 50],
+         iconAnchor: [0, 0],
+         popupAnchor: [0, -20],
+         html: `<i class="fas fa-exclamation-triangle" style = "color: ${dictionary['display color']}"></i>`
+       })
+
+    marker = L.marker([dictionary.lat, dictionary.lon], {icon: icon}).addTo(map).bindPopup(dictionary['crime type']);
+
+  });
+
 });
diff --git a/lab/part1-jquery.html b/lab/part1-jquery.html
@@ -11,8 +11,8 @@
   <body>
     <!-- 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>
+      <h1 id="main-heading">Crime Explorer</h1>
+      <label id="text-label1" for="text-input1" text = "">This is the first text input</label>
       <input id="text-input1" class="input-text" type="text" placeholder="text here" value="some title" disabled>
       <br>
       <br>
@@ -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>
+      <br>
+      <br>
+      <button id = "mybutton">A Button</button>
     </div>
     <!-- Map -->
     <div id="map" class="map"></div>
@@ -49,6 +55,7 @@ <h1 id="main-heading">Main Heading</h1>
     <script src="js/leaflet.js"></script>
     <script src="js/underscore.js"></script>
     <script src="js/jquery-2.2.0.js"></script>
+    <script src="https://kit.fontawesome.com/82116705d6.js" crossorigin="anonymous"></script>
     <script src="js/part1-jquery.js"></script>
   </body>
-</html>
+</html>