'How can I add a timeslider to a leaflet map?

I have a leaflet map, exported from qgis with the qgis2web plugin. I would like to add a timeslider for this map, as every layer (representing points) has a "from_" and "to" field containing the dates I would like to represent in the timeslider. Unfortunately, I have tried every option from the internet but none of them worked.

    <!doctype html>
<html lang="en">
    <head>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <link rel="stylesheet" href="css/leaflet.css">
        <link rel="stylesheet" href="css/qgis2web.css"><link rel="stylesheet" href="css/fontawesome-all.min.css">
        <link rel="stylesheet" href="css/filter.css">
        <link rel="stylesheet" href="css/nouislider.min.css">
        <style>
        #map {
            width: 1143px;
            height: 807px;
        }
        </style>
        <title>title</title>
    </head>
    <body>
        <table height="50"></table>
        <div id="map">
        </div>
        <script src="js/qgis2web_expressions.js"></script>
        <script src="js/leaflet.js"></script>
        <script src='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.js'></script>
        <link href='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.css' rel='stylesheet' />
        <script src="js/leaflet.rotatedMarker.js"></script>
        <script src="js/leaflet.pattern.js"></script>
        <script src="js/leaflet-hash.js"></script>
        <script src="js/Autolinker.min.js"></script>
        <script src="js/rbush.min.js"></script>
        <script src="js/labelgun.min.js"></script>
        <script src="js/labels.js"></script>
        <script src="js/tailDT.js"></script>
<script src="js/nouislider.min.js"></script>
<script src="js/wNumb.js"></script>
        <script src="data/missing.js"></script>
        <script src="data/multiplex.js"></script>
        <script src="data/gardens.js"></script>
        <script src="data/theaters.js"></script>

        <script>
        var highlightLayer;
        function highlightFeature(e) {
            highlightLayer = e.target;

            if (e.target.feature.geometry.type === 'LineString') {
              highlightLayer.setStyle({
                color: '#ffff00',
              });
            } else {
              highlightLayer.setStyle({
                fillColor: '#ffff00',
                fillOpacity: 1
              });
            }
            highlightLayer.openPopup();
        }

        L.mapbox.accessToken = 'pk.eyJ1Ijoic3plbmRlOTYiLCJhIjoiY2t3ajE0YW5xMWJ4YzJ2bnZybTg1aTFsciJ9.nF9cHA1BGaxYj5Vesxp-dQ';
        var map = L.mapbox.map('map')
        .setView([46, 24.96], 7)
        .addLayer(L.mapbox.styleLayer('mapbox://styles/szende96/ckwj2fekp7f8714ocrlhozs9a'));
var hash = new L.Hash(map);
        map.attributionControl.setPrefix('<a href="https://github.com/tomchadwin/qgis2web" target="_blank">qgis2web</a> &middot; <a href="https://leafletjs.com" title="A JS library for interactive maps">Leaflet</a> &middot; <a href="https://qgis.org">QGIS</a>');
        var autolinker = new Autolinker({truncate: {length: 30, location: 'smart'}});
        var bounds_group = new L.featureGroup([]);
        function setBounds() {
            map.setMaxBounds(map.getBounds());
        }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How can I add a timeslider to a leaflet map?

Sources

Related Questions