codeforpittsburgh / food-access-map Goto Github PK
View Code? Open in Web Editor NEWLicense: MIT License
License: MIT License
we have a demo dropdown to auto-focus the map on different neighborhoods or towns. based on either client input or just trends in the towns appearing in our data table we should update the set of town names from the 2 demo names to an actual set
move 'navebar' type items to their own shareable component
style navbar
add navigation link to the map-pin popup that appears for each food site which can take you to the details page template for that food site
The same filters/search functionality on the table should also be a feature for the map side- e.g. a user should be able to filter for supermarkets, accepts WIC, open now.
This one is open for discussion on how best to implement:
PFPC would like there to be a way for users to search for certain criteria/keywords that may not correspond to something in the dataset. For example, if someone searches "free food" then we should show only food pantries and summer food sites. If someone searches "produce" we should only show places with produce.
Not sure if this will entail us trying to guess every combination of search terms someone might use? Maybe we can add some tags or keywords to the food sites, like "free", "families", "produce"?
PFPC would like us to have different icons for different food sites. E.g. a grocery cart icon for a supermarket, a can (like canned goods) for a food pantry, etc. The icon types should match the location types in the dataset.
https://github.com/CodeForPittsburgh/food-access-map-data/blob/master/merged_datasets.csv
Icons should be simple, easy to understand, ideally different colors, and free of restrictions so we can use them without copyright issues.
once back end api is set up:
if there are multiple endpoints (i.e. we can get summary data about a lot of food sites or we can also get detailed object data about an individual food site) then tear out redux/saga, etc to keep the app more lightweight, we don't need these tools for something this size and native react state management is sufficient
if there is one main api call that pulls in all data, make sure it is on a central wrapping component we always hit no matter what url might be bookmarked, have it run only once on load. Investigate if 'react hooks' can suit our purposes (sharing data between map page/table page, as well as individual food site detail page template) or set up redux in the app to share this state
Just checking out this project to see if there was anything I could help with. I figured I'd run tests before getting started, and I'm getting some linter errors regarding lines 169-192 in foodSiteDetail. ESLint wants to add 2 spaces, but then when you do that Prettier wants you to take them away.
From my understanding eslint-config-prettier
is supposed to prevent this, but I think the indent rule in eslintrc is overriding that. When I remove that prettier handles indentation just fine.
When a lot of markers are on the map, it updates very slowly.
I think we may have too many markers to use the react-map-gl
<Marker/>
component.
The one solution I can think of is to render the markers server-side (on mapbox). This would involve reflecting the state of our app in a Mapbox style object and passing it to the Map
component's mapStyle
prop.
We'll need a view that displays the information and actions attached to a particular location.
Listing things like name, location, and the various scores and such attached to it.
Actions may include navigation.
Please comment with any suggestions.
Observed Behavior: When entering a search term, the results in the dropdown change based upon the map extents
Expected Behavior: When entering a search term, results will represent any records in the dataset that meet the search parameters
The primary map script ( script.js ) includes the following code to add the search to the map
var search = new L.esri.BootstrapGeocoder.search({
inputTag: 'searchInput',
placeholder: 'ex. Bloomfield',
}).addTo(map);
bootstrap-geocoder.js defines the following code at line 70 which is a clue to the behavior issue. I believe this code is responsible for navigating to the selected item on the suggested results, but it points to some inner workings that I think are relevant
h.DomEvent.addListener(this._suggestions, "mousedown", function(e) {
var t = e.target || e.srcElement;
this._geosearchCore._geocode(t.innerHTML, t["data-magic-key"], t.provider),
this.clear()
}, this),
GeosearchCore.js defines the following code at line 110 that populates the suggested items
for (var i = 0; i < this._providers.length; i++) {
var provider = this._providers[i];
var request = provider.suggestions(text, this._searchBounds(), createCallback(text, provider));
this._pendingSuggestions.push(request);
}
This code references this.searchBounds(), which among other things relies on an options object to make a decision about what to return.
I suspect if we can set the GeosearchCore this.options.useMapBounds to false, the system will search across the breadth of the dataset - although I could be wrong-o! It has happened before :D
We need a standardized way to collect user submitted info on any new location that is missing from the map. This could be a google form or similar.
The headings from the merged dataset can be the questions to answer- some should be choose from a list (e.g. Type), some should be check boxes (e.g. open days Sun Mon Tue etc) and others type in like address.
The map/table needs filters for users to input their criteria:
We also need a dropdown for users to select the type of store they are looking for: Supermarket, convenience store, farmers market, or summer food site. This should be a "check all that apply" filter type.
node_modules
in the production bundle is nearly 7mb. It looks like something is going wrong during the build step and the prod bundle is getting dev packages. Once that is taken care of there is room for some tree-shaking and other optimization (like lazy loading LocationTable
since material-table
is pretty big)
npm run build
npm run analyze
stats.json
to http://chrisbateman.github.io/webpack-visualizer/react-dom.development.js
and lodash is over 500kb whereas I think it is <80kb when minified.might be good if table items can be clicked to go to details page for that food site
The current navbar gets squished when in mobile demensions.
We should make the menu collapse into a dropdown on small screens.
we have a table with a couple of random sample props. using either client input or our own logic we should determine which props from our dataset belong on the easy access table and reconfigure our table to display those props
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.