Ol-layerswitcher

Support
#1

Has anyone added GitHub - walkermatt/ol-layerswitcher: Layer control for OpenLayers to Jmix Map yet?

How do I do that?

#3

Hi Benoît!

Could you clarify which features you need from the Layer Switcher? To integrate it with GeoMap, you’ll need to extend the GeoMap component and run some JavaScript code to update the added layers.

I’ve prepared a demo project that uses the Layer Switcher. In this project, I imported BaseObjectMap to detect added layers and set the correct labels. This import comes from generated/jar-resource/... , which may change in future Vaadin releases. Therefore, I wouldn’t recommend using it in production.

I think you can implement a similar popup using Jmix components. For example, you could create a button with popup content, like this:

View descriptor 
<layout classNames="relative">
    <button id="jmixLayerSwitcherButton"
            icon="CHEVRON_CIRCLE_DOWN_O"
            themeNames="tertiary-inline"
            classNames="jmix-button-layer-switcher"/>
    <maps:geoMap id="map" height="100%" width="100%">
        <maps:layers>
            <maps:tile id="osmLayer">
                <maps:osmSource/>
            </maps:tile>
            <maps:vector id="vectorLayer">
                <maps:vectorSource/>
            </maps:vector>
        </maps:layers>
    </maps:geoMap>
</layout>
View controller 
@ViewComponent
private GeoMap map;
@ViewComponent
private MessageBundle messageBundle;

@Subscribe
public void onInit(final InitEvent event) {
    createLayersPopover();
}

protected void createLayersPopover() {
    Popover popover = new Popover();
    popover.setFor("jmixLayerSwitcherButton");

    CheckboxGroup<Layer<?>> layersCheckboxGroup = new CheckboxGroup<>();
    layersCheckboxGroup.addThemeVariants(CheckboxGroupVariant.LUMO_VERTICAL);
    layersCheckboxGroup.setItems(new ListDataProvider<>(map.getLayers()));
    layersCheckboxGroup.setValue(new HashSet<>(map.getLayers()));
    layersCheckboxGroup.setItemLabelGenerator(layer -> messageBundle.getMessage("map.layer." + layer.getId()));
    layersCheckboxGroup.addValueChangeListener(event -> {
        map.getLayers().forEach(layer ->
                layer.setVisible(event.getValue().contains(layer)));
    });

    popover.add(layersCheckboxGroup);
    getContent().add(popover);
}

jmix-layer-switcher

Demo project: layer-switcher.zip (198.4 KB)