Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ZIXUAN WANG lab #11

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

ZIXUAN WANG lab #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 23 additions & 6 deletions labs/lab1/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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) {
Expand All @@ -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
Expand All @@ -114,12 +131,12 @@ $('<br><input type="button" id="btnToRemove" value="remove" />').appendTo($(".si


$( "#btnToAdd" ).click(function() {
layer.addTo(map);
polylayer.addTo(map);
});


$( "#btnToRemove" ).click(function() {
map.removeLayer(layer);
map.removeLayer(polylayer);
});


Expand Down
44 changes: 43 additions & 1 deletion labs/lab2/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
10 changes: 9 additions & 1 deletion labs/lab2/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,15 @@ <h1 class="day-of-week">Day of Week</h1>
<!-- Map -->
<div id="map" class="map"></div>
<!-- Legend -->
<div class="legend"></div>
<div class="legend">
<ul><h4 id="legendname">Legend</h4>
<li id="MON">Monday</li>
<li id="TUE">Tuesday</li>
<li id="WED">Wednesday</li>
<li id="THU">Thursday</li>
<li id="FRI">Friday</li>
</ul>
</div>
<!-- Javascript Imports -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.js" integrity="sha256-6BZRSENq3kxI4YYBDqJ23xg0r1GwTHEpvp3okdaIqBw=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore.js" integrity="sha256-O4179En8zabOlPYBNvGp8cF0uh0vnSZpW4Q6Ul1h+8c=" crossorigin="anonymous"></script>
Expand Down
27 changes: 23 additions & 4 deletions labs/lab2/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -144,8 +151,20 @@ var showResults = function() {
$('#intro').hide();
// => <div id="results">
$('#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) {
Expand All @@ -155,7 +174,7 @@ var eachFeatureFunction = function(layer) {
you can use in your application.
===================== */
console.log(layer.feature);
showResults();
showResults(DayofWeek(layer.feature));
});
};

Expand Down