robinmetral / coffee Goto Github PK
View Code? Open in Web Editor NEWMapping Coffee :coffee:
Home Page: https://www.mappingcoff.ee
Mapping Coffee :coffee:
Home Page: https://www.mappingcoff.ee
Have data comply with the GeoJSON format to allow data export.
This would help people export coffee shops to their own personal maps, for example on uMap or Google Maps.
Don't display the Not Found message before state has been fetched from firebase.
Currently, a popup opens when clicking a marker (layer.click
).
I want a tooltip to appear when hovering a marker with the café's name, and a click event (react-leaflet events docs) to trigger a state change in App
that renders:
Unicode icons look good on Firefox but they're ugly on Chrome 🙁
Feedback received: make it more natural
ViewCafe
PanelIcons
box-sizing
to avoid padding interfering with layoutsRender a pace-like progress indicator while fetching cafes from Firebase
It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.
For the module builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):
CommonJS Modules:
const firebase = require('firebase/app');
require('firebase/<PACKAGE>');
ES Modules:
import firebase from 'firebase/app';
import 'firebase/<PACKAGE>';
Typescript:
import * as firebase from 'firebase/app';
import 'firebase/<PACKAGE>';
For now, simply add a breakpoint where the panel will cover the map entirely instead of a fraction of it.
Instead of an unreadable opening_hours
string, render something like this
@firebase/database: FIREBASE WARNING: set at /some/path failed: permission_denied
State is correctly cleared on logout, but I think that re-base
is attempting to clear the firebase data too (hence the errors).
This should not happen, since I'm removing the firebase binding here.
i.e. change the icon or place a popup for the marker whose osm id is state.clicked
Also rename clicked
into active
... and then work on a web form to add coffee shops (#6)
Think about a system to save each created coffee shop (object) on Github, Staticman style. (Staticman?)
Style admin panel with this
Done in some components, check that it's up to date everywhere
This typically means that a café has closed. What would happen attempting to fetch it?
Making a small function locally will probably be quicker that importing everything manually into Firebase
Lost in the transfer to a React-based app
To reproduce, visit the map and hover a café.
On any second hover event, the tooltip is properly positioned on tooltipAnchor
.
Routing with react-router
params (declared as path:"/:myParam"
and accessed as props.match.params.myParam
) breaks on the deployed app.
Accessing /:myParam
should render the <ViewResume />
component and either fetch a resume or show an error message.
Instead, it lands on a GitHub 404.
List a selection of cities (set in Firebase) in a Leaflet control to re-center the map on the chosen city.
Write about the project in an about page.
Also fetch and display total number of coffee shops, and total number of coffee shop additions to OpenStreetMap.
https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
(to do when everything else is functional)
The best case scenario would be to use the LocalStorage API to save whether a user has visited before or not.
Another, simpler but not ideal solution would be to show this message to all visitors, new and returning alike, by setting the panel status as open
by default in App.js
That would be nice 🙂
Main question: where to host them?
The solution, in this case, is to hide the overflow on a parent element, rather than relying on the hidden overflow on the body.
?
react-router
logout()
should only disable the possibility of editing cafes, but keep them on the map.
Similar to how I am already pulling coordinates, just like I was doing it in the old version of robinmetral/coffee
Add a feature to filter coffee shops by:
Highlight coffee shops that fit the filtering (maybe set the icon for other coffee shops in grayscale?)
Nice to have (or for later): display results as a list in a sidebar
I'm trying to learn flow
and use it in this app.
However I can't stop it from screaming at my styled-components
(see StackOverflow).
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.