hackgvl / open-map-data-multi-layers-demo Goto Github PK

#11 should probably be implemented first since it's more straightforward and this item naturally builds off of it

Our custom map layers are Google spreadsheets that should be easily editable by their maintainer(s). However, there's no easy mechanism to help contribute to keep this data up-to-date (hey! xyz closed down, abc just opened), or volunteer to become a maintainer of a map layer.

On an easy level, this might just mean displaying links to suggestion mode in the backing Google sheet for a map layer, or maybe working more closely with the OpenMap API to automate functions around maintainers once hackgvl/OpenData#27 is implemented

The maximum zoom on the map is currently set to 20, however at this zoom level the map tiles appear as solid grey images.

You can see it in action here: https://hackgvl.github.io/open-map-data-multi-layers-demo/?lat=34.851224882536776&lng=-82.39967912435533&zoom=20&maps=free-wi-fi-hotspots

I'm wondering if the max zoom needs to be 18 instead since it seems to be inclusive.

Similar to hackgvl/OpenData#54, it would be nice to display credits for the maintainers of the map layers when they are loaded.

This could also be expanded into a mechanism to contribute as described in #10

@grinstead this project is a fork and we only had one open issue on the original project.

I've enabled the issues here.

If you find things that need to be updated or contributions, then feel free to share them here.

This repo is hosted on an Apache server and I have it sort of bubble-gum and duck taped in because I have no experience hosting javascript apps. So, I could also try to redeploy updates to the existing site and post the errors or roadblocks I was getting with hosting this demo map.

The map layer spreadsheets were moved recently to an OpenCollective owned Google Workspace that's associated with Code With the Carolinas

These files were previously in a Code For Greenville Google Workspace and Code For America killed that in June 2023 and we agreed to merge into Code For / With the Carolinas as a Shared Drive in the meantime. That Shared Drive is now empty and the files still exist and are shared with some people, but as read-only.

I'm not sure it's worth asking them to setup permissions when could just move these under a RefactorGVL Shared Drive if Code With The Carolinas doesn't see a way those layers fit into things they are doing.

Currently there are no e2e tests for several things:

• Checking and unchecking a map layer (and having the URL update)
• Panning/zooming around the map (and having the URL update)
• Making sure all the tabs render properly

Bonus points if the api's response can be mocked so the tests aren't dependent on the status of the OpenData api!

Since the rebranding to HG Labs, we lost use of the previous CFG domain for Olivia's version of the demo map.

The current GitHub page URL for the demo map is https://hackgvl.github.io/open-map-data-multi-layers-demo/ , but it would be nice to have that under data.openupstate.org, or some other domain or subdomain that's not a GitHub domain.

@oliviasculley I noticed the Recycling layer wasn't rendering on the Demo Map, or in the map preview.

The GeoJSON is fine and the issue, at least with the map preview, is the recycling data has zip codes as one of the key:value pair in map point data features.properties values.

I think we both have custom JS to find and replace underscores and to force URLs in the features.properties into HTML links for the pop-ups when a point is clicked on the map.

The Javascript is seeing the zip code as a numeric type, which was breaking the String.replaceAll() I was using on the map preview.

So, it may be breaking the underscore replace() or URL replace you're using in https://github.com/hackgvl/open-map-data-multi-layers-demo/blob/stable/src/components/MainMap.vue around the onEachFeature section starting around line 123.

I'm not sure if what I did is the most elegant, but forcing the features.properties key and value to a string with toString() fixed it.

 
var popuphtml = popuphtml + "<li><strong>" + key.toString().replaceAll('_', ' ').toProperCase() + "</strong>: " + value.toString().replaceAll(urlRegEx, '<a href="$1">$1</a>') + "</li>"

Add a tool like cypress-axe or cypress-audit to the Cypress setup in order to perform automated accessbility testing upon the application.

Add a step to ci.yml to upload any screenshots (and maybe videos, but they're larger) of Cypress test failures for assistance with troubleshooting. This can be done by using the upload-artifact action.

For some reason the navbar isn't appearing on mobile devices, however it works in mobile view on desktops.

I've reproduced this issue on Chrome, Brave and Firefox on an Android device. 🥺

Create a default "catch-all" route for anything that doesn't match up with a view.

Current view of /meow:

Maybe the default page could just be the map?

Steps to reproduce:

1. Open the map
2. Check some layers
3. Switch to the "About" tab
4. Switch back
5. None of the old pins load, and trying to load more layers breaks :(

Ideal requirements to close this issue:

1. Adding a test that tests the above scenario to make sure it works in the future
2. Fixing the issue 😋

@oliviasculley I'm reminded this demo was under the Code For Greenville domain / GitHub Pages, which is now redirected to Code For The Carolinas.

The new GH Pages URL is working
https://hackgvl.github.io/open-map-data-multi-layers-demo/

I've updated the demo link on the main Maps page, but I suppose we could consider hosting this under the data.openupstate.org domain, or even under the HackGreenville domain. I think I'd prefer the data.openupstate.org unless / until we have a plan for what fits under the HG site and what is best on another domain.

Also, the About page references CFG and the CFG GitHub repo, so we should at least update those to the HG equivalents
https://hackgvl.github.io/open-map-data-multi-layers-demo/about

Mock/intercept data.openupstate.org api calls to prevent them from affecting the tests

Need to mock in:

• Unit tests
• Cypress tests