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.

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

HW6 - YICHAO JIA #16

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
19 changes: 19 additions & 0 deletions assignment/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,25 @@
<!-- =====================
Add elements in this space
====================== -->
<label id="url" for="textInput1"> Dataset URL: </label>
<input id="textInput1" type="text" style='width:100%'
value="https://raw.githubusercontent.com/CPLN690-MUSA610/datasets/master/json/philadelphia-solar-installations.json">
</input>

<label id="lat" for="textInput2"> Latitude Key: </label>
<input id="textInput2" type="text" value="LAT"></input>

<label id="long" for="textInput3"> Longitude Key: </label>
<input id="textInput3" type="text" value="LONG_"></input>

<button id="button1" style='margin:10pt'> Map the Data </button>
<button id="button2" style='margin:10pt'> Reset </button>






</div>
<!-- Map -->
<div id="map" class="map"></div>
Expand Down
108 changes: 108 additions & 0 deletions assignment/js/main.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,111 @@
/* =====================
Copy your code from Week 4 Lab 2 Part 2 part2-app-state.js in this space

In your index.html file, add four elements:

1. Text input field, which will represent the URL of your dataset
2. Text input field, which will represent the latitude key in your data
3. Text input field, which will represent the longitude key in your data
4. Button, which will run your script

Regarding the latitude and longitude keys: remember that each dataset has its
own key or label for these values. For example,
[philadelphia bike crashes](https://raw.githubusercontent.com/CPLN690-MUSA610/datasets/master/json/philadelphia-bike-crashes-snippet.json)
uses LAT and LNG while
[solar installations](https://raw.githubusercontent.com/CPLN690-MUSA610/datasets/master/json/philadelphia-solar-installations.json)
uses X and Y or LONG and LAT. The user will need to be able to enter the keys
which they hope to extract Latitude/Longitude information from in addition to
the URL for the dataset.

#### Task 3

Make sure it works.
The user should be able to type in a URL of one of our datasets,
as well as the keys for latitude and longitude, click the button, and have
their specified dataset mapped.

To do this, you will need to use jQuery to select the button and create a click
event on it. When the button is clicked, it should run a function that selects
the three input fields, checks their values, and assigns those values to
variables. Those variables should be used in your application to replace
previously hardcoded data.


===================== */


// We set this to HTTP to prevent 'CORS' issues

var parseData = function(data) {
return JSON.parse(data);
};

var makeMarkers = function(data, key1, key2) {
var markersList = [];
_.each(data, function(p) {
markersList.push(L.marker([p[key1],p[key2]])); //p.key1
});
return markersList;
};

var plotMarkers = function(marker) {
_.each(marker,function(m) {
m.addTo(map);
});
};


var removeMarkers = function(marker) {
_.each(marker,function(layer) {
map.removeLayer(layer);
});
};


/* =====================
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);

/* =====================
CODE EXECUTED HERE!
===================== */

var dataInput = {};

var dataRead = function() {
dataInput = {url: $('#textInput1').val(),
latKEY:$('#textInput2').val(),
longKEY:$('#textInput3').val()};
return dataInput;
};



var m = [];

$('#button1').click(function() {
dataRead();
console.log(dataInput);
$.ajax(dataInput.url).done(function(data) {
console.log(parseData(data));
m = makeMarkers(parseData(data), dataInput.latKEY, dataInput.longKEY);
console.log(m);
plotMarkers(m);
});
});

$('#button2').click(function() {
removeMarkers(m);
});
19 changes: 19 additions & 0 deletions lab/lab1/css/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,22 @@ body {
overflow-y: auto;
padding: 20px;
}

.card {
background-color: lightgrey;
margin: 10px;
padding: 10px;
}

.schooltitle {
font-size: 18px;
}

.schooltype {
margin-bottom: 6px
}

.filterbutton {
position: absolute;
padding:6px;
}
47 changes: 44 additions & 3 deletions lab/lab1/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,12 @@
</head>
<body>







<!-- =====================

# Week 6 - lab 1
Expand Down Expand Up @@ -61,9 +67,44 @@
<!-- Sidebar -->
<div class="sidebar">

<!-- =====================
Add HTML!
====================== -->
<button class="filterbutton">
hide filter
</button>


<h1>Filters</h1>
<h2> By Name </h2>
<input type='text'> </input>
<h2> By Grade </h2>

<select>
<option value="elementary school">elementary school</option>
<option value="junior school">junior school</option>
<option value="high school">high school</option>
</select>


<hr>
<div> schools </div>

<div class="card">
<div class="schooltitle"> school 1 </div>
<div class="schooltype"> school type </div>
<div> school address </div>
</div>

<div class="card">
<div class="schooltitle"> school 2 </div>
<div> school type </div>
<div> school address </div>
</div>

<div class="card">
<div class="schooltitle"> school 3 </div>
<div> school type </div>
<div> school address </div>
</div>


</div>
<!-- Map -->
Expand Down
Empty file added lab/lab1/js/main.js
Empty file.
9 changes: 6 additions & 3 deletions lab/lab2/jquery-selectors.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<body>
<!-- Sidebar -->
<div class="sidebar">
<h1 id="main-heading">Main Heading</h1>
<h1 id="main-heading">Mark My Favorite Restaurant</h1>
<label id="text-label1" for="text-input1">This is the first text input</label>
<input id="text-input1" class="input-text" type="text" placeholder="text here" value="some title" disabled>
<br>
Expand All @@ -24,8 +24,11 @@ <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>
<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! -->
Expand Down
54 changes: 54 additions & 0 deletions lab/lab2/js/part1-jquery.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,60 @@ var Stamen_TonerLite = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/ton
ext: 'png'
}).addTo(map);




$('#text-label1').text('Name');
$('#text-label2').text('Address');
$('#text-label3').text('Cuisine Type');
$('#number-label1').text('Long');
$('#number-label2').text('Lat');
$('#checkbox-label1').text('Open Now');
$('#checkbox-label2').text('Order Delivery');
$('#color-label').text('Color Code');
$('button').text('Map it Out');

$('#text-input1').val('Vernick');
$('#text-input2').val('2031 Walnut St, Philadelphia, PA 19103');
$('#text-input3').val('New American');
$('#numeric-input1').val(-75.174833);
$('#numeric-input2').val(39.951306);
$('#color-input').val('#ff9900');



var inputID = ['#text-input1','#text-input2','#text-input3','#numeric-input1','#numeric-input2'];
var i;
var dataInput = {};
/*_.each(inputID, function(){
$(inputID).prop('disabled', false);
}); this didn't work
*/
for (i=0; i<inputID.length; i++) {
$(inputID[i]).prop('disabled', false);
}

var dataRead = function() {
dataInput = {name: $('#text-input1').val(),
address:$('#text-input2').val(),
type:$('#text-input3').val(),
long:$('#numeric-input1').val(),
lat:$('#numeric-input2').val(),
color:$('#color-input').val()};
};

$('button').click(function() {
dataRead();
console.log(dataInput);
L.circleMarker([dataInput.lat, dataInput.long],{radius:12, stroke: false,
fillColor:dataInput.color, fillOpacity: 0.8})
.bindPopup(dataInput.type)
.addTo(map);
});




/* =====================
Lab - jQuery

Expand Down