diff --git a/lab/lab1/part1.js b/lab/lab1/part1.js index da84f3d..e0e746f 100644 --- a/lab/lab1/part1.js +++ b/lab/lab1/part1.js @@ -64,7 +64,7 @@ to true. ===================== */ var query1; - +query1 = _.isFunction(printMenu) console.log('printMenu is a function:', query1); /* ===================== @@ -73,7 +73,7 @@ to true. ===================== */ var query2; - +query2 = _.isArray(bakedGoods); console.log('bakedGoods is an array:', query2); /* ===================== @@ -82,7 +82,7 @@ underscore. Should evaluate to true. ===================== */ var query3; - +query3 = _.isObject(bakedGoods[1]); console.log('The first element in bakedGoods is an object:', query3); /* ===================== @@ -90,7 +90,7 @@ Use _.where to return all cakes. Or bread. Whichever is your favorite. ===================== */ var query4; - +query4 = _.where(bakedGoods, {type: "Cake"}) console.log('All bread. Or cakes:', query4); /* ===================== @@ -98,7 +98,7 @@ Use _.filter to return all baked goods that cost more than $4. ===================== */ var query5; - +query5 = _.filter(bakedGoods, function(i){return i.price>4}); console.log('More than $4:', query5); /* ===================== @@ -106,7 +106,7 @@ Use _.sortBy to order the list by inventory (from lowest to highest). ===================== */ var query6; - +query6 = _.sortBy(bakedGoods, function(j){ return Math.sin(j.inventory).reverse;}); console.log('Sorted by inventory (lowest to highest):', query6); /* ===================== @@ -114,7 +114,7 @@ Use _.groupBy to organize the baked goods by type. ===================== */ var query7; - +query7 = _.groupBy(bakedGoods, function(x){ return x.type; }); console.log('Grouped by type:', query7); /* ===================== diff --git a/lab/lab2/js/part1-ajax-calls.js b/lab/lab2/js/part1-ajax-calls.js index 575a13c..320632d 100644 --- a/lab/lab2/js/part1-ajax-calls.js +++ b/lab/lab2/js/part1-ajax-calls.js @@ -19,8 +19,7 @@ This recipe, can be used by underscore's _.filter. It will return only words with >=5 characters. ===================== */ -var isLengthOfFiveOrMore = function(str) {}; - +var isLengthOfFiveOrMore = function(str) {return str.length>5}; console.log("isLengthOfFiveOrMore success:", _.isEqual(_.filter(['this', 'is','a', 'test', 'testing'], isLengthOfFiveOrMore), ['testing'])); @@ -30,15 +29,15 @@ console.log("isLengthOfFiveOrMore success:", function you write along with underscore's _.each to log the double of every number in the provided array. ===================== */ -var logDouble = function(num) {}; +var logDouble = function(num) {console.log(num*2)}; var theArray = [1, 5, 20, 100]; - +_.each(theArray, function(num){logDouble(num)}); /* ===================== Given this already defined function, define fizzbuzzArray so that, when mapped over, it will equal ['fizz', 'buzz', 'fizzbuzz']; ===================== */ -var fizzbuzzArray = []; +var fizzbuzzArray = [3, 5, 15]; var fizzbuzzFunc = function(num) { var str = ''; if (num % 3 === 0) { str = 'fizz'; } @@ -94,6 +93,30 @@ var phillySolarInstallationDataUrl = "https://raw.githubusercontent.com/CPLN692- var phillyCrimeDataUrl = "https://raw.githubusercontent.com/CPLN692-MUSA611/datasets/master/json/philadelphia-crime-snippet.json"; var phillyBikeCrashesDataUrl = "https://raw.githubusercontent.com/CPLN692-MUSA611/datasets/master/json/philadelphia-bike-crashes-snippet.json"; +var crimedata; +var layerGroup + +// async ajax call +var getCrimeData = function() { + $.ajax(phillyCrimeDataUrl).done(function(ajaxResponseValue) { + crimedata = JSON.parse(ajaxResponseValue); + console.log(crimedata); + _.forEach(crimedata, function(x){ + L.marker([x.Lat, x.Lng]).addTo(map); + }); + }) + } + + +// run the ajax function +getCrimeData(); +// create a feature group to provide additional controls over the markers +// read more about layer groups here: https://leafletjs.com/examples/layers-control/ +// It makes it easier to control a group of markers + + +/* ---- THIS IS HOW YOU CLEAR A LAYER GROUP ----- */ +// layerGroup.clearLayers(); /* ===================== Data you grab through ajax is just text. You'll need to parse it as javascript diff --git a/lab/lab2/js/part2-app-state.js b/lab/lab2/js/part2-app-state.js index e342fe3..70bb7de 100644 --- a/lab/lab2/js/part2-app-state.js +++ b/lab/lab2/js/part2-app-state.js @@ -34,16 +34,28 @@ ===================== */ // We set this to HTTP to prevent 'CORS' issues -var downloadData = $.ajax("http://"); -var parseData = function() {}; -var makeMarkers = function() {}; -var plotMarkers = function() {}; +var downloadData = $.ajax("https://raw.githubusercontent.com/CPLN692-MUSA611/datasets/master/json/philadelphia-crime-snippet.json"); +var parseData = function(downloadedData) { + return JSON.parse(downloadedData); +}; +var makeMarkers = function(parsedData) { + var maker = []; + _.forEach(parsedData, function(x){ + maker.push(L.marker([x.Lat, x.Lng])); + }); + return maker; +}; +var plotMarkers = function(y) { + _.forEach(y, function(z){ + z.addTo(map); + }); +}; /* ===================== 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 immediately removed from the map. + previously displayed are immediately removed fr om the map. In Leaflet, the syntax for removing one specific marker looks like this: @@ -84,8 +96,9 @@ var Stamen_TonerLite = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/ton ===================== */ downloadData.done(function(data) { + console.log(data); var parsed = parseData(data); var markers = makeMarkers(parsed); plotMarkers(markers); - removeMarkers(markers); +// removeMarkers(markers); }); diff --git a/lab/lab2/js/part3-application.js b/lab/lab2/js/part3-application.js index 8572d7d..d0c6c60 100644 --- a/lab/lab2/js/part3-application.js +++ b/lab/lab2/js/part3-application.js @@ -28,6 +28,10 @@ Define a resetMap function to remove markers from the map and clear the array of markers ===================== */ var resetMap = function() { + _.forEach(myMarkers, function(x) { + map.removeLayer(x); +}); +myMarkers = null; /* ===================== Fill out this function definition ===================== */ @@ -42,14 +46,38 @@ var getAndParseData = function() { /* ===================== Fill out this function definition ===================== */ + var Crimedata = "http://raw.githubusercontent.com/CPLN692-MUSA611/datasets/master/json/philadelphia-crime-snippet.json"; + var y = $.ajax(Crimedata).done(function(y) { + myData = JSON.parse(y); + }); }; /* ===================== Call our plotData function. It should plot all the markers that meet our criteria (whatever that criteria happens to be — that's entirely up to you) ===================== */ + +/*===================== + Fill out this function definition + =====================*/ +console.log(newMarkers);*/ +var markerfilter = function(y) { + var markerfilterd = []; + for (i = 0; i < y.length; i++) { + if (y[i]['UCR Code'] >= numericField1 && y[i]['UCR Code'] <= numericField2 && y[i]['General Crime Category'] == stringField && + (y[i].District == 24) == booleanField) { + markerfilterd.push(y[i]); + } + } + console.log("Number of crimes: " + markerfilterd.length); + return markerfilterd; +}; + var plotData = function() { /* ===================== Fill out this function definition ===================== */ + myMarkers = _.each(markerfilter(myData), (z) => { + L.marker([z.Lat, z.Lng]).addTo(map).bindPopup(z['Location Block']); + }); }; diff --git a/lab/lab2/js/part3-main.js b/lab/lab2/js/part3-main.js index 3bb49e3..bc120af 100644 --- a/lab/lab2/js/part3-main.js +++ b/lab/lab2/js/part3-main.js @@ -23,6 +23,7 @@ $('button#my-button').click(function(e) { stringField = $('#string').val(); console.log("stringField", stringField); + console.log(myData) /* =====================