Replace layer control with new layers browser menu

[crisner]

Fixes #318 (<=== Add issue number here)

Make sure these boxes are checked before your pull request (PR) is ready to be reviewed and merged. Thanks!

• PR is descriptively titled 📑 and links the original issue above 🔗
• tests pass -- look for a green checkbox ✔️ a few minutes after opening your PR
• code is in uniquely-named feature branch and has no merge conflicts 📁
• screenshots/GIFs are attached 📎 in case of UI updation
• ask @publiclab/reviewers for help, in a comment below

We're happy to help you get this ready -- don't be afraid to ask for help, and don't be discouraged if your tests fail at first!

If tests do fail, click on the red X to learn why by reading the logs.

Please be sure you've reviewed our contribution guidelines at https://publiclab.org/contributing-to-public-lab-software

Thanks!

[crisner]

This is what I have so far:

What's left to do:

• Refactor code
• More styling on the report button
• Pull data from the layers information JSON file submitted in PR Collect layer information #317
• Update style changes

[crisner]

Work done:

• Refactored code to avoid repetition
• Pulled in sample information from JSON file
• Updated styles

Things to do:

• Update style of data info popup or add a different popup
• Pull in actual data
• Show only/filter layers available in the current bounds
• Add media queries

[crisner]

@jywarren, @sagarpreet-chadha, please let me know what you think about what I have done so far. Also, should I wait for PR #317 to be merged or shall I copy the JSON file from it to this PR so that I can use it to pull in information?

[sagarpreet-chadha]

Wow!!!

[sagarpreet-chadha]

I have not reviewed in depth, will do after the PR is done from your side.
This looks fantastic 😄 !!!
I am just wondering how it will look for small maps on plots2, like profile map or side-bar map?
Also how do we close this control bar as the overlay button is not visible in screenshots.
Thanks!

[crisner]

Thanks! I shall attach a gif when I am done or apply this control to the demo file and have it live on my forked LEL repo's gh-pages if that's alright. This just replaces the default leaflet control. So, the behaviour is the same for opening and collapsing with some added features to the layers list. 😄

I am just wondering how it will look for small maps on plots2, like profile map or side-bar map?

I am assuming media queries can help with small embeds? We could hide layer information in small screens as well if it seems too crowded. I will have to make some changes to the overlays object in AllLayers.js file for testing in plots2. I'll work that when this is ready.

[crisner]

Work done:

• Pulled in actual data from JSON file
• Refactored code
• Added media queries

Screenshots of screens at different sizes

Screenshots 1440px & 1024px:

Screenshots 768px & 425px:

Screenshots 375px & 320px:

Things to do:

• Update style of data info popup or add a different popup
• Show only/filter layers available in the current bounds

[sagarpreet-chadha]

Looking super cool!!!

…

On Fri, 27 Dec 2019, 21:52 Renisha Christie. A, ***@***.***> wrote: Work done: - Pulled in actual data from JSON file - Refactored code - Added media queries Screenshots of screens at different sizes Screenshots 1440px & 1024px: [image: 1440px] <https://user-images.githubusercontent.com/29401459/71523887-f1126c80-28f0-11ea-9fb6-8eca58b31702.png> [image: 1024px] <https://user-images.githubusercontent.com/29401459/71523891-f53e8a00-28f0-11ea-83b8-02395d4ccd6b.png> Screenshots 768px & 425px: [image: 768px] <https://user-images.githubusercontent.com/29401459/71523897-f8d21100-28f0-11ea-91bc-66ae9083308b.png> [image: 425px] <https://user-images.githubusercontent.com/29401459/71523900-fcfe2e80-28f0-11ea-84d1-09c24b8d685e.png> Screenshots 375px & 320px: [image: 375px] <https://user-images.githubusercontent.com/29401459/71523901-01c2e280-28f1-11ea-8ce5-abc4ab3a4750.png> [image: 320px] <https://user-images.githubusercontent.com/29401459/71523903-05ef0000-28f1-11ea-90a0-495144605783.png> Things to do: - Update style of data info popup or add a different popup - Show only/filter layers available in the current bounds — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#320?email_source=notifications&email_token=ADSCRRPOG7QPOM7Z6NYLYQ3Q2YTVVA5CNFSM4J7FZJ42YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHXNNRY#issuecomment-569300679>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADSCRRI2ZUTHYG6WGIJIPJ3Q2YTVVANCNFSM4J7FZJ4Q> .

[crisner]

Work done:

• Worked on modal popup(updated styles, prevented duplicated modals for the same layer)
• Implemented layer filtering depending on layer bounds. Does this address this issue Track the bounding box of each layer, and display only those which intersect with current view #117 ?

@sagarpreet-chadha, This PR is ready for review. However, there are a couple of bugs I'm stuck on. I can work on this depending on your feedback.

The feature is live at: https://crisner.github.io/leaflet-environmental-layers/example/index.html#lat=43.00&lon=-4.07&zoom=3&layers=Standard

The following are the bugs I came across:

1. The layer gets removed from the list only in the next map event when the layer is turned on.
   I came across this issue when I implemented map.removeLayer(layer) if map.hasLayer(layer) returns true. When the map no longer intersects first the layer is removed from the map but still remains visible in the menu. The layer gets removed from the menu only in the next map movement. Do we need to remove the layer from view when it is filtered out or do we let it show in the view even when the layer is not accessible via the layers menu?

