1

Got a layerswitcher in OpenLayers (ol-layerswitcher), added to a sidebar.

https://raw.githack.com/walkermatt/ol-layerswitcher/master/examples/sidebar.html

I would like to add buttons, for example, to "zoom to layer". Any suggestion?

HTML:

<div class="sidebar-pane" id="home">
    <h1 class="sidebar-header">Temas<span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
    </h1>
    <!-- Div do LayerSwitch !!! -->
    <div id="layers" class="layer-switcher"></div>
</div>

JS:

// Add layer switcher in sidebar    
var toc = document.getElementById('layers');
ol.control.LayerSwitcher.renderPanel(map, toc, { reverse: false});
1
  • 1
    Your edit is a completely different question, since there is no sidebar involved now. Please post it as a new question end return this question to original state. State also clearly that you want to use walkermatt switcher and would like it to behave similar to viglino switcher regarding additiona button for each layer.
    – TomazicM
    Nov 27, 2023 at 15:21

1 Answer 1

4

This is really not a GIS related question but completely HTML/JS related one, but anyway, all you have to do is add a button HTML element in sidebar after <div id="layers" class="layer-switcher"> element.

HTML code could then look something like this:

<div class="sidebar-pane" id="home">
    <h1 class="sidebar-header">Temas<span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
    </h1>
    <div id="layers" class="layer-switcher"></div>
    <input type="button" value="Zoom to layer" onclick="zoomToLayer()">
</div>

This would then be button click processing function:

function zoomToLayer() {
  console.log('zoom to layer');
}

Result then looks like this:

enter image description here

2
  • Thanks. I don't think I explained exactly what I need. I'll change the question, with another example. I need each layer to have a button next to it. Nov 27, 2023 at 14:53
  • It's doable with a little bit of trickery/hacking. Please edit your question and add this requirement. Some image would also help.
    – TomazicM
    Nov 27, 2023 at 15:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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