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.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Show number of active layers on a badge #269

Open
wants to merge 14 commits into
base: main
Choose a base branch
from
Open

Show number of active layers on a badge #269

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
7108446
Add a control for displaying badge
crisner Oct 13, 2019
68738c2
Add styles for the badge
crisner Oct 13, 2019
8601df6
Align badge
crisner Oct 13, 2019
ff5b714
Display badge on the map
crisner Oct 13, 2019
9414af2
Move code to display number of active layers into a function
crisner Oct 14, 2019
6958884
Include badge to display number of active layers
crisner Oct 14, 2019
2f64322
Save layers control to a variable
crisner Oct 14, 2019
da8f401
Fix bug that hid the badge
crisner Oct 14, 2019
6ee3bc4
Add extra parameter for layers control
crisner Oct 14, 2019
c03b0b4
Add badge functionality to readme file
crisner Oct 14, 2019
420e2f8
Resolve merge conflicts by accepting both changes
crisner Oct 14, 2019
2c5d354
Extract badge styles to a seperate stylesheet
crisner Nov 4, 2019
2addd18
Copy badge stylesheet to dist on build
crisner Nov 4, 2019
863687b
Add link to stylesheet in index.html and readme.md
crisner Nov 4, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 35 additions & 1 deletion example/layers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,5 +229,39 @@
var leafletControl = new L.control.layers(baseMaps,overlayMaps);
leafletControl.addTo(map);

// Display number of active overlay layers
var touched = false;
var activeOverlays = leafletControl.getActiveOverlayNames();
var badge = L.control.badge(activeOverlays.length, { position: 'topright' }).addTo(map);


map.on('layeradd', function(ev) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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!

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 .

// Displays badge on page load
$(badge.getContainer()).css("display", "block");
if(touched) {
$(badge.getContainer()).css("display", "none");
}
});

map.on('overlayadd', function(ev) {
this.removeControl(badge);
$(badge.getContainer()).css("display", "none");
activeOverlays = leafletControl.getActiveOverlayNames();
badge = L.control.badge(activeOverlays.length, { position: 'topright' }).addTo(map);
$(badge.getContainer()).css("display", "none");
});

map.on('overlayremove', function(ev) {
this.removeControl(badge);
activeOverlays = leafletControl.getActiveOverlayNames();
badge = L.control.badge(activeOverlays.length, { position: 'topright' }).addTo(map);
$(badge.getContainer()).css("display", "none");
});

L.DomEvent.on(leafletControl.getContainer(), 'mouseover', function (ev) {
touched = true;
$(badge.getContainer()).css("display", "none");
});

L.DomEvent.on(leafletControl.getContainer(), 'mouseout', function (ev) {
$(badge.getContainer()).css("display", "block");
});
16 changes: 16 additions & 0 deletions example/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,4 +29,20 @@ z-index: 10; }
padding-bottom: 25px;
margin-right: 65px;
display: inline;
}

.badge {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay. Shall work on it. Thanks!

width: 30px;
height: 30px;
padding: 4px 2px 0;
border-radius: 50px;
border: 2px solid #908f8f;
background: white;
color: black;
font-weight: bold;
font-size: 1.4em;
margin-left: 80%;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you test if this works on different screen sizes and share screenshot also :)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Totally slipped my mind. Will make sure to test it and share the screenshots.

position: absolute;
text-align: center;
top: 9px;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This hard-coded css also, i am not sure if it will work on all screen sizes .

}
25 changes: 25 additions & 0 deletions src/util/badgeControl.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
L.Control.Badge = L.Control.extend({
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Excellent!

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay 馃憤


initialize: function(content, options) {
this.content = content;
L.setOptions(this, options);
},

onAdd: function(map) {
var badgeElement = L.DomUtil.create('div');

badgeElement.classList.add('badge');
badgeElement.innerHTML = this.content;

return badgeElement;
},

onRemove: function(map) {
// Nothing to do here
}

});

L.control.badge = function(content, options) {
return new L.Control.Badge(content, options);
}