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

Issues #24 and #25 #46

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

Issues #24 and #25 #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ae2a1a9
Add readme
mike-feeney Feb 27, 2023
6f967be
Update background and text colors for service flags in the results tab
mike-feeney Feb 27, 2023
dd9c989
Fix HTML issues shown by W3C HTML validator
mike-feeney Feb 27, 2023
848aa98
Merge branch 'CodeForPittsburgh:master' into master
mike-feeney Mar 1, 2023
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
98 changes: 98 additions & 0 deletions FoodAccessMap/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
# Pittsburgh Food Access Map

Made by Code for Pittsburgh in collaboration with the <a href="https://www.pittsburghfoodpolicy.org" target="_blank">Pittsburgh Food Policy Council</a>

The live map can be viewed here: https://codeforpittsburgh.github.io/FoodAccessMap/

## What is the Pittsburgh Food Access Map?

The Map visually displays data about food resources in the Pittsbugh area.
The goal is to address food insecurity by allowing individuals to access the app and find food resources in their area.

## How does the map work?

There are two main components to the map, a <a href="https://github.com/CodeForPittsburgh/food-access-data-transformation" target="_blank">back end</a>
where the data about the food resources is aggregated and and a <a href="https://codeforpittsburgh.github.io/FoodAccessMap/" target="_blank">client side web app</a> where users can access the map.
The client side is built using <a href="https://leafletjs.com/index.html" target="_blank">Leaftlet</a> and <a href="https://getbootstrap.com/" target="_blank">Bootstrap</a>. The tutorial popups are created using <a href="https://introjs.com/docs" target="_blank">Intro.js</a>.

The client requests the data from the back end in the form of an NDJSON file which is then parsed into an
array of objects with each object representing a physical location. Each location is then added to the map as a <a href="https://leafletjs.com/examples/geojson/" target="_blank">GeoJSON</a> object using Leaflet.

## Adding new categories for location types and services

Users can filter the map by location type and services offered in the home tab. To add a new location type or service to map the back end must first be updated to add the new type to the dataset.

Each location object in the dataset has a property for each of the possible services offered and a type property that describes its location type.

### Logging location objects

You can console log the entire array of location objects from the script.js file in order to get a better idea of their structure.

```javascript
$.get(
//retreive the ndjson dataset
'https://raw.githubusercontent.com/CodeForPittsburgh/food-access-data-transformation/main/food-data/processed-datasets/merged_datasets.ndjson',

//pass the retreived dataset into a function to handle initial map population
function (ndjson) {
//convert NDJSON to array of objects
const data = ndjson.split('\n').map(obj => JSON.parse(obj))
console.log(data)
```


### 1) Update the HTML

- Copy the code below and add after other toggles in the Home Tab Filters section. Change the id and name attributes and text content to match the new location or service type.

```
<div class="row">
<div class="col-md-12">
<label class="checkbox-inline togglepad">
<input type="checkbox" id="filterSupermarket" name="supermarket" checked="checked" data-toggle="toggle">Supermarket
</label>
</div>
</div>

```
- Update the form on the info tab. Add a new option to the drop down if adding a new location type and add a new fieldset to the radio buttons if adding a new service.

### 2) Update the script.js

- Add the new service or type to the toggle all event listener.

- If adding a service add a feature property for that service to the onEachFeature function.

### 3) Update the sidebar-update.js

- If adding a new service type, add condition to check for new service and then append that service to the updateResultsSidebar function.

### 4) Add new Icon to food_icons.js file
- If adding a new location type, the url for the icon needs to be added as a variable and the getIcon function needs to be updated to add the icon to the new location type.

### 5) Update style.css
- Each service has a background color associated with it for when it is displayed in the results tab.
- Current colors were chosen with consideration for colorblindness using <a href="https://www.nature.com/articles/nmeth.1618" target="_blank">this</a> article written by Bang Wong.
- Please also consider the contrast between the background and the text using the <a href="https://webaim.org/resources/contrastchecker/" target="_blank">WebAim Contrast Checker</a>.

### Current services

- snap
- wic
- fmnp
- food_bucks
- fresh_produce
- free_distribution
- food_rx

### Current Location Types

- "supermarket"
- "convenience store"
- "grow pgh garden"
- "farmer's market"
- "summer meal site"
- "food bank site"

## Issues and contributing
The <a href="https://github.com/CodeForPittsburgh/food-access-data-transformation/issues" target="_blank">issues</a> for the entire project are located in the back end repo. If you find any bugs or have any ideas for how to improve the project please add an issue.
25 changes: 14 additions & 11 deletions FoodAccessMap/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,35 +133,38 @@ html {
}

.snap {
background-color: darkgreen;
color: white;
background-color: rgb(86, 180, 233);
color: black;
}

.wic {
background-color: #ba55d3;
background-color: rgb(0, 84, 133);
color: white;
}

.foodbucks {
background-color: #32cd32;
background-color: rgb(0, 173, 127);
color: black;
}

.freshproduce {
background-color: orangered;
background-color: rgb(255, 111, 0);
color: black;
}

.fmnp {
background-color: darkred;
color: white;
background-color: rgb(209, 133, 175);
color: black;
}

.freedistribution {
background-color: rgb(182, 182, 5);
color: white;
background-color: rgb(230, 159, 0);
color: black;
}

.foodrx {
background-color: rgb(141, 5, 182);
color: white;
background-color: rgb(240, 228, 66);
color: black;
}

