Cycle through WMS sources in MapX custom code view

custom_code.js

/**
 * Custom method for custom view in map-x
 * Parameters for onInit and onClose function ;
 * @param {Object} o Options
 * @param {Object} o.view Map-x view object
 * @param {Object} o.map mapbox-gl map object
 * @param {String} o.idView If of the view
 * @param {String} o.idSource Id of the source
 * @param {Element} o.elLegend Element containing the legend
 *
 */
return {
    onClose: function(o) {
        console.log('Custom view closed');
        if (o.clean) o.clean();
    },
    onInit: function(o) {
        console.log('Custom view added');

        var map = o.map;
        var conf = {
            sep: mx.settings.separators.sublayer,
            delayRemove: 1000,
            delayRender: 2000,
            dates: [1975, 1990, 2000, 2015],
            styles: {
                elYear: {
                    position: 'fixed',
                    top: '20px',
                    right: '20px',
                    fontSize: '3em',
                    zIndex: 1000,
                    webkitTextStroke: '1px black',
                    color: 'white'
                }
            },
            enabled: true
        };

        var i = 0;
        var iL = conf.dates.length;

        addAllSources();
        addElYear();
        render();

        o.clean = function() {
            console.log('Custom view cleaned');
            conf.enabled = false;
            removeElYear();
            removeAllLayers();
            removeAllSources();
        };


        function render() {
            if (!conf.enabled) return;


            var pos = i % iL;
            var date = conf.dates[pos];
            var datePrevious = conf.dates[pos - 1] || conf.dates[iL - 1];

            removeLayerByDate(datePrevious);
            addLayerByDate(date);
            updateYear(date);

            i++;

            setTimeout(render, conf.delayRender);
        }

        /**
         * Add and manage text showing the year
         */
        function addElYear() {
            var elYear = document.createElement('Span');
            var mapMain = document.getElementById('map_main');
            o.elYear = elYear;
            mapMain.appendChild(elYear);
            setStyle(elYear, conf.styles.elYear);
        }

        function removeElYear() {
            o.elYear.remove();
        }

        function updateYear(val) {
            o.elYear.innerText = val;
        }

        /**
         * Add or remove layer based on year
         */
        function addLayerByDate(date) {
            var idLayer = getLayerId(date);
            var idSource = getSourceId(date);
            var l = {
                id: idLayer,
                type: 'raster',
                source: idSource
            };
            map.addLayer(l, 'mxlayers');
            o.layers = o.layers || [];
            o.layers.push(idLayer);
        }

        function removeLayerByDate(date) {
            var idLayer = getLayerId(date);
            setTimeout(() => {
                var layer = map.getLayer(idLayer);
                if (layer) {
                    map.removeLayer(idLayer);
                }
            }, conf.delayRemove)
        }

        /**
         * Remove all layer from this view
         */
        function removeAllLayers() {
            var layersToRemove = mx.helpers.getLayerNamesByPrefix({
                prefix: o.idView
            });
            layersToRemove.forEach((id) => {
                map.removeLayer(id);
            });
        }

        /**
         * Add or remove all sources at once
         */
        function addAllSources() {
            var id, url;
            o.sources = o.sources || [];
            removeAllSources()
            conf.dates.forEach((d) => {
                url = getUrl(d);
                id = getSourceId(d);

                removeSource(id);

                map.addSource(id, {
                    type: 'raster',
                    tiles: [url, url],
                    tileSize: 512
                });
                o.sources.push(id);
            });
        }

        function removeSource(id) {
            var pos = o.sources.indexOf(id);
            var src = map.getSource(id);
            if (src) {
                map.removeSource(id);
            }
            if (pos > -1) {
                o.sources.splice(pos, 1);
            }
        }

        function removeAllSources() {
            o.sources = o.sources || [];
            o.sources.forEach((id) => {
                removeSource(id);
            });
        }

        function getSourceId(date) {
            return getLayerId(date) + '-SRC';
        }

        function getLayerId(date) {
            return o.idView + conf.sep + date;
        }
        /**
         * Set style using an object
         */
        function setStyle(el, style) {
            for (var s in style) {
                el.style[s] = style[s];
            }
        }

        /**
         * Condifgure URL from an WMS source
         */
        function getUrl(d) {
            var url = 'https://datacore.unepgrid.ch/geoserver/wms?';
            out = mx.helpers.objToParams({
                bbox: 'bboxcode',
                service: 'WMS',
                version: '1.1.1',
                styles: '',
                request: 'getMap',
                zindex: '10',
                srs: 'EPSG:3857',
                layers: 'wesr_climat:GHS_POP_GPW4' + d,
                format: 'image/png',
                transparent: 'true',
                height: '512',
                width: '512'
            });
            out = out.replace('bboxcode', '{bbox-epsg-3857}');
            out = url + out;
            return out;
        }
    }
};