Develop Reference

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.

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: {
...
})

Glide.js slider not pausing on last slide

What i am trying to achieve, is a basic slideshow that starts, gets to the last slide and stops. I am using Glide.js as it is so small and is really awesome however, with the below code it does not actually pause and the slide spins round back to the beginning again.
/**
* Homepage Slideshow
*/
if(document.querySelector('.glide')) {
var item_length = document.querySelectorAll('.glide__slide').length - 1;
let glide = new Glide('.glide', {
type: 'slider',
startAt: 0,
perView: 1,
autoplay: 6000,
hoverpause: true,
});
glide.on('move', (e) => {
if(glide.index == item_length) {
console.log(glide.index, item_length);
glide.pause();
}
});
glide.mount();
}
I am getting the console.log out which is telling me 5 5 meaning I am on the glide.index at the 5th slide and the item_length is 5. So the glide.pause() should work. Any help would be greatly appreciated I have been scratching my head for ages on this. I have tried run and other events instead of move and still no success.

Try setting the rewind option to false:
/**
* Homepage Slideshow
*/
if(document.querySelector('.glide')) {
var item_length = document.querySelectorAll('.glide__slide').length - 1;
let glide = new Glide('.glide', {
type: 'slider',
startAt: 0,
perView: 1,
autoplay: 6000,
hoverpause: true,
rewind: false,
});
glide.mount();
}
Reference

Trying to randomize a news ticker interval in jQuery

I have a jQuery-based scrolling news ticker that uses a set interval in milliseconds to control the delay between the reveal of each new section of text. I'd like to randomize the delay so that it more closely mimics the way a realtime news feed would look.
I've tried experimenting with some Math.random javascript where the newsTickerInterval parameter is, but JS is not my native language and I'm having trouble making it work.
Here's the jQuery function my scroller uses to config the display:
$(function () {
$(".demo2").bootstrapNews({
newsPerPage: 4,
autoplay: true,
pauseOnHover: true,
navigation: false,
direction: 'down',
newsTickerInterval: 3000,
onToDo: function () {
//console.log(this);
}
});
});
Any hints or suggestions would be greatly appreciated!

Instead of using newsTickerInterval, make a function getNewsTickerDelay that generates a random delay interval and call it using a setTimeout whenever needed.
$(function () {
$(".demo2").bootstrapNews({
newsPerPage: 4,
autoplay: true,
pauseOnHover: true,
navigation: false,
direction: 'down',
getNewsTickerDelay: function() {
var minimumInterval = 2000;
var maximumInterval = 5000;
var additionalInterval = Math.floor(
Math.random() * (maximumInterval - minimumInterval)
);
return minimumInterval + additionalInterval;
},
onToDo: function () {
//console.log(this);
}
});
});
So, every time your timeout is called, set another one with a random delay using getNewsTickerDelay
--EDIT--
As pointed out by #Barmar, you might need to tweak the implementation of the plugin in your case and implement its internal animate method to use your defined random interval instead of a fixed value. You'll just need to replace the self.options.newsTickerInterval in that plugin's JS to self.options.getNewsTickerDelay(). That is if you are willing to mutate the plugin's implementation.

How i make animation for radar raster like a rainviewer on mapbox

I'm using rainviewer tiles for the radar data.
https://tilecache.rainviewer.com/v2/radar/1568251200/256/{z}/{x}/{y}/3/0_0.png
And i want update the tiles raster with the timestamp to make animation for a radar, like https://rainviewer.com.
I get the timestamps from this url
https://tilecache.rainviewer.com/api/maps.json
I apologize for the bad English
function update_radar(){
$.getJSON("https://tilecache.rainviewer.com/api/maps.json", function(data) {
map.removeLayer("rainviewer");
map.removeSource("rainviewer");
map.addSource("rainviewer", {
type: "raster",
tiles: [
getPath(data[data.length - 1])
],
tileSize: 256
});
map.addLayer({
id: "rainviewer",
type: "raster",
source: "rainviewer",
paint: {
"raster-opacity": 1
},
minzoom: 0,
maxzoom: 12
});
});
}
function getPath(time) {
return "https://tilecache.rainviewer.com/v2/radar/" + time + "/256/{z}/{x}/{y}/3/0_0.png";
}

You can add a layer for each source initially, then set them all to be hidden and enable the layers one by one based on a time function, say every 2 seconds.
To show or hide a layer:
map.setLayoutProperty("layerId", "visibility", "visible");
map.setLayoutProperty("layerId", "visibility", "none");
To make animation smoother, you should also use:
map.setPaintProperty("layerId", "raster-opacity", opacity);
Here's a codepen with working example similar to rainviewer:
https://codepen.io/manishraj/full/gOYKMjO

You could run a setInterval function to update your URL, similar to how it is done in this example. Yours would look something like:
setInterval(function() {
map.getSource("rainviewer").updateImage({ url: getPath(data[data.length - 1]) });
}, 200);

Ion.RangeSlider color from middle

I'm trying to use Ion.RangeSlider to make a slider where the color starts from the center and goes in the direction of the slider control until it hits the slider control. Right now, this is what I have:
Instead, I would like the color to go from the center of the slider to the slider control.
How can I make the RangeSlider work like that so that the color starts from the middle (as shown above)?
EDIT:
I looked at this question, but it deals with sliders with two controls instead one.
EDIT 1:
setup.js:
jQuery(document).ready(function($){
$(".slider").each(function() {
console.log($(this).attr("id"));
$(this).ionRangeSlider({
type: $(this).attr("data-slider_type"),
grid: $(this).attr("data-slider_grid"),
min: $(this).attr("data-slider_min"),
max: $(this).attr("data-slider_max"),
prefix: $(this).attr("data-slider_prefix")+" ",
postfix: " " + $(this).attr("data-slider_suffix"),
step: $(this).attr("data-slider_stepper"),
from: $(this).attr("data-slider_from")
});
$(this).on("change", function () {
var $this = $(this),
value = $this.prop("value").split(";");
});
});
});

Use: https://github.com/jordansoltman/ion.rangeSlider with has the additional boolean option: fixMiddle. For example:
$(".slider").ionRangeSlider({
fixMiddle: true,
...
});
Note: use ion.rangeSlider.js as ion.rangeSlider.min.js has not been updated.