New StackOverflow Question: Time slider to move automatically using setInterval()

10 views

Skip to first unread message

stacko...@mg.bodar.com

unread,

Mar 7, 2017, 5:10:51 AM3/7/17

to total...@googlegroups.com

Time slider to move automatically using setInterval()

Asked by Kristian Vybiral on 2017-01-05T09:51:56Z

Reply on StackOverflow

I am trying to make a Mapbox map that would show data chronologically for a given year, and I am trying to make the year be specified automatically in sequence.

However, I am having a problem using setInterval to move the time slider in the following script automatically, and it gives me a [object HTMLLabelElement] without the slider moving.

Am I setting the setInterval to the wrong function?

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<style>
.map-overlay {
    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
    position: absolute;
    width: 25%;
    top: 0;
    left: 0;
    padding: 10px;
}

.map-overlay .map-overlay-inner {
    background-color: #fff;
    box-shadow:0 1px 2px rgba(0, 0, 0, 0.20);
    border-radius: 3px;
    padding: 10px;
    margin-bottom: 10px;
}

.map-overlay h2 {
    line-height: 24px;
    display: block;
    margin: 0 0 10px;
}

.map-overlay input {
    background-color: transparent;
    display: inline-block;
    width: 100%;
    position: relative;
    margin: 0;
    cursor: ew-resize;
}
</style>

<div id='map'></div>

<div class='map-overlay top'>
    <div class='map-overlay-inner'>
        <h2>Tel-Aviv Cinemas 1914-2016</h2>
        <label id='Year'></label>
        <input id='slider' type='range' min='0' max='102' step='1' value='0' />
    </div>
    <div class='map-overlay-inner'></div>
</div>

<script src="https://d3js.org/d3.v4.js"></script>

<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoia3Z5YiIsImEiOiJjaXUwMHEwcmgwMDAxMnlvM3NzMm0xbGozIn0.JL_eeNZL_lDoJxijNqFPoA';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/dark-v9',
    center: [34.775981, 32.081287],
    zoom: 11
});

var Years = ['1914', '1915', '1916', '1917', '1918', '1919', '1920', '1921', '1922', '1923', '1924', '1925', '1926', '1927', '1928', '1929', '1930', '1931', '1932', '1933', '1934', '1935', '1936', '1937', '1938', '1939', '1940', '1941', '1942', '1943', '1944', '1945', '1946', '1947', '1948', '1949', '1950', '1951', '1952', '1953', '1954', '1955', '1956', '1957', '1958', '1959', '1960', '1961', '1962', '1963', '1964', '1965', '1966', '1967', '1968', '1969', '1970', '1971', '1972', '1973', '1974', '1975', '1976', '1977', '1978', '1979', '1980', '1981', '1982', '1983', '1984', '1985', '1986', '1987', '1988', '1989', '1990', '1991', '1992', '1993', '1994', '1995', '1996', '1997', '1998', '1999', '2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016'];

function filterBy(Year) {
    var filters = ['==', 'Year', Year];
    map.setFilter('cinema-circles', filters);
    map.setFilter('cinema-labels', filters);

    // Set the label to the Year
    document.getElementById('Year').textContent = Year;
}

map.on('load', function() {

    // Data courtesy of https://earthquake.usgs.gov/
    // Query for significant earthquakes in 2015 URL request looked like this:
    // https://earthquake.usgs.gov/fdsnws/event/1/query
    //    ?format=geojson
    //    &starttime=2015-01-01
    //    &endtime=2015-12-31
    //    &minmagnitude=6'
    //
    // Here we're using d3 to help us make the ajax request but you can use
    // Any request method (library or otherwise) you wish.
    d3.json('https://cldex.net/visual/cinema_telaviv.geojson', function(err, data) {
        if (err) throw err;

        // Create a Year property value based on time
        // used to filter against.
        data.features = data.features.map(function(d) {
        return d;
        });

        map.addSource('cinemas', {
            'type': 'geojson',
            'data': data
        });

        map.addLayer({
            'id': 'cinema-circles',
            'type': 'circle',
            'source': 'cinemas',
            'paint': {
                'circle-color': {
            property: 'sqrt',
            stops: [
                [0, '#f1f075'],
                [1500, '#e55e5e']
                ]
                },
                'circle-opacity': 0.75,
                'circle-radius': 20
            }
        });

        map.addLayer({
            'id': 'cinema-labels',
            'type': 'symbol',
            'source': 'cinemas',
            'layout': {
                'text-field': '{Cinema}',
                'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'],
                'text-size': 12
            },
            'paint': {
                'text-color': 'rgba(0,0,0,0.5)'
            }
        });

        // Set filter to first Year of the Year
        // 0 = 1914
        filterBy(1914);
        document.getElementById('slider').addEventListener('input', function(e) {
              var Year = window.setInterval(function() { parseInt(Years[e.target.value]) }, 1000);
            filterBy(Year);
        });
        // Create a popup, but don't add it to the map yet.
        var popup = new mapboxgl.Popup({
            closeButton: false,
            closeOnClick: false
});

map.on('mousemove', function(e) {
    var features = map.queryRenderedFeatures(e.point, { layers: ['cinema-circles'] });
    // Change the cursor style as a UI indicator.
    map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';

    if (!features.length) {
        popup.remove();
        return;
    }

    var feature = features[0];

    // Populate the popup and set its coordinates
    // based on the feature found.
    popup.setLngLat(feature.geometry.coordinates)
        .setHTML(feature.properties.Cinema+'<b> Cinema Information</b>'+'<br><b>Number: </b>'+feature.properties.Number+'<br><b>Number of Screens: </b>'+feature.properties.Screens+'<br><b>Number of Seats: </b>'+feature.properties.Seatss)
        .addTo(map);
});
});
});
</script>

</body>
</html>

My Data can be found in a geojson: https://cldex.net/visual/cinema_telaviv.geojson