From ba03d242e41de1ea26d74f79d839c206f9995ba2 Mon Sep 17 00:00:00 2001 From: Xiaoran Wang Date: Mon, 20 Apr 2020 09:55:24 -0400 Subject: [PATCH 1/2] change assignment content to view the format --- assignment/README.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/assignment/README.md b/assignment/README.md index 9a859e8..6f48da4 100644 --- a/assignment/README.md +++ b/assignment/README.md @@ -10,6 +10,11 @@ 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 @@ -61,4 +66,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). - From 6d35e354bcd50be61ff52e3668d9ff59d239de3c Mon Sep 17 00:00:00 2001 From: Xiaoran Wang Date: Thu, 23 Apr 2020 11:51:52 -0400 Subject: [PATCH 2/2] Lab1 --- assignment/README.md | 18 ++++++++ lab/lab1/css/style.css | 70 +++++++++++++++++++++++++---- lab/lab1/index.html | 100 +++++++++++++++++++++++++++++++++++++++-- 3 files changed, 176 insertions(+), 12 deletions(-) diff --git a/assignment/README.md b/assignment/README.md index 6f48da4..d4335fb 100644 --- a/assignment/README.md +++ b/assignment/README.md @@ -21,6 +21,11 @@ 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 @@ -30,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 @@ -58,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 diff --git a/lab/lab1/css/style.css b/lab/lab1/css/style.css index 102e3ec..02a760d 100644 --- a/lab/lab1/css/style.css +++ b/lab/lab1/css/style.css @@ -7,7 +7,7 @@ body { .map { position: absolute; right: 0px; - left: 340px; + left: 350px; height: 100%; top: 0; } @@ -15,12 +15,49 @@ body { .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 { @@ -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 + } } diff --git a/lab/lab1/index.html b/lab/lab1/index.html index 2986a70..b3e4f9e 100644 --- a/lab/lab1/index.html +++ b/lab/lab1/index.html @@ -5,7 +5,9 @@ + + @@ -14,14 +16,100 @@
+ + + + + +
+ +
+ +
+

Tandy’s Basketweavers

490 Freedom Drive
@@ -51,6 +139,7 @@

Basket Ball

Sort by A–Z Inventory
+
@@ -58,6 +147,9 @@

Basket Ball

+ + +