[SOLVED] Is there a way to make Period selectable in leaflet.timedimension

Is there a way to make Period selectable in leaflet.timedimension

I use leaflet to show data for users on a map. I also use different leaflet plugins. One of them is the leaflet.timedimension plugin so a user can scroll through WMS layers valid at different times. But I have trouble figuring out how to make the period of timeDimensionsOptions selectable by the user.

I have set the period to 1 hour (PT60MIN), but some of my data are in 15 minutes interval (PT15MIN). What is the appropriate approach to let the user select the period or change the period based on the selected product?

I initialise my map like so:

var map = L.map('mapid', {
        zoom: 6,
        fullscreenControl: true,
        timeDimension: true,
        timeDimensionControl: true,
        scrollWheelZoom: true,
        timeDimensionOptions:{
            timeInterval: now + "/PT48H",
            period: "PT60M"
        },
        timeDimensionControlOptions: {
            autoPlay: false,
            timeZones: ['utc'],
            playerOptions: {
                buffer: 0,
                transitionTime: 500, // 1000/1500 ~ 0.7 fps
                loop: true,
            },
            speedSlider: true,
            limitSliders: true,
            displayDate: true
            position: 'bottomleft'
        },
        center: mapCenter: [56, 10],
        minZoom: 4,
    })

where period is the parameter that I would like to change dynamically.

I have made a MWE here of what I have now, but of course, without the option to change the period (timestep of the WMS layers). I am aware that the WMS layers do not work. I use a WMS-server behind a VPN wall, but it should not matter for the part related to timedimensions I hope.

My experience with javascript and leaflet is rather limited, so probably there is plenty of examples of bad practice.

Solution

Can you have the value of period changed by the user from a dropdown or input somewhere in the HTML?

let user_input = 'PT60M' // Let PT60M be the default.

// Get user_input somewhere, (i.e. from a HTML dropdown, radio button, you can 
// easily test using javascript's `prompt()` before coding up a lot of html)
// addEventListener to that input and onChange, re-create the `L` object
// and return it to wherever you need it to. In your MWE it would be initMap()
// just have that function take a param for `L` and call initMap with the new 'L' from onChange when
// the user changes the time period.

L.map('mapid', {
...
        timeDimensionOptions:{
            timeInterval: now + "/PT48H",
            period: user_input // Value selected by user.
        },
        timeDimensionControlOptions: {
...
    })