Commit edd507d7 authored by Joseph Alberts's avatar Joseph Alberts
Browse files

Explore filtering and styling

Update to ArcGIS JS API 4.15.

Still not working:

- Filter: Not clear on how to do a view call.
- Added min thumb: event listener conflicts with the extra thumb. Not seeing an ID I can use...maybe I can listen to just the events for a specific thumb?
- Changed the lastHighligh variable to var from const (console error; promise)
parent a11a148d
......@@ -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 happening is at most:
<span id="sliderValue">100</span>%.
</div>
<div id="sliderDiv" class"slider"></div>
</div>
</div>
</div>
</body>
......
......@@ -217,7 +217,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,20 +311,48 @@ require([
}
// add slider widget
// Joe is adding a comment for some reason...
const slider = new Slider({
container: document.getElementById("sliderDiv"),
min: 0,
max: 100,
values: [ 50 ],
rangeLabelsVisible: true,
precision: 0,
layout: "vertical"
});
mainView.ui.add(slider, {
position: "top-right",
});
// view.whenLayerView(layer).then(function(layerView) {
const filterField = "happening";
const slider = new Slider({
container: document.getElementById("sliderDiv"),
min: 0,
max: 100,
steps: 5,
values: [ 100, 0 ],
visibleElements: {
// labels: true,
rangeLabels: true
},
// labelsVisible: true, // deprecated in 4.15
// rangeLabelsVisible: true, // deprecated in 4.15
precision: 0,
layout: "vertical"
});
mainView.ui.add("infoDiv", {
position: "top-right",
});
slider.tickConfigs = [{
mode: "percent",
values: 20,
labelsVisible: true,
}];
const sliderValue = document.getElementById("sliderValue");
// filter features by belief happening
slider.on(["thumb-change", "thumb-drag"], function(event) {
sliderValue.innerText = event.value;
layerView.filter = {
where: filterField + " <= " + event.value
};
});
// });
console.log("complete")
......
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