Commit 7b9a95da authored by Joseph Alberts's avatar Joseph Alberts
Browse files

Create fully functional slider filter widget

Creates a vertical slider that filters states from the map based on the value of the `happening` field.

Slider has two thumbs, allowing the filter to have a high and low value.
parent a3beefff
......@@ -26,8 +26,8 @@
<div id="hiViewDiv" class="esri-widget"></div>
<div id="infoDiv" class="esri-widget">
<div id="infoDescription">
Show where the % that believe the global warming is happening is at most:
<span id="sliderValue">100</span>%.
Show where the % that believe the global warming is between:
<span id="sliderHighValue">100</span>% and <span id="sliderLowValue">0</span>%.
</div>
<div id="sliderDiv" class"slider"></div>
</div>
......
......@@ -316,48 +316,78 @@ require([
position: "top-right",
});
mainView.whenLayerView(layer).then(function(layerView) {
const filterField = "happening";
const slider = new Slider({
container: document.getElementById("sliderDiv"),
min: 0,
max: 100,
steps: 5,
values: [ 100 ],
visibleElements: {
// labels: true,
rangeLabels: true
},
// labelsVisible: true, // deprecated in 4.15
// rangeLabelsVisible: true, // deprecated in 4.15
precision: 0,
layout: "vertical",
tickConfigs: [{
mode: "percent",
values: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100], // a value of 10 doesn't produce expected results.
labelsVisible: true,
}]
// labelInputsEnabled: true,
});
// slider.tickConfigs = [{
// mode: "percent",
// values: 20,
// labelsVisible: true,
// }];
const slider = new Slider({
container: document.getElementById("sliderDiv"),
min: 0,
max: 100,
steps: 5,
values: [ 0, 100 ],
visibleElements: {
// labels: true,
rangeLabels: true
},
// labelsVisible: true, // deprecated in 4.15
// rangeLabelsVisible: true, // deprecated in 4.15
precision: 0,
layout: "vertical",
tickConfigs: [{
mode: "percent",
values: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100], // a value of 10 doesn't produce expected results.
labelsVisible: true,
}]
// labelInputsEnabled: true,
});
const sliderValue = document.getElementById("sliderValue");
// define slider filter field, track initial thumb, and get thumb HTML elements.
var filterField = "happening";
var sliderHighValue = 100;
var sliderLowValue = 0;
var sliderHighValueID = document.getElementById("sliderHighValue");
var sliderLowValueID = document.getElementById("sliderLowValue");
// filter function for each layer view
function setMainFeatureLayerViewFilter(expression) {
mainView.whenLayerView(layer).then(function(featureLayerView) {
featureLayerView.filter = {
where: expression
};
});
}
// filter features by belief happening
function setAKFeatureLayerViewFilter(expression) {
akView.whenLayerView(layer).then(function(featureLayerView) {
featureLayerView.filter = {
where: expression
};
});
}
slider.on(["thumb-change", "thumb-drag"], function(event) {
sliderValue.innerText = event.value;
layerView.filter = {
where: filterField + " <= " + event.value
function setHIFeatureLayerViewFilter(expression) {
hiView.whenLayerView(layer).then(function(featureLayerView) {
featureLayerView.filter = {
where: expression
};
});
}
// event listener for slider thumb value changes
slider.on(["thumb-change", "thumb-drag"], function(event) {
// track low and high values and update their HTML elements
if (event.index == 0) {
sliderLowValue = event.value;
sliderLowValueID.innerText = event.value;
} else if (event.index == 1) {
sliderHighValue = event.value;
sliderHighValueID.innerText = event.value;
} else {
console.console.log("Problem with slider index!");
};
// call filter functions for each layer view
setMainFeatureLayerViewFilter(filterField + " >= " + sliderLowValue + " AND " + filterField + " <= " + sliderHighValue);
setAKFeatureLayerViewFilter(filterField + " >= " + sliderLowValue + " AND " + filterField + " <= " + sliderHighValue);
setHIFeatureLayerViewFilter(filterField + " >= " + sliderLowValue + " AND " + filterField + " <= " + sliderHighValue);
});
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment