【OpenLayers4】内容の表示・非表示を切り替えられるカスタムコントロールを追加 #Openlayers

OpenLayers4で地図を表示させたとき、右下に表示されるAttributionのボタン
は、クリックするたびにコピーライトを表示させたり、隠したりと切り替えることができます。
このAttributionのコードと、カスタムコントロールの例を参考に、ボタンを押すたびに内容の表示・非表示を切り替えられるカスタムコントロールCollapsibleControlを作ってみました。

以下html。

<!DOCTYPE html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" />
    <title>Custom Controls</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.4.2/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.4.2/build/ol.js"></script>
    <style>
        .collapsible-control {
            top: .5em;
            right: .5em;
        }

    </style>
</head>
<body>
    <div id="map" class="map"></div>
    <script>
        /**
         * ネームスペースを作成
         */
        window.app = {};
        var app = window.app;

        //
        // Collapsible Controlの定義
        //


        /**
         * コンストラクタ
         */
        app.CollapsibleControl = function (opt_options) {

            var this_ = this;

            var options = opt_options || {};

            /**
             * 最小化状態ならばtrue
             */
            this_.collapsed_ = options.collapsed !== undefined ? options.collapsed : true;

            /**
             * 最小化状態の時のボタンラベル
             */
            this_.collapsedLabel_ = document.createElement('span');
            this_.collapsedLabel_.innerHTML = 'C';

            /**
             * オープン状態の時のボタンラベル
             */
            this_.openedLabel_ = document.createElement('span');
            this_.openedLabel_.innerHTML = '\u00BB';

            /**
             * オープン状態のときの表示内容
             */
            this_.contents_ = document.createElement('span');
            this_.contents_.innerHTML = 'some contents';
            this_.contents_.style.display = this_.collapsed_ ? 'none' : 'inline';

            /**
             * collapsed/openedを切り替えるボタン
             */
            var button = document.createElement('button');
            button.appendChild(this_.collapsed_ ? this_.collapsedLabel_ : this_.openedLabel_);
            button.style.display = 'inline';

            /**
             * ボタンクリック時のハンドラ
             */
            var buttonClicked = function (event) {
                event.preventDefault();
                if (this_.collapsed_) {
                    button.replaceChild(this_.openedLabel_, this_.collapsedLabel_);
                } else {
                    button.replaceChild(this_.collapsedLabel_, this_.openedLabel_);
                }
                this_.collapsed_ = !this_.collapsed_;
                this_.contents_.style.display = this_.collapsed_ ? 'none' : 'inline';
            }


            button.addEventListener('click', buttonClicked, false);

            var element = document.createElement('span');
            element.className = 'collapsible-control ol-unselectable ol-control';
            element.appendChild(this_.contents_);
            element.appendChild(button);

            ol.control.Control.call(this, {
                element: element,
                target: options.target
            });
        };
        ol.inherits(app.CollapsibleControl, ol.control.Control);


        //
        // CollapsibleControlのある地図を作成
        //


        var map = new ol.Map({
            controls: ol.control.defaults({
                attributionOptions: ({
                    collapsible: true
                })
            }).extend([
                new app.CollapsibleControl()
            ]),
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            target: 'map',
            view: new ol.View({
                center: [0, 0],
                zoom: 3
            })
        });
    </script>
</body>
</html>

これを適当なhtmlファイルにコピペしてブラウザで開くと、画面右上に「C」と書かれたボタンが表示されます。
これをクリックするたびに、「some contents」という文字が表示されたり隠れたりします。
上記CollapsibleControl中のcontents_のDOMを任意のものにすることで、好きな内容を表示させることができます。
例えばチェックボックスを置いて、そのチェックボックスのON/OFFに応じて、地図に表示させるマーカーを切り替える、などができます。