how to set up slider corretly - slidercontrol

Question

I have a question about slider implementation for environmental data. I would like to add an icon and by clicking on it, show the data for one of my variables... like in the example below. For example, a temperature icon that would show the results over the course of 3 different days.

I have this panel with the data, but I wanted to leave only one icon for temperature, salinity, and ocean currents. So that by clicking on it, it would show according to the days for each result. Similar to what you have in windy

Those are the icons that I would like to have

The end result would look something like this

// Load Leaflet map

function initDemoMap(){

    // Old baselayers
    /*
    var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
        attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, ' +
        'NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community'
    });
    var OpenStreetMap_Mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '© OpenStreetMap'
    });
    var Esri_DarkGreyCanvas = L.tileLayer(
        "https://{s}.sm.mapstack.stamen.com/" +
        "(toner-lite,$fff[difference],$fff[@23],$fff[hsl-saturation@20])/" +
        "{z}/{x}/{y}.png",
        {
            attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, ' +
            'NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community'
        }
    );

    */

    // New baselayers
    var googlestreet   = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{
      maxZoom: 20,
      subdomains:['mt0','mt1','mt2','mt3']
      })
    var Esri_DarkGreyCanvas = L.esri.basemapLayer('DarkGray')
    var Esri_WorldImagery = L.esri.basemapLayer('Imagery')
    var baseLayers = {
        "Google Street": googlestreet,
        "Satellite": Esri_WorldImagery,
        "Grey Canvas": Esri_DarkGreyCanvas
    };


    // set map bounds
    //var corner1 = L.latLng(-89.98155760646617, -180.0),
    //corner2 = L.latLng(89.99346179538875, 180.0),
    var corner1 = L.latLng(30, -20),
    corner2 = L.latLng(45, 0),
    bounds = L.latLngBounds(corner1, corner2);

    var map = L.map('map', {
        layers: [ Esri_DarkGreyCanvas ],
        center: bounds.getCenter(),
        zoom: 7,
        minZoom: 3,
        maxZoom: 15,
        maxBounds: bounds,
        maxBoundsViscosity: 1
    });

    // layer control panal
    var layerControl = L.control.layers(baseLayers,null,{collapsed:false});
    layerControl.addTo(map);
    //map.setView([0, 0], 1);

    // idw-map
    var temp15 = L.idwLayer(temperature15,{
            opacity: 0.3,
            cellSize: 5,
            exp: 3,
        })
    var temp16 = L.idwLayer(temperature16,{
            opacity: 0.3,
            cellSize: 5,
            exp: 3,
        }).addTo(map)
    var temp17 = L.idwLayer(temperature17,{
            opacity: 0.3,
            cellSize: 5,
            exp: 3,
        })
    
    var salnt15 = L.idwLayer(salinity15,{
            opacity: 0.3,
            cellSize: 5,
            exp: 3,
            // grad: {
            //     0.0: 'blue',
            //     0.9: 'white'
            // }
        })
    var salnt16 = L.idwLayer(salinity16,{
            opacity: 0.3,
            cellSize: 5,
            exp: 3,
            // grad: {
            //     0.0: 'blue',
            //     0.9: 'white'
            // }
        })
    var salnt17 = L.idwLayer(salinity17,{
            opacity: 0.3,
            cellSize: 5,
            exp: 3,
            // grad: {
            //     0.0: 'blue',
            //     0.9: 'white'
            // }
        })
        //idw.addTo(map);
    layerControl.addOverlay(temp15, 'Temperature15').addTo(map)
    layerControl.addOverlay(temp16, 'Temperature16').addTo(map)
    layerControl.addOverlay(temp17, 'Temperature17').addTo(map)
    layerControl.addOverlay(salnt15, 'Salinity15').addTo(map)
    layerControl.addOverlay(salnt16, 'Salinity16').addTo(map)
    layerControl.addOverlay(salnt17, 'Salinity17').addTo(map)
    //L.control.layers(overlays,null,{collapsed:false}).addTo(map);

    
    function getColor(d) {
        return d > 17.4 ? '' :
            d > 16.8  ? 'darkred' :
            d > 16.2  ? 'OrangeRed' :
            d > 15.6  ? 'Gold' :
            d > 15.0   ? 'DeepSkyBlue' :
            d > 14.4   ? 'LightSeaGreen' :
                        'Blue';
    }
    var legend = L.control({position: 'bottomright'});
    legend.onAdd = function (map) {

        var div = L.DomUtil.create('div', 'info legend'),
            grades = [14.4, 15.0, 15.6, 16.2, 16.8, 17.4],
            labels = [];

        // loop through our density intervals and generate a label with a colored square for each interval
        for (var i = 0; i < grades.length; i++) {
            div.innerHTML +=
                ' ' +
                grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '
' : '+');
        }

        return div;
    };

    legend.addTo(map);

    return {
        map: map,
        layerControl: layerControl
    };

}

// leaflet-velocity layer
var mapStuff = initDemoMap();
var map = mapStuff.map;
var layerControl = mapStuff.layerControl;

// load data (u, v grids) from somewhere (e.g. https://github.com/danwild/wind-js-server)
$.getJSON('data/netcdf/wind.json', function (data) {

    var velocityLayer = L.velocityLayer({
        displayValues: true,
        displayOptions: {
            velocityType: 'Wind',
            displayPosition: 'bottomleft',
            displayEmptyString: 'No wind data'
        },
        data: data,
        maxVelocity: 10,
        // minVelocity:-0.1
    })

    layerControl.addOverlay(velocityLayer, 'Wind15');
});
$.getJSON('data/netcdf/wind16.json', function (data) {

    var velocityLayer16 = L.velocityLayer({
        displayValues: true,
        displayOptions: {
            velocityType: 'Wind',
            displayPosition: 'bottomleft',
            displayEmptyString: 'No wind data'
        },
        data: data,
        maxVelocity: 10,
        // minVelocity:-0.1
    }).addTo(map)

    layerControl.addOverlay(velocityLayer16, 'Wind16');
});
$.getJSON('data/netcdf/wind17.json', function (data) {

    var velocityLayer17 = L.velocityLayer({
        displayValues: true,
        displayOptions: {
            velocityType: 'Wind',
            displayPosition: 'bottomleft',
            displayEmptyString: 'No wind data'
        },
        data: data,
        maxVelocity: 10,
        // minVelocity:-0.1
    });

    layerControl.addOverlay(velocityLayer17, 'Wind17');
});


//Fetch some data from a GeoJSON file
$.getJSON("data/points.json", function(json) {
    var testlayer = L.geoJson(json),
        sliderControl = L.control.sliderControl({
            position: "topright",
            layer: testlayer
        });

    //For a Range-Slider use the range property:
    sliderControl = L.control.sliderControl({
        position: "topright",
        layer: testlayer,
        range: true
    });

    //Make sure to add the slider to the map ;-)
    map.addControl(sliderControl);
    //And initialize the slider
    sliderControl.startSlider();
});

body {
    margin: 0px;
}

#heading {
    text-align: center;
    padding: 20px;
    background: #333;
    color: #CCC;
}

a {
    color: #3388ff;
}

#map {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #333;
}

.leaflet-canvas-layer {
    opacity: 0.55;
}






    Projeto

how to set up slider corretly - slidercontrol

0 Answers