Filtering data from online geoJSON

[Koosch]

Hi,

I am looking for help to connect hosted geoJSON to this specific rangeSlider :

https://jsfiddle.net/IonDen/avcm6wpj/

My first try was with a simple slider :

HTML :

<div class='session' id='sliderbar'>
  <h2>Puissance : <label id='active-puissance'>150 </label> W </h2>
  <input id='slider' class='row' type='range' min='0' max='400' step='1' value='54' />
</div> 

Javascript :

map.on('load', function() {
  map.addLayer({
    id: 'Puissance',
    type: 'circle',
    source: {
      type: 'geojson',
      data: './GL.geojson' 
    },
    paint: {
      'circle-radius': {
'base': 1.75,
'stops': [
[12, 1],
[22, 180]
     ]
},
      'circle-color': [
        'interpolate',
        ['linear'],
        ['number', ['get', 'LAM_Puissance']],
        0, '#2DC4B2',
        1, '#3BB3C3',
        2, '#669EC4',
        3, '#8B88B6',
        4, '#A2719B',
        5, '#AA5E79'
      ],
      'circle-opacity': 0.8
    }
  });
});

document.getElementById('slider').addEventListener('input', function(e) {
var Puissance = parseInt(e.target.value);

     // update the map
map.setFilter('Puissance', ['==', ['number', ['get', 'LAM_Puissance']], Puissance]);

  // update text in the UI
document.getElementById('active-puissance').innerText = Puissance ;

//}); 

It works fine, but it would be a lot better if this data was range between two values, as the slider on the fiddle proposes. I tried some combinations, but it appears that there is no link at all between the range slider and the data. I followed the example here : http://ionden.com/a/plugins/ion.rangeSlider/demo_interactions.html

var $range = $(".js-range-slider"),
    $inputFrom = $(".js-input-from"),
    $inputTo = $(".js-input-to"),
    instance,
    min = 0,
    max = 400,
    from = 0,
    to = 0;

$range.ionRangeSlider({
    skin: "round",
    type: "double",
    min: min,
    max: max,
    from: 10,
    to: 400,
    onStart: updateInputs,
    onChange: updateInputs,
    onChange: function (e) {
            var Puissance = parseInt(e.target.updateInputs);
      // update the map
map.setFilter('Puissance', ['==', ['number', ['get', 'LAM_Puissance']], Puissance]);

}
    });

and get this error :

Uncaught TypeError: Cannot read property 'data' of undefined at Object.onChange (work.js:78) at h.callOnChange (ion.rangeSlider.min.js:2) at h.drawHandles (ion.rangeSlider.min.js:2) at h.updateScene

(ion.rangeSlider.min.js:2)

Would you have any clue on how to bind it to the geojson ?

Thank you !

[IonDen]

Hi, I think the problem is here:

    onChange: updateInputs,
    onChange: function (e) { // <- you are using onChange twice + it does not have event object and e.target - it has data object, check readme on github
            var Puissance = parseInt(e.target.updateInputs);
      // update the map
map.setFilter('Puissance', ['==', ['number', ['get', 'LAM_Puissance']], Puissance]);

}