Feature/minimal mode #356

crisner · 2020-01-21T15:31:22Z

Fixes #123 (<=== 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 · 2020-01-21T15:38:39Z

Things done:

created a toggle button
Added toggle function
Added circle marker and styles to eonet fires layer
Added condition to render markers according to selected mode

Things to do:

Add circle marker and conditions to remaining layers
Add minimal mode control to one-liner code

Default mode:

Minimal mode:

The bottom-most button on the left side of the map is the button to toggle modes. The icon changes depending on the mode.

crisner · 2020-01-21T15:44:22Z

The toggle button is a simple leaflet styled button for now. What I had in my project proposal was this:

This seemed a bit out of place so I opted for the simpler button. I could maybe make the button attached here to look more like leaflet styles if a switch type toggle button is preferred.

sagarpreet-chadha

Implementation looks fine :)
Can you try to do this for a layer with many markers and then tell me if it is working smoothly? Thanks!

sagarpreet-chadha · 2020-01-21T16:13:11Z

example/layers.js

@@ -264,6 +264,9 @@ var embedControl = new L.control.embed({
 });
 embedControl.addTo(map);

+var modeControl = new L.control.minimalMode(leafletControl);


So many features :P
We need to make readme.md readble!!!

Yes. I will be doing that this weel. :)

crisner · 2020-01-22T12:31:20Z

Minimal mode markers from aqicn and opensense layers:

In default mode the screen starts to lag when both these layers are turned on. The experience seems to be smooth in minimal mode.

crisner · 2020-01-22T12:34:15Z

Also, the markers in aqicn layer are colour-coded and I carried the same over to minimal mode. So, when this layer is turned on with other layers it may be difficult to identify which layer the markers belong to. Should I change the markers to have a single colour?

crisner · 2020-01-22T14:59:47Z

To do:

add minimal mode to remaining layers
update readme

nstjean · 2020-01-22T15:27:28Z

The implementation looks good! Not sure about the button. I'm not sure people will have any idea what it does, though maybe the tooltip will be enough.

It looks like button shows the minimal dot when it's in minimal mode, and shows a map marker when the map markers are showing. Should that be opposite? So when you're in minimal mode it shows the full map marker on the button so you know to click it to show the full marker?

crisner · 2020-01-22T15:34:53Z

You are right! It should be the opposite!

More things to do:

Correct the icon displayed on toggle button
Add tooltip

I just got an idea. What if I add the toggle button like the zoom in and out buttons? One could be disabled while the other mode is active.

nstjean · 2020-01-22T17:16:40Z

I think that would be nice and visual to see what is on/off!

sagarpreet-chadha

Wow...happy to see we are not lagging with so many markers!!!
Leaflet circles are awesome!!!

crisner · 2020-01-23T12:20:42Z

Active layers: aqicn, openaq and opensense

Default mode;

Minimal mode;

crisner · 2020-01-23T12:43:48Z

To do:

write tests

crisner · 2020-01-24T13:15:37Z

Updated npm version by running npm version minor.

nstjean

This is great! I'm glad you added it to the one-liner code as well. I like the way you did the control to switch between the two modes.

nstjean · 2020-01-24T13:48:30Z

src/util/modeControl.js

+      this._map._minimalMode = this.options.minimalMode;
+      this._modeBtnContainer = L.DomUtil.create('div', 'leaflet-control-mode leaflet-bar leaflet-control');
+      this._defaultMode = this._createButton('Default mode', 'fas fa-map-marker-alt', this.loadDefaultMode);
+      this._minimalMode = this._createButton('Minimal mode', 'far fa-dot-circle', this.loadMinimalMode);


Maybe this could be something more descriptive, like "Default markers" and "Dot markers"? Or "Minimal markers"?

Do you mean in L17 and L18? If so for clarity I could change it to defaultModeBtn? I think it will be misleading to add 'markers' to the button's name.

Yes, I mean for the text that is in the pop-up, so it is descriptive to users. Changing the name to defaultModeBtn would be good!

Ah, that one! That's a great idea!

crisner · 2020-01-28T13:42:43Z

Minimal mode in the demo page: https://crisner.github.io/leaflet-environmental-layers/example/index.html#lat=34.034&lon=-91.165&zoom=5&layers=Standard,fractracker
Minimal mode in the one-liner code: https://crisner.github.io/leaflet-environmental-layers/example/oneLinerCodeExample.html#lat=43.00&lon=-4.04&zoom=3&layers=Grey-scale,odorreport,eonetFiresLayer

jywarren · 2020-01-28T15:56:58Z

Wow, really impressive!

Ready for a merge?

jywarren · 2020-01-28T15:57:36Z

These screenshots above would be great for a blog post!!! 😄

jywarren

Wow. big changes! So glad to see these tests in here!!!

jywarren · 2020-01-28T16:06:56Z

Ah, so, just needs a recompile. This is ready for merge otherwise? 🙌

crisner · 2020-01-28T16:24:53Z

Yes. Ready for a merge. :)

jywarren · 2020-01-28T20:10:18Z

