0

I am working with this example: https://www.mapbox.com/mapbox-gl-js/example/timeline-animation/

And I am trying to make this code:

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

Work with my json file which does not have a date datatype as a field, but simply a Year value.

Like in the example below:

{
   "type": "FeatureCollection",
   "features": [
  {
    "type": "Feature",
    "geometry": {
       "type": "Point",
       "coordinates":  [ 34.7615574,32.0638934 ]
    },
    "properties": {
    "Cinema":"אביב",
    "Number of Records":"1",
    "Number":1,
    "Screens":1,
    "Seatss":0,
    "Year":1948
    }
  },

I need this code to return a value that can be used for my filter by year slider.

I am new to D3 and Mapbox, so any suggestion would be greatly appreciated.

Here is the full code that I am trying to use:

<!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>Cinema Tel-Aviv</h2>
        <label id='Year'></label>
        <input id='slider' type='range' min='0' max='101' 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/light-v9',
    center: [31.4606, 20.7927],
    zoom: 0.5
});

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 = Years[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) {
            d.properties.Year = new Date(d.properties.Year).getYear();
            return d;
        });
        console.log(data.features.Year)

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

        map.addLayer({
            'id': 'cinema-circles',
            'type': 'circle',
            'source': 'cinemas',
            'paint': {
                'circle-color': '#FCA107',
                '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(0);

        document.getElementById('slider').addEventListener('input', function(e) {
            var Year = parseInt(e.target.value, 101);
            filterBy(Year);
        });
    });
});
</script>

</body>
</html>
1
  • I tried looking for adding features from data properties, but could not find anything. Jan 2, 2017 at 12:07

1 Answer 1

3

The map filter is expecting the year value and getting something else.

The year can be parsed in the slider event.

var Year =  parseInt(Years[e.target.value]);

The filter function is updated to handle the parsed year.

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;
}

The json is left as-is

  data.features = data.features.map(function(d) {
      return d;
  });

Initial year is updated.

    filterBy(1914);

Also:

Because getYear() does not return full years ("year 2000 problem"), it is no longer used and has been replaced by the getFullYear() method.

plnkr: http://plnkr.co/edit/QhWXHUmkSApyfynpmGzN?p=preview

2
  • Thanks for your answer, it cleared up a lot for me. I also wanted to ask you if you know how to make the slider move automatically over time for this example. Is such a feature supported? I am experimenting a bit with Mapbox to find out how powerful it can be. Once again, any tips or suggestions would be very helpful. Thanks. Jan 3, 2017 at 15:48
  • setInterval(): Update the slider and the map filter in the interval function. This can cycle through the years.
    – Aurelius
    Jan 3, 2017 at 23:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.