1

I've used jQuery append relocate a L.control.layers into an HTML containing. I've also modified them to look a little more like buttons.

var crsh_group_buttons = L.control.layers(crash_grouping, null, {collapsed:false}).addTo(map); // add group control
$('#crash_grouping_html').append(crsh_group_buttons.onAdd(map)) // use this to add html tag to move around/edit control
$('.leaflet-top.leaflet-right').hide(); // use this to remove duplication

The HTML:

<div id = "crash_grouping_html"></div>

And the CSS:

#crash_grouping_html {
  margin: 10px;
}

#crash_grouping_html input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}

#crash_grouping_html label {
    display: inline-block;
    background-color: #ddd;
    padding: 5px 10px;
    font-family: sans-serif, Arial;
    font-size: 16px;
    border: 2px solid #444;
    border-radius: 5px;
}

#crash_grouping_html label-background {
    color: #444;
}

#crash_grouping_html label:hover {
  background-color: #dfd;
}

The problem is that the background of the radio buttons within the HTML container ends up white and I'd like it to be clear, i.e. `opacity: 0;.

enter image description here

How do I change the opacity of the background behind the two radio buttons to clear?

I've tried changing the overall opacity, but that impacts the buttons as well. I've also tried placing the buttons in another container, but that doesn't return anything useful as well.

  • 1
    From your description it's not clear what your are trying to do and why. You can always check with browser debugging element inspector which classes are applied to an element and then change them in your custom CSS. – TomazicM Oct 27 at 15:43
  • sorry about that, question extended – bikingman Oct 27 at 16:20
1

What helps in such cases is element inspector in browser debugger. You just have to check which class declares white background for your HTML element. In this case it is leaflet-control-layers-expanded class.

To get transparent background, just add this style definition:

.leaflet-control-layers-expanded {
  background-color: transparent;
}

Remark: This is not really GIS question, but pure HTML one, so it should actually be posted on Stack Overflow site.

  • Thanks for not only answering my question with the correct answer, but also providing some vocabulary to navigate through the leaflet/HTML discussion. I'm trying to learn as much leaflet as possible at this point, so this helps tremendously. Thanks once again. – bikingman Oct 28 at 0:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.