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.

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

geoJSON layer: handle hover, improve click handling, use icons #42

Open
wants to merge 13 commits into
base: fix-map
Choose a base branch
from

Conversation

qualitymanifest
Copy link
Contributor

@qualitymanifest qualitymanifest commented Jan 29, 2020

  • Added hover handling. Throttled the hover event so that it doesn't blow up slower computers Specified an interactive layer, which allows hovering to work properly
  • Changed click radius for computers. Once hovering was implemented it was clear that the click radius was way too wide for precise pointers. User agent sniffing might not be a guarantee but it is probably the best option, short of waiting for a touch event and changing the click radius.
  • Removed the coordinate correction hack. A bunch of the points will appear in Antarctica until the coordinates are corrected in the database.
  • Close popups when clicking outside of feature
  • Calculate the closest feature to a click
  • Added ability to use images instead of built-in mapbox pins, and added a couple sample icons to show how it works. See relevant issues Icons for food site types #36 regarding icons and Location types should be standardized food-access-map-data#19 regarding location type attributes
  • Added min & max zoom values to improve performance
  • Trimmed unnecessary info out of geoJSON to improve map performance
  • Updated react-map-gl. Fixed some issues and doesn't seem to have any problems with backwards compatibility.

- Throttled the hover event so that it doesn't blow up slower computers
- Changed click radius for computers. Once hovering was implemented it was clear that the click radius was way too wide for precise pointers. User agent sniffing might not be a guarantee but it is probably the best option, short of waiting for a touch event and changing the click radius.
Wanted to remove this now so that it doesn't get forgotten about. Roughly half of the points will appear in Antarctica until the coordinates are corrected in the database.
@qualitymanifest qualitymanifest changed the title Handle hover over geoJSON features Handle hover & improve click handling over geoJSON features Jan 29, 2020
Obviously the images need to be changed and expanded upon. I grabbed these (free, no-attribution) icons from iconfinder.com just to use them as an example.

Relevant issue CodeForPittsburgh#36 here for icon status, and issue CodeForPittsburgh#19 at food-access-map-data for info on location type attributes
I had previously assumed that the other site data was passed into foodSiteDetail, however after looking it is clear that it is intended to fetch that from the server. No point in processing it into an object then.
This fixes mapbox error 'Error removing layer of undefined' when navigating away from the map component

I thought I had updated react-map-gl to the newest already but apparently not!
@qualitymanifest qualitymanifest changed the title Handle hover & improve click handling over geoJSON features geoJSON layer: handle hover, improve click handling, use icons Jan 30, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant