Comments (11)
You can group your buttons with L.easyBar
and then style that bar with the .leaflet-bar
selector.
Based on the code you shared, it would look roughly like this:
var fileTimes = [00,12];
var buttons = fileTimes.map(function(t){
var time = String(t.pad(2))
return L.easyButton({
id: time,
states: [{
icon: '<strong>' + time + '</strong>',
onClick: function (e) {
changeMapByButton(time)
alert(time)
}
}]
});
});
var bar = L.easyBar(buttons); // wrap your buttons with an easyBar
bar.addTo(map); // add the bar to your map
then a little bit of css to get your buttons aligned:
.leaflet-bar {
/* style your buttons horizontally here */
}
This code is untested, but the general idea should help you get started.
from leaflet.easybutton.
i have already done this but not work
my css for leafletbar
.leaflet-bar {
position: fixed;
z-index: 1000;
top: 20px;
left: 75px;
}
it move this bar to top but button didn't in one line @atstp
from leaflet.easybutton.
the code you shared adds each button separately. Based on what you're describing, you need to use an L.easyBar
to group the buttons.
var buttons = []; // NOTE: use a separate array to collect the buttons
var fileTime = [00,12]
for (var i=0;i<fileTime.length;i++){
(function () {
var time = String(fileTime[i].pad(2))
var mybutton = L.easyButton({
id: time,
states: [{
icon: '<strong>' + time + '</strong>',
onClick: function (e) {
changeMapByButton(time)
alert(time)
}
}]
});
buttons.push(mybutton) // NOTE: add to the buttons array instead of the map
})();
}
var bar = L.easyBar(buttons); // NOTE: create an easyBar with the buttons
bar.addTo(map); // NOTE: add the bar to the map
This will group the buttons under a parent element that you can then style to fit your needs.
from leaflet.easybutton.
@atstp as i said above i have completely done this code you mentioned but when i add my css to leaflet bar
.leaflet-bar {
position: fixed;
z-index: 1000;
top: 20px;
left: 75px;
}
it move this bar on top but button inside it didn't in one line
from leaflet.easybutton.
okay, in that case, I need a bit more info to give you better guidance.
First, what do you think is causing your issue, and what have you already tried to resolve it?
Also, if you share a minimal, running example, that would make it easier for me to help you.
from leaflet.easybutton.
@atstp
this is mycode http://jsfiddle.net/b2zxLdor/18/
from leaflet.easybutton.
thanks!
What have you tried that has not worked? what did you expect, and what results did you get?
from leaflet.easybutton.
done i have just fixed my problem thanks for help
from leaflet.easybutton.
@shinnobi : can you update your jsfiddle? or show the styling snippet here? thanks
from leaflet.easybutton.
@shinnobi You committed one of the most cardinal sins of google searches: "I fixed it!"... And you didn't provide the fix. Please. Provide. The fix.
from leaflet.easybutton.
sorry for late commend i upload this code http://jsfiddle.net/w47s96pt/ for inline button
thanks you for all
from leaflet.easybutton.
Related Issues (20)
- [accessibility] Activating a button using a keyboard should not set focus to the map element HOT 1
- Can I remove the the button and reload it with new data?
- Feature request: multicolumn buttonbar HOT 1
- Help switching layers HOT 1
- Change button state icon at runtime HOT 3
- font awesome v.5 compatibility HOT 1
- Set button options outside of initial declaration. HOT 1
- Set button options outside of initial declaration
- Running examples website is down HOT 2
- Button to external link HOT 5
- importing/webpack HOT 1
- Font awesome icon doesn't work with React HOT 6
- ERROR Compile Leaflet.EasyButton in Typescript HOT 3
- Enhancement: State option to set button class
- How to deal with 'mousedown' event ?
- Accessibility issue HOT 6
- Icon not centered on mobile HOT 6
- [accessibility] Use `aria-disabled` to convey the disabled state
- [bug] Disabled buttons can be activated using a keyboard
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from leaflet.easybutton.