input[type='text'] {
Expand Down
41 changes: 20 additions & 21 deletions FoodAccessMap/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
<!-- Custom and Miscellaneous -->
<link rel="icon" type="image/x-icon" href="https://avatars.githubusercontent.com/u/7076673?s=200&v=4">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/leaflet-sidebar.css" />
<link rel="stylesheet" href="./css/leaflet-sidebar.css">
<link rel="stylesheet" href="./css/introjs.css">
</head>

Expand Down Expand Up @@ -232,7 +232,7 @@ <h1 class="sidebar-header">Results<span class="sidebar-close"><i class="fa fa-ca
<!--Radius Slider -->
<div class="row" id="radiusSlider">
<div class="col-md-12">
<div id="servicesFilter" class="panel panel-default togglepad">
<div class="panel panel-default togglepad">
<div class="panel-heading">
Radius
</div>
Expand Down Expand Up @@ -284,14 +284,14 @@ <h1 class="sidebar-header">About<span class="sidebar-close"><i class="fa fa-care
</div>

<div>
<label for="name">Location Name *</label>
<label>Location Name *</label>
<input type="text" class="form-control" name="Name" placeholder="Location Name" maxlength="100" required>
</div>

<div>
<label for="type">Location Type *</label>
<label>Location Type *</label>
<select class="form-control" name="Type" required>
<option value="" selected></option>
<option value="" disabled selected hidden>Please Choose an option</option>
<option>Convenience Store</option>
<option>Farmer's Market</option>
<option>Food Bank Site</option>
Expand All @@ -302,8 +302,8 @@ <h1 class="sidebar-header">About<span class="sidebar-close"><i class="fa fa-care
</select>
</div>

<div id="services-form">
<legend class="services-form-legend">Does the site have fresh produce or accept any of these benefits?</legend>
<fieldset id="services-form">
<legend class="services-form-legend">Services accepted at this location</legend>
<div id="services-form-radio-options">
<div >
<span>Yes</span>
Expand All @@ -313,7 +313,7 @@ <h1 class="sidebar-header">About<span class="sidebar-close"><i class="fa fa-care
</div>

<fieldset class="services-form-radios" >
<label for="Fresh Produce">Fresh Produce *</label>
<label>Fresh Produce *</label>
<div>
<input type="radio" name="Fresh Produce" value="yes" required>
<input type="radio" name="Fresh Produce" value="no" required>
Expand All @@ -322,7 +322,7 @@ <h1 class="sidebar-header">About<span class="sidebar-close"><i class="fa fa-care
</fieldset>

<fieldset class="services-form-radios">
<label for="SNAP">SNAP *</label>
<label>SNAP *</label>
<div>
<input type="radio" name="SNAP" value="yes" required>
<input type="radio" name="SNAP" value="no" required>
Expand All @@ -331,7 +331,7 @@ <h1 class="sidebar-header">About<span class="sidebar-close"><i class="fa fa-care
</fieldset>

<fieldset class="services-form-radios">
<label for="WIC">WIC *</label>
<label>WIC *</label>
<div>
<input type="radio" name="WIC" value="yes" required>
<input type="radio" name="WIC" value="no" required>
Expand All @@ -341,7 +341,7 @@ <h1 class="sidebar-header">About<span class="sidebar-close"><i class="fa fa-care
</fieldset>

<fieldset class="services-form-radios">
<label for="Food Buckss">Food Bucks *</label>
<label>Food Bucks *</label>
<div>
<input type="radio" name="Food Bucks" value="yes" required>
<input type="radio" name="Food Bucks" value="no" required>
Expand All @@ -350,7 +350,7 @@ <h1 class="sidebar-header">About<span class="sidebar-close"><i class="fa fa-care
</fieldset>

<fieldset class="services-form-radios">
<label for="Food Rx">Food Rx *</label>
<label>Food Rx *</label>
<div>
<input type="radio" name="Food Rx" value="yes" required>
<input type="radio" name="Food Rx" value="no" required>
Expand All @@ -359,46 +359,46 @@ <h1 class="sidebar-header">About<span class="sidebar-close"><i class="fa fa-care
</fieldset>

<fieldset class="services-form-radios">
<label for="Farmer's market nutrition program">Farmer's market nutrition program *</label>
<label>Farmer's market nutrition program *</label>
<div>
<input type="radio" name="Farmer's market nutrition program" value="yes" required>
<input type="radio" name="Farmer's market nutrition program" value="no" required>
<input type="radio" name="Farmer's market nutrition program" value="unsure" required>
</div>

</fieldset>
</div>
</fieldset>


<div>
<label for="Address">Address *</label>
<label>Address *</label>
<input type="text" class="form-control" name="Address" placeholder="1234 Main St" maxlength="100" required>
</div>

<div>
<label for="Address2">Address line 2</label>
<label>Address line 2</label>
<input type="text" class="form-control" name="Address2" placeholder="Apartment, studio, or floor" maxlength="100">
</div>

<div>
<label for="City">City *</label>
<label>City *</label>
<input type="text" class="form-control" name="City" placeholder="Pittsburgh" maxlength="100" required>
</div>

<div>
<label for="State">State</label>
<label>State</label>
<select name="State" class="form-control">
<option selected>PA</option>
</select>
</div>

<div>
<label for="Zip">Zip *</label>
<label>Zip *</label>
<input type="text" class="form-control" name="Zip" placeholder="15222" maxlength="5" required>
</div>

<div>
<label for="Notes">Notes</label>
<label>Notes</label>
<textarea class="form-control" name="Notes" rows="3" maxlength="200"></textarea>
</div>

Expand All @@ -416,7 +416,6 @@ <h1 class="sidebar-header">About<span class="sidebar-close"><i class="fa fa-care
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/papaparse.min.js'></script>
<script src='https://unpkg.com/[email protected]/leaflet-knn.js'></script>
<script src="js/food_icons.js"></script>
<script src="js/intro-control.js"></script>
Expand Down