Commit 2adb1e7b authored by Peter Knoop's avatar Peter Knoop
Browse files

Merge branch 'jra-add-slider-filter' into 'master'

Add slider filter

See merge request !2
parents 5017fdd8 1a4d1f2e
......@@ -74,3 +74,21 @@ body {
width: 300px;
background-color: rgba(255,255,255,0.8)
}
#infoDiv {
padding: 10px;
width: 275px;
height: 50vh;
}
.esri-slider__max, .esri-slider__min {
font-weight: 700;
}
.esri-slider--vertical .esri-slider__max {
margin-bottom: 1em !important;
}
.esri-slider--vertical .esri-slider__min{
margin-top: 1em !important;
}
......@@ -5,9 +5,9 @@
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>SharedAir</title>
<link rel="stylesheet" href="sharedAir.css">
<link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css" />
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.14/"></script>
<script src="https://js.arcgis.com/4.15/"></script>
<script src="sharedAir.js"></script>
</head>
......@@ -24,7 +24,13 @@
<div id="mainViewDiv"></div>
<div id="akViewDiv" class="esri-widget"></div>
<div id="hiViewDiv" class="esri-widget"></div>
<div id="sliderDiv" class"esri-widget"></div>
<div id="infoDiv" class="esri-widget">
<div id="infoDescription">
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>
</div>
</div>
</body>
......
......@@ -102,8 +102,20 @@ require([
title: "U.S. States"
});
var basemapLayer = new FeatureLayer({
url: "https://services1.arcgis.com/4ezfu5dIwH83BUNL/arcgis/rest/services/USA_States_Generalized_share_air/FeatureServer/0",
title: "U.S. States"
});
var districtsLayer = new FeatureLayer({
url: "https://services1.arcgis.com/4ezfu5dIwH83BUNL/arcgis/rest/services/usa_116th_congressional_districts/FeatureServer/0",
popupTemplate: popupTemplate,
outFields: ["DISTRICTID", "NAME", "PARTY"],
title: "U.S. 116th Congressional Districts"
});
var map = new Map({
layers: [layer]
layers: [districtsLayer, basemapLayer, layer]
});
// Create the map views and assign to their respective containers/divs
......@@ -217,7 +229,7 @@ require([
view.on("pointer-move", function(event) {
// console.log("Highlight");
view.hitTest(event).then(function(response) {
const lastHighlight = highlight;
var lastHighlight = highlight;
// if a feature is returned, highlight it
// and display its attributes in the popup
......@@ -311,19 +323,83 @@ require([
}
// add slider widget
// Joe is adding a comment for some reason...
mainView.ui.add("infoDiv", {
position: "top-right",
});
const slider = new Slider({
container: document.getElementById("sliderDiv"),
min: 0,
max: 100,
values: [ 50 ],
rangeLabelsVisible: true,
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"
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,
});
mainView.ui.add(slider, {
position: "top-right",
// 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
};
});
}
function setAKFeatureLayerViewFilter(expression) {
akView.whenLayerView(layer).then(function(featureLayerView) {
featureLayerView.filter = {
where: expression
};
});
}
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);
});
......
Markdown is supported
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