Skip to content

Lab1 #5

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

Open
xiaoranw8 wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Lab1 #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ba03d24
change assignment content
xiaoranw8 Apr 20, 2020
6d35e35
Lab1
xiaoranw8 Apr 23, 2020
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
24 changes: 23 additions & 1 deletion assignment/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,22 @@ Applications are ultimately just tools. What problem or question does
your application attempt to resolve or grapple with? How does your
application speak to this problem/question?

* The project is a map-based web dashboard to show the grocery locations in
Philadelphia. It should allow users to see the accessibility, potential service
area of each location. The app should also give a sense of which neighborhood
faces the potential under demanded problem.

## The data

Geospatial applications are all about working with data. What datasets
would you plan/like to use? If the data you'll be working with isn't
already stored in a way that you can use, how will you be storing your data?

* I acquired the grocery locations from OpenData Philly and OpenStreetMap API in
Python. I organized those data into a GeoJSON file and uploaded to my GitHub.
I plan to use jQuery to acquire them, but if it cause trouble, I may simply
store them in local folder.

## Technologies used

Which technologies covered in class (or discovered on your own!) do you
Expand All @@ -25,14 +35,23 @@ Review the APIs/online examples of leaflet, turf, jQuery, underscore (or
any library not explicitly covered in class) for functions/uses which
you'd like to explore. Briefly describe how you might use them.

* The library such as leaflet, turf, jQuery as well as Mapbox API will be
covered in this project.

## Design spec

#### User experience

At a high level, how do you expect people to use your application?
- Who are the users?
People who want to know more about the food accessibility in their neighborhood.
- What do they gain from your application' use?
They can view the distribution of grocery location in an more organized method.
The locations will be counted in the unit of neighborhood. The travel time
isochrones allows people to see the travel buffer around each store.
- Are there any website/application examples in the wild to which you can compare your final?
https://maps.openrouteservice.org/directions
https://www.trafforddatalab.io/maps/explore/

#### Layouts and visual design

Expand All @@ -53,6 +72,10 @@ are hard to use and think about. Global variables are a strategy for
coping with that difficulty by breaking data out of the asynchronous
context.

* The travel time isochrones is the most difficult part. MapBox and
OpenStreetMap have the API to achieve this. If I cannot figure out how
to apply those APIs, the alternative would be distance buffer with turf.

## Missing pieces

We've only managed to scratch the surface of the available technologies
Expand All @@ -61,4 +84,3 @@ that you think would be useful? What technologies not covered seem exciting to
you (you don't necessarily have to fully understand what they're for,
this is a chance for you to get help interpreting a technology's
purpose/usage).

70 changes: 62 additions & 8 deletions lab/lab1/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,57 @@ body {
.map {
position: absolute;
right: 0px;
left: 340px;
left: 350px;
height: 100%;
top: 0;
}

.sidebar {
position: absolute;
left: 0px;
width: 340px;
width: 350px;
top: 0;
bottom: 0;
overflow-y: auto;
padding: 20px;
padding-bottom: 60px;
padding: 10px;
padding-bottom: 40px;
}

.dropdown{
left: 190px;
}

.modalbutton {
margin-bottom: 5px;
}

.modal-content{
width: 700px;
padding: 5px;
}

.modal-body{
right: 80px;
left: 10px;
}

.alert{
padding: 5px 10px;
}

.btn-group button{
background-color:white;
color: black;
padding: 5px 17px;
right: 20px;
}

.table>thead>tr>th{
border-top: transparent;
}

.input-group input.amber-border {
border: 1px solid #ffca28;
}

.item {
Expand Down Expand Up @@ -74,13 +111,30 @@ Media Queries
============= */

@media screen and (min-width: 480px) and (max-width: 800px) {
/*.item {
background-color: blue;
}*/
}
.map {
position: absolute;
right: 0px;
left: 340px;
height: 100%;
top: 0;
}
.sidebar {
position: absolute;
left: 0px;
width: 340px;
top: 0;
bottom: 0;
overflow-y: auto;
padding: 10px;
padding-bottom: 40px;
}
}

@media screen and (max-width: 479px) {
/*.item {
background-color: red;
}*/
.sidebar {
display: none
}
}
100 changes: 96 additions & 4 deletions lab/lab1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@
<meta charset="utf-8">
<!-- CSS Imports -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" integrity="sha256-iYUgmrapfDGvBrePJPrMWQZDcObdAcStKBpjP3Az+3s=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Place framework CSS code here. -->
<!-- <link rel="stylesheet" href="css/bootstrap.css" /> -->
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
Expand All @@ -14,14 +16,100 @@
<div class="sidebar">
<nav class="navbar navbar-default">
<div class="container-fluid clearfix">
<!-- dropdown -->
<div class="topright-button" style="float: right">
[Add New]
</div>
<div class="navbar-header">
<a href="#">Manufacturers</a>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Add New
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<li><a href="#">View History</a></li>
<li><a href="#">Email All Manufacture</a></li>
</ul>
</div>
</div>
</nav>
<!-- <div class="-header">
<a href="#">Manufacturers</a>
</div> -->
<!-- modal -->
<button type="modalbutton" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Manufacturers
</button>
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">Manufacturer</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<!-- alert -->
<div class="alert alert-danger" role="alert">
This manufacturer has a low inventory.
</div>
<!-- <p>To be added new form.</p> -->
<div class="row justify-content-between">
<div class="col1">
<a style="font-size: 25px"><b>Tandy’s Basketweavers</b></a>
</div>
<!-- Button Group -->
<div class="btn-group float-right" role="group" aria-label="first clo btn">
<button type="button" class="btn btn-secondary">Edit</button>
<button type="button" class="btn btn-secondary">Delete</button>
<button type="button" class="btn btn-secondary">Export</button>
</div>
</div>
<div class="row justify-content-between">
<div class="col2">
</div>
</div>
<hr>
<div class="sales-table">
<a style="font-size: 20px"><b>Sales</b></a>
<!-- Table -->
<table class="table">
<thead>
<tr>
<th scope="col">First name</th>
<th scope="col">Last name</th>
<th scope="col">Purchase</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>Fruit Basket</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>Gift Basket</td>
</tr>
<tr>
<td>Larry</td>
<td>the Bird</td>
<td>Easter Basket</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Input Group -->
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Search..." aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</div>
</div>
<div class="item">
<h2 class="item-heading">Tandy’s Basketweavers</h2>
<div>490 Freedom Drive<br>
Expand Down Expand Up @@ -51,13 +139,17 @@ <h2 class="item-heading">Basket Ball</h2>
Sort by <span class="sort-option selected">A–Z</span> <span class="sort-option">Inventory</span>
</div>
</div>
</div>
<!-- Map -->
<div id="map" class="map"></div>
<!-- Javascript Imports -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js" integrity="sha256-obZACiHd7gkOk9iIL/pimWMTJ4W/pBsKu+oZnSeBIek=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js" integrity="sha256-CNm+7c26DTTCGRQkM9vp7aP85kHFMqs9MhPEuytF+fQ=" crossorigin="anonymous"></script>
<!-- Place framework JS code here. -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="js/setup.js"></script>
</body>
</html>