Show number of active layers on a badge #269
Conversation
|
The feature is complete. There is a bug where if I move away from the leaflet layers control before the markers load, the badge is hidden once they are loaded. I shall look over my code to correct the bug and update the PR. Screenshot of the working feature: |
example/layers.js
Outdated
|
|
||
|
|
||
| map.on('layeradd', function(ev) { |
There was a problem hiding this comment.
Lets also add all this code in the /src folder . We want this feature to work when user uses our allLayers feature which automatically adds the menu bar. Makes sense?
This file : https://github.com/publiclab/leaflet-environmental-layers/blob/master/src/AllLayers.js gives the user the ability to add multiple layers. Lets add here also. Thanks!
There was a problem hiding this comment.
Let's create a function of this and call here in example/layers.js and here https://github.com/publiclab/leaflet-environmental-layers/blob/master/src/AllLayers.js .
example/styles.css
Outdated
| color: black; | ||
| font-weight: bold; | ||
| font-size: 1.4em; | ||
| margin-left: 80%; |
There was a problem hiding this comment.
Can you test if this works on different screen sizes and share screenshot also :)
There was a problem hiding this comment.
Totally slipped my mind. Will make sure to test it and share the screenshots.
example/styles.css
Outdated
| margin-left: 80%; | ||
| position: absolute; | ||
| text-align: center; | ||
| top: 9px; |
There was a problem hiding this comment.
This hard-coded css also, i am not sure if it will work on all screen sizes .
| @@ -0,0 +1,25 @@ | |||
| L.Control.Badge = L.Control.extend({ | |||
There was a problem hiding this comment.
Let's add this badge functionality to Readme as well. Telling that this is automatically there if you use
L.LayerGroup.EnvironmentalLayers().addTo(map);
otherwise using the above function (which calls listeners) you can add!
example/layers.js
Outdated
|
|
||
|
|
||
| map.on('layeradd', function(ev) { |
There was a problem hiding this comment.
Let's create a function of this and call here in example/layers.js and here https://github.com/publiclab/leaflet-environmental-layers/blob/master/src/AllLayers.js .
Screenshot for screensize 320x568: |
crisner
changed the title
|
@sagarpreet-chadha Please review changes and let me know if I have missed anything. Also, please let me know if I have included the information in the Readme file in the right format. Thank you. |
example/styles.css
Outdated
| @@ -29,4 +29,20 @@ z-index: 10; } | |||
| padding-bottom: 25px; | |||
| margin-right: 65px; | |||
| display: inline; | |||
| } | |||
|
|
|||
| .badge { | |||
There was a problem hiding this comment.
Hey, the PR is all set. Only thing is that i think we should move this CSS to /src folder and on grunt build -> we should copy this from /src to /dist folder if it not already there. Makes sense? Thanks
There was a problem hiding this comment.
Okay. Shall work on it. Thanks!
README.md
Outdated
| @@ -241,3 +241,11 @@ We're going to try spinning this out into its own library; see: https://github.c | |||
| hash: true, // by default this is FALSE | |||
| }).addTo(map); | |||
|
|
|||
| ## Add badge to display number of active layers | |||
|
|
|||
| // To add the badge | |||
There was a problem hiding this comment.
Here we can mention the link to CSS file in /dist folder.
|
@sagarpreet-chadha Made changes requested. Please review. |
Fixes #201 (<=== Add issue number here)
Make sure these boxes are checked before your pull request (PR) is ready to be reviewed and merged. Thanks!
@publiclab/reviewersfor help, in a comment belowIf tests do fail, click on the red
Xto 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!