Ah, sorry, i meant that it looks like the /dist/ files need to be recompiled, could you do that and then we'll merge? Thanks!

crisner · 2020-01-29T07:43:11Z

Merged and fixed conflicts
Updated build
Also added a demo page with multiple maps each having different options in the one-liner usage

@jywarren, this is now merge-ready. 😃

jywarren · 2020-01-29T15:13:08Z

So awesome! Fantastic work, @crisner !!

* Remove use of hardcoded extents for displaying layers (#332) * Fix embed code with duplicated text (#340) * Fix duplication of text in embed code * Update build file * Update README.md (#335) * Update README.md * Update README.md * Add check that layers group is not undefined when creating layers-sub-list (#339) Fixes #333 * Display new items mark in layers menu (#341) * Create function to check for available layers * Display badge to show new items * Save map instance in a variable * Update readme * Add contribute button to open infra map * Add media queries for size 235x300 (#346) * Add default basemap when undefined (#351) * Add default basemap when undefined * Update version number indicating bug-fix * [WIP] Add layers in include to map by default (#352) * Add unearthing layer to demo * Fix bug with removing points from the map on removeLayer * Add all layers in include param upon map initialization * bump to v2.1.9 * Implement new menu * Add new menu dependancies * Fix styles from overriding default leaflet classes * Refactor code * Fix styles for layer group name and layer description * Add option to disable layer visibility when param.include is true * Add option to use default layer control * Fix errors when trying to display layer when out of bounds * Add missing viewport meta tag * Move styles to LeafletEnvironmentalLayers.css * Update documentation * Add missing dependencies and update build * Fix error from unearthing layer on page reload * Set addLayersToMap options from param * Update documentation * Update AllLayers.js (#366) Fixed: Prevent use of the same default tile layer for multiple maps * Add PLpeopleLayer (#361) * add PLpeopleLayer to maps * fix function name to PLpeopleLayer * fix capital in function name * make naming consistent for both map examples * change layer name to PLpeople * version 2.2.0 and bump LBL to 1.7.0 (#368) * Feature/minimal mode (#356) * Create toggle mode control * Add marker for minimal mode * Change markers on mode change * Add condition and marker styles for eonet fires layer * Add minimal mode content to layers in layercode * Add minimal mode content to aqicn layer * Add minimal mode option * Refactor minimalMode control * Add mode control to one liner code * Add documentation to readme * Fix duplication of layers control, set simple layer control for demo * Add basic tests * Update build * 2.2.0 * Change button names and title * Update tests for mode control * Update build * Add demo with multiple maps in a single page * Add a check for jQuery and update build * Bug/fix missing layers in layer menu on refresh (#375) * Fix 'moveend' event check to affect only when removing layers from map * Add a check when adding minimal markers to confirm this._map exists * Update build * fix conflict * add parameter display to turn on layers * check if layer exists before turning it on * Remove conditions and code responsible for jquery duplication * Update link to jquery 3.3.1 and remove references to older versions * Move info.json outside iife and update build * Install cypress * published * Bug/fix layers not removed from map when hash false (#380) * Add error handling on removing unearthing from map * Remove redundant code * Comment out unused baselayer instantiation and update build * Uncomment baselayers * Reformat init defaults (#396) * rewrite init defaults * remove console.log * use L.Util.setOptions to set defaults * Add Cypress * Add tests to check leaflet left controls * Add tests for embed prompt and layers menu * Add child window to prevent iframe conflict on hash change * Add test to check hash update on map movement * Move hash test to a seperate file and increase delay * Set up http server for localhost * Ignore cypress screenshot and video folders * Set up cypress in travis * Oneliner/basic implementation tests (#397) * testing all the specs * using babel * add layer name id to broswer menu * leaflet not fully loading * recent tests * testing error in multiple maps * rewrite init defaults * basic one liner tests work * test shorter transpile files * emove jquery from gruntfile browserify dist * use L.Util.setOptions to set defaults * turn on basic tests again * disable babel-plugin-transform-object-rest-spread * clean up * rebase * add wisconsin layer back in and fix error * remove text-table files * add css file back in * fix merge errors * Edit and update documentation for more clarity (#367) * Add dependencies to documentation * Add updated documentation to readme * Add more information * Edit usage example for layer menu * Added links to more information * Update minimal mode documentation * Add files via upload * added a layerData folder containing the json file for sea level rise data Co-authored-by: Renisha Christie. A <29401459+crisner@users.noreply.github.com> Co-authored-by: Suyash Choudhary <57896905+sssash18@users.noreply.github.com> Co-authored-by: llabake <lemboyelabake@gmail.com> Co-authored-by: crisner <christie.reni@gmail.com> Co-authored-by: Sagarpreet Chadha <chadha.sagarpreet97@gmail.com> Co-authored-by: jywarren <jeff@unterbahn.com> Co-authored-by: z-arnott <50159450+z-arnott@users.noreply.github.com> Co-authored-by: Natalie St Jean <49460529+nstjean@users.noreply.github.com> Co-authored-by: Natalie <natalie.stjean@gmail.com> Co-authored-by: Cess <cessmbuguar@gmail.com>

crisner added 4 commits January 15, 2020 18:33

Create toggle mode control

85c5d95

Add marker for minimal mode

02e8620

Change markers on mode change

de36b9c

Add condition and marker styles for eonet fires layer

5697d02

crisner changed the title ~~Feature/minimal mode~~ [WIP] Feature/minimal mode Jan 21, 2020

crisner mentioned this pull request Jan 21, 2020

Outreachy project planning publiclab/plots2#6887

Closed

sagarpreet-chadha reviewed Jan 21, 2020

View reviewed changes

crisner added 2 commits January 22, 2020 20:14

Add minimal mode content to layers in layercode

7583b90

Add minimal mode content to aqicn layer

9f10ea2

sagarpreet-chadha reviewed Jan 23, 2020

View reviewed changes

crisner added 4 commits January 23, 2020 13:43

Add minimal mode option

bc77867

Refactor minimalMode control

d9ced40

Add mode control to one liner code

725598c

Add documentation to readme

9d6bb3c

crisner added 2 commits January 23, 2020 17:55

Merge branch 'master' into feature/minimal-mode

55a9aa3

Fix duplication of layers control, set simple layer control for demo

b916a6c

Add basic tests

ab9ac22

crisner changed the title ~~[WIP] Feature/minimal mode~~ Feature/minimal mode Jan 24, 2020

crisner added 2 commits January 24, 2020 18:40

Update build

ad95a02

2.2.0

faf8bf3

nstjean reviewed Jan 24, 2020

View reviewed changes

crisner added 2 commits January 27, 2020 21:13

Change button names and title

f1191d8

Update tests for mode control

fe96993

jywarren approved these changes Jan 28, 2020

View reviewed changes

crisner added 3 commits January 29, 2020 12:15

Merge branch 'master' into feature/minimal-mode

992bced

Update build

a8c0747

Add demo with multiple maps in a single page

071fa0b

jywarren merged commit c69ad9a into publiclab:master Jan 29, 2020

crisner mentioned this pull request Feb 4, 2020

Outreachy Project Recap: summary, planning & discussion publiclab/plots2#7432

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature/minimal mode #356

Feature/minimal mode #356

crisner commented Jan 21, 2020 •

edited

Loading

crisner commented Jan 21, 2020

crisner commented Jan 21, 2020

sagarpreet-chadha left a comment

sagarpreet-chadha Jan 21, 2020

crisner Jan 22, 2020

crisner commented Jan 22, 2020

crisner commented Jan 22, 2020

crisner commented Jan 22, 2020

nstjean commented Jan 22, 2020

crisner commented Jan 22, 2020 •

edited

Loading

nstjean commented Jan 22, 2020

sagarpreet-chadha left a comment

crisner commented Jan 23, 2020

crisner commented Jan 23, 2020

crisner commented Jan 24, 2020

nstjean left a comment

nstjean Jan 24, 2020

crisner Jan 24, 2020

nstjean Jan 24, 2020

crisner Jan 24, 2020

crisner commented Jan 28, 2020

jywarren commented Jan 28, 2020

jywarren commented Jan 28, 2020

jywarren left a comment

jywarren commented Jan 28, 2020

crisner commented Jan 28, 2020

jywarren commented Jan 28, 2020

crisner commented Jan 29, 2020

jywarren commented Jan 29, 2020

Feature/minimal mode #356

Feature/minimal mode #356

Conversation

crisner commented Jan 21, 2020 • edited Loading

crisner commented Jan 21, 2020

Default mode:

Minimal mode:

crisner commented Jan 21, 2020

sagarpreet-chadha left a comment

Choose a reason for hiding this comment

sagarpreet-chadha Jan 21, 2020

Choose a reason for hiding this comment

crisner Jan 22, 2020

Choose a reason for hiding this comment

crisner commented Jan 22, 2020

Minimal mode markers from aqicn and opensense layers:

crisner commented Jan 22, 2020

crisner commented Jan 22, 2020

nstjean commented Jan 22, 2020

crisner commented Jan 22, 2020 • edited Loading

nstjean commented Jan 22, 2020

sagarpreet-chadha left a comment

Choose a reason for hiding this comment

crisner commented Jan 23, 2020

Default mode;

Minimal mode;

crisner commented Jan 23, 2020

crisner commented Jan 24, 2020

nstjean left a comment

Choose a reason for hiding this comment

nstjean Jan 24, 2020

Choose a reason for hiding this comment

crisner Jan 24, 2020

Choose a reason for hiding this comment

nstjean Jan 24, 2020

Choose a reason for hiding this comment

crisner Jan 24, 2020

Choose a reason for hiding this comment

crisner commented Jan 28, 2020

jywarren commented Jan 28, 2020

jywarren commented Jan 28, 2020

jywarren left a comment

Choose a reason for hiding this comment

jywarren commented Jan 28, 2020

crisner commented Jan 28, 2020

jywarren commented Jan 28, 2020

crisner commented Jan 29, 2020

jywarren commented Jan 29, 2020

crisner commented Jan 21, 2020 •

edited

Loading

crisner commented Jan 22, 2020 •

edited

Loading