GUIDE4YOU - layermenu extend with show/hide text features - openlayers-3

Question

Is there a way to extend the layermenu?
For featurelayers users should be able to click on a image or button to show/hide the text of the features of that specific layer.
Showing or hiding the text of a feature is handled by the stylefunction on base of the current ''showfeaturetext'' property of the layer.
Is this possible with the current code?
Kind regards,
Sam

Answer 1

You could extend the layerselector if you are creating custom guide4you builds (see https://github.com/KlausBenndorf/guide4you#how-to-install-and-build-guide4you and https://github.com/KlausBenndorf/guide4you/wiki/How-to-create-an-own-guide4you-module) and overwrite the buildLayerButton method. Sadly the buildLayerButton does not return the button, which would make it a little more straightforward.
export class MyLayerSelector extends LayerSelector {
buildLayerButton (layer, $target) {
super.buildLayerButton(layer, $target)
$target.children(':last-child') // <- this should be your button as a jquery object
}
}

Answer 2

I've been trying this without success.
These are my steps:
I made a new file in the source dir: (.\src\controls\MyLayerSelector.js)
Content:
import $ from 'jquery'
import {LayerSelector} from './LayerSelector'
export class MyLayerSelector extends LayerSelector {
buildLayerButton (layer, $target) {
super.buildLayerButton(layer, $target)
$button = $target.children(':last-child') // <- this should be your button as a jquery object
}
}
Edit entry.js. I've added this line:
import { MyLayerSelector } from '../../src/Controls/MyLayerSelector'
Edit entry.js. I've also added this line:
window.createG4U = function (target, clientConf = defaultClientConf, layerConf = defaultLayerConf) {
return createG4UInternal(target, clientConf, layerConf, [
new MyLayerSelector()
])
}
NPM run build output:
warnings:
[ './src/Controls/Control.js\nThere is another module with an equal name when case is ignored.\nThis can lead to unexpected behavior when compiling on a filesystem with other case-semantic.\nRename module if multiple modules are expected or use equal casing if one module is expected.',
'./src/controls/Control.js\nThere is another module with an equal name when case is ignored.\nThis can lead to unexpected behavior when compiling on a filesystem with other case-semantic.\nRename module if multiple modules are expected or use equal casing if one module is expected.',
'./src/Controls/LayerSelector.js\nThere is another module with an equal name when case is ignored.\nThis can lead to unexpected behavior when compiling on a filesystem with other case-semantic.\nRename module if multiple modules are expected or use equal casing if one module is expected.',
'./src/controls/LayerSelector.js\nThere is another module with an equal name when case is ignored.\nThis can lead to unexpected behavior when compiling on a filesystem with other case-semantic.\nRename module if multiple modules are expected or use equal casing if one module is expected.',
'./src/Controls/ControlLogicMixin.js\nThere is another module with an equal name when case is ignored.\nThis can lead to unexpected behavior when compiling on a filesystem with other case-semantic.\nRename module if multiple modules are expected or use equal casing if one module is expected.',
'./src/controls/ControlLogicMixin.js\nThere is another module with an equal name when case is ignored.\nThis can lead to unexpected behavior when compiling on a filesystem with other case-semantic.\nRename module if multiple modules are expected or use equal casing if one module is expected.' ]
When I ignore these warnings I get a javascript error:
Uncaught TypeError: Cannot read property 'selectL10N' of undefined