From 3c54d49a5f56f7fa083658ae875c42003af2a362 Mon Sep 17 00:00:00 2001 From: Xuan Date: Tue, 19 Mar 2019 21:29:21 -0400 Subject: [PATCH] ZIXUAN WANG lab --- labs/lab1/js/main.js | 29 +++++++++++++++++++++------ labs/lab2/css/style.css | 44 ++++++++++++++++++++++++++++++++++++++++- labs/lab2/index.html | 10 +++++++++- labs/lab2/js/main.js | 27 +++++++++++++++++++++---- 4 files changed, 98 insertions(+), 12 deletions(-) diff --git a/labs/lab1/js/main.js b/labs/lab1/js/main.js index 5867d24..c0aa9e6 100644 --- a/labs/lab1/js/main.js +++ b/labs/lab1/js/main.js @@ -48,10 +48,15 @@ https://medium.com/@sumit.arora/what-is-geojson-geojson-basics-visualize-geojson // Task 1.1 - add the five markers from squares.json to the map using the methods // we've used so far in class: _.map or _.each, forEach() + addmarkers = _.map(squaresJson,function(x){ + return L.marker([x.LAT,x.LNG]).addTo(map); +}); // Task 1.2 - remove squares.json from the map // iterating over each marker using map.removeLayer(point) - +_.forEach(addmarkers,function(i){ + map.removeLayer(i) +}); // markers = squaresJson.map((point) => { // return L.marker([point.LAT, point.LNG]).addTo(map); @@ -80,15 +85,22 @@ https://medium.com/@sumit.arora/what-is-geojson-geojson-basics-visualize-geojson // task 2.1 - add squares.geojson to the map // Try: L.geoJSON().addTo(map); - +geolayer = L.geoJSON(squaresGeoJson).addTo(map); // task 2.2 - remove squares.geojson from the map // Try: map.removeLayer() +map.removeLayer(geolayer); -// task 3 - filter by some property on squares.geojson +// task 3 - filter by some property on squares.geojson +// filter by if there is a indego station + L.geoJSON(squaresGeoJson, { + filter: function(feature) { + return feature.properties.INDEGO_STATION == true ; + } + }).addTo(map); // L.geoJSON(squaresGeoJson, { // filter: function(feature) { @@ -101,8 +113,13 @@ https://medium.com/@sumit.arora/what-is-geojson-geojson-basics-visualize-geojson // task 4.1 - add squaresPoly.geojson to the map // task 4.2 - add conditional coloring to squaresPoly.geojson +polylayer = L.geoJSON(squaresPoly).addTo(map); - +polylayer.setStyle(function(poly) { + if (poly.properties.TYPE === "circle") { + return {color:'white', fillColor: 'grey'};} + else return {color:'white',fillColor: 'red'} +}); // task 5 - add two buttons to the sidebar from javascript using jquery: (1) add layer (2) remove layer @@ -114,12 +131,12 @@ $('
').appendTo($(".si $( "#btnToAdd" ).click(function() { - layer.addTo(map); + polylayer.addTo(map); }); $( "#btnToRemove" ).click(function() { - map.removeLayer(layer); + map.removeLayer(polylayer); }); diff --git a/labs/lab2/css/style.css b/labs/lab2/css/style.css index 44b2b7c..a19d50d 100644 --- a/labs/lab2/css/style.css +++ b/labs/lab2/css/style.css @@ -29,6 +29,48 @@ p.main { .legend { position: absolute; - background-color: #fff; + background-color: #fff6; z-index: 2000; + bottom: 10px; + right: 0; + margin: 10px; +} + +#legendname{ + margin-top: 0; + margin-bottom: 10px; + position: relative; + font-size: 20px; +} + +ul { + list-style: none; + padding-left: 10px; +} + +li::before { + padding-right: 10px; + content: "\25A0"; + font-size: 1.5em; + opacity: .5; +} + +#MON::before { + color: green; +} + +#TUE::before { + color: blue; +} + +#WED::before { + color:red; +} + +#THU::before { + color: yellow; +} + +#FRI::before { + color:purple; } diff --git a/labs/lab2/index.html b/labs/lab2/index.html index 0ad27a2..4cb8389 100644 --- a/labs/lab2/index.html +++ b/labs/lab2/index.html @@ -31,7 +31,15 @@

Day of Week

-
+
+ +
diff --git a/labs/lab2/js/main.js b/labs/lab2/js/main.js index 213e13a..823749f 100644 --- a/labs/lab2/js/main.js +++ b/labs/lab2/js/main.js @@ -126,14 +126,21 @@ of the application to report this information. ===================== */ -var dataset = "" +var dataset = "https://raw.githubusercontent.com/MUSA611-CPLN692-spring2019/datasets/master/geojson/philadelphia-garbage-collection-boundaries.geojson" var featureGroup var myStyle = function(feature) { - return {}; + switch(feature.properties.COLLDAY) { + case 'MON': return {fillColor: 'green'}; + case 'TUE': return {fillColor: 'blue'}; + case 'WED': return {fillColor: 'red'}; + case 'THU': return {fillColor: 'yellow'}; + case 'FRI': return {fillColor: 'purple'}; + default: return {fillColor: 'grey'}; + }; }; -var showResults = function() { +var showResults = function(feature) { /* ===================== This function uses some jQuery methods that may be new. $(element).hide() will add the CSS "display: none" to the element, effectively removing it @@ -144,8 +151,20 @@ var showResults = function() { $('#intro').hide(); // =>
$('#results').show(); + $('.day-of-week').text(feature); }; +var DayofWeek = function(feature) { + switch (feature.properties.COLLDAY) { + case "MON": return "Monday"; + case "TUE": return "Tuesday"; + case "WED": return "Wednesday"; + case "THU": return "Thursday"; + case "FRI": return "Friday"; + case "SAT": return "Saturday"; + case "SUN": return "Sunday"; + } +}; var eachFeatureFunction = function(layer) { layer.on('click', function (event) { @@ -155,7 +174,7 @@ var eachFeatureFunction = function(layer) { you can use in your application. ===================== */ console.log(layer.feature); - showResults(); + showResults(DayofWeek(layer.feature)); }); };