2. The filtering does not work when the map is first loaded on the page but work fine after reloading.
   I can't seem to figure out the issue. I tried the load map event but there was no change in the issue. I can look into this further tomorrow. Currently, the map shows all layers on page load then actively filters out the layers after reload or map moveend events.

[nstjean]

This looks really good!!

[crisner]

Fixed all bugs! 🎉 😄

P.S:- Currently a layer is completely removed from map view when it is filtered out in the layers menu. I've updated the gh-pages on my local repo to reflect the bug fixes.

[sagarpreet-chadha]

Excellent!!!

[sagarpreet-chadha]

Hey @jywarren , if this looks good to you i can bump the version and release it to npm 😄 !

[sagarpreet-chadha]

I think let's merge this, if there will be any changes by @jywarren we can do that in another PR :)

[crisner]

Awesome! Thanks, @sagarpreet-chadha!

[jywarren]

This is INCREDIBLE! So great!

Congrats on a great job!

I'm wondering if we should open a new issue to collect tiny UI refinements and suggestions. It's a huge project and it'll be great to see how people use it. We also have a https://lookback.io account if you'd like to try recording some user testing to get feedback on this!

[crisner]

I'm wondering if we should open a new issue to collect tiny UI refinements and suggestions. It's a huge project and it'll be great to see how people use it. We also have a https://lookback.io account if you'd like to try recording some user testing to get feedback on this!

That's a great idea! https://lookback.io looks interesting! Posting the self-test link from lookback.io to PublicLab.org as a note or here as an issue would be a good idea to get users to test I think? or do we have a list of users, who would be ready for testing, to whom we could send the link to?

[jywarren]

We can reach out to the general public on Twitter, using the main PL account... we can also make a GCI task from it, perhaps? What would be your text prompt you'd like people to see, and what page should they be pointed at? Thanks!

…

On Fri, Jan 3, 2020 at 1:46 AM Renisha Christie. A ***@***.***> wrote: I'm wondering if we should open a new issue to collect tiny UI refinements and suggestions. It's a huge project and it'll be great to see how people use it. We also have a https://lookback.io account if you'd like to try recording some user testing to get feedback on this! That's a great idea! https://lookback.io looks interesting! Posting the self-test link from lookback.io to PublicLab.org as a note or here as an issue would be a good idea to get users to test I think? or do we have a list of users, who would be ready for testing, to whom we could send the link to? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#320?email_source=notifications&email_token=AAAF6J52X6ZQKLFML2BIX53Q33NNTA5CNFSM4J7FZJ42YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIANSFY#issuecomment-570480919>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAF6JY7CM2QFH5JXJV5SALQ33NNTANCNFSM4J7FZJ4Q> .

[crisner]

Awesome!

I am not confident about my content-writing abilities but here's some text I came up with for the prompt. The text prompt could be:

"We have made a layers browser feature to browse and select layers with environmental data based on the location on the map. We would like your feedback to help make it better. Help us test the feature by clicking the link given below. The feature can be accessed by hovering or clicking on the button on the top-right."

Below the prompt, we could provide the lookback.io link with a screenshot of the map with an arrow pointing towards the button. Because the new layers menu is implemented only in the demo page we can share the gh-pages link to the demo page for the users to test.

[jywarren]

This is great; there are maybe 2 types of user tests we could build this into - one could say, "try zooming into a specific city and turning on 3 layers", or we could do something more high-level and goals-driven "try using it to compare 2 environmental issues" or something like that. I can get one of these set up today and circulate it to staff and PL organizers for starters?

…

On Mon, Jan 6, 2020 at 2:26 AM Renisha Christie. A ***@***.***> wrote: Awesome! I am not confident about my content-writing abilities but here's some text I came up with for the prompt. The text prompt could be: "We have made a layers browser feature to browse and select layers with environmental data based on the location on the map. We would like your feedback to help make it better. Help us test the feature by clicking the link given below. The feature can be accessed by hovering or clicking on the button on the top-right." Below the prompt, we could provide the lookback.io link with a screenshot of the map with an arrow pointing towards the button. Because the new layers menu is implemented only in the demo page we can share the gh-pages link to the demo page for the users to test. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#320?email_source=notifications&email_token=AAAF6J5ORRG7DCBOPRCOJLDQ4LLYFA5CNFSM4J7FZJ42YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIEUL4Q#issuecomment-571033074>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAF6J6ACOO5LMXAZA4HYILQ4LLYFANCNFSM4J7FZJ4Q> .

[crisner]

Awesome!

[crisner]

Sounds good!

[jywarren]

Hi, just wondering - the gh-pages demo doesn't show all layers, and I wondered two things:

1. should we make the one-line version at https://github.com/publiclab/leaflet-environmental-layers/blob/master/example/oneLinerCodeExample.html be the default demo now, so rename it index.html and move index.html to something like specific-layers.html?
2. is it not showing all layers because we haven't enabled them all in the example? Let's make our default example show all available layers, and this seems to make the above idea even better, because then as we add layers to the .json file we won't have to update the example; they'll be included automatically!

What do you think?