|
POST
|
Robert, Sorry to drag you back into this one. I was wondering how to get the loading div to show when you query both the Category and item_keyword? Right now, the div shows for the Category only.
... View more
11-03-2020
07:26 AM
|
0
|
4
|
4686
|
|
POST
|
Thanks! For posterity: var query = recycleLayer.createQuery();
query.where = sqlExp;
domClass.add('loadingDiv', 'visible'); //add loadingDiv here
recycleLayer
.queryFeatures(query)
.then(getValues2)
.then(getUniqueValues2)
.then(addToSelect2); select
function addToSelect2(values) {
while (keyTypeSelect.options.length > 0) {
keyTypeSelect.remove(0);
domClass.remove('loadingDiv', 'visible'); //remove loadingDiv here
}
... View more
10-30-2020
12:14 PM
|
0
|
0
|
4686
|
|
POST
|
Thanks Robert, It's apparently a pretty simple operation, but where exactly to put this stuff is not really popping out at me. Is there not an example somewhere?
... View more
10-30-2020
11:45 AM
|
0
|
7
|
4684
|
|
POST
|
I'm having trouble adding a loading icon to this app. I want it to appear when the user makes a query. In the map, the points change to whatever category or item_keyword the user selects from the two drop-downs. As it stands, after making a selection the user can't tell when the process completes. I'm able to display a loading icon for the map view as this example demonstrates, but I'm not sure how to do it on a query. Here's the section of my app dealing with queries: // query all features from the recycle layer
view
.when(function () {
return recycleLayer.when(function () {
var query = recycleLayer.createQuery();
return recycleLayer.queryFeatures(query);
});
})
.then(getValues)
.then(getUniqueValues)
.then(addToSelect);
// re-query the layer based on the selected Category and re-populate the keyword select
catTypeSelect.addEventListener("change", function () {
var sqlExp = "";
if (catTypeSelect.selectedIndex > 0) {
sqlExp +=
"Category LIKE '%" +
catTypeSelect.options[catTypeSelect.selectedIndex].value +
"%'";
}
var query = recycleLayer.createQuery();
query.where = sqlExp;
recycleLayer
.queryFeatures(query)
.then(getValues2)
.then(getUniqueValues2)
.then(addToSelect2);
setDefinitionExpression();
});
keyTypeSelect.addEventListener("change", setDefinitionExpression);
// return an array of all the values in the
// Category and item_keyword fields of the Recycle layer
function getValues(response) {
var features = response.features;
var values = features.map(function (feature) {
return {
Category: feature.attributes.Category,
item_keyword: feature.attributes.item_keyword
};
});
return values;
}
// re-query the layer based on the selected Category and re-populate the keyword select
function getValues2(response) {
var features = response.features;
var values = features.map(function (feature) {
return feature.attributes.item_keyword;
});
return values;
}
// return an array of unique values in
// the item_keyword and Category fields of the Recycle layer
function getUniqueValues(values) {
var uniqueKeyValues = [];
var uniqueCatValues = [];
values.forEach(function (item, i) {
var keyVal = item.item_keyword.split(";");
var catVal = item.Category.split(";");
catVal.map(function (val1) {
if (
(uniqueCatValues.length < 1 ||
uniqueCatValues.indexOf(val1) === -1) &&
val1 !== ""
) {
uniqueCatValues.push(val1);
}
});
keyVal.map(function (val2) {
if (
(uniqueKeyValues.length < 1 ||
uniqueKeyValues.indexOf(val2) === -1) &&
val2 !== ""
) {
uniqueKeyValues.push(val2);
}
});
});
return {
uKeyVals: uniqueKeyValues,
uCatVals: uniqueCatValues
};
}
// re-query the layer based on the selected Category and re-populate the keyword select
function getUniqueValues2(values) {
var uniqueKeyValues = [];
values.forEach(function (item, i) {
var keyVal = item.split(";");
keyVal.map(function (val2) {
if (
(uniqueKeyValues.length < 1 ||
uniqueKeyValues.indexOf(val2) === -1) &&
val2 !== ""
) {
uniqueKeyValues.push(val2);
}
});
});
return uniqueKeyValues;
}
// Add the unique values to the recycle type
// select element. This will allow the user
// to filter categories by type.
function addToSelect(values) {
var dOpt = document.createElement("option");
dOpt.value = "";
dOpt.selected = true;
dOpt.text = "Select one";
catTypeSelect.add(dOpt);
values.uCatVals.sort();
values.uCatVals.forEach(function (value) {
var option = document.createElement("option");
option.text = value;
catTypeSelect.add(option);
});
var dOpt2 = document.createElement("option");
dOpt2.value = "";
dOpt2.selected = true;
dOpt2.text = "Select one";
keyTypeSelect.add(dOpt2);
values.uKeyVals.sort();
values.uKeyVals.forEach(function (value) {
var option = document.createElement("option");
option.text = value;
keyTypeSelect.add(option);
});
return setDefinitionExpression();
}
// re-query the layer based on the selected Category and re-populate the keyword select
function addToSelect2(values) {
while (keyTypeSelect.options.length > 0) {
keyTypeSelect.remove(0);
}
var dOpt2 = document.createElement("option");
dOpt2.value = "";
dOpt2.disabled = true;
dOpt2.selected = true;
dOpt2.text = "Select one";
keyTypeSelect.add(dOpt2);
values.sort();
values.forEach(function (value) {
var option = document.createElement("option");
option.text = value;
keyTypeSelect.add(option);
});
return true;
}
// set the definition expression on the recycle
// layer to reflect the selection of the user
function setDefinitionExpression() {
var sqlExp = "";
if (catTypeSelect.selectedIndex > 0) {
sqlExp +=
"Category LIKE '%" +
catTypeSelect.options[catTypeSelect.selectedIndex].value +
"%'";
}
if (keyTypeSelect.selectedIndex > 0) {
if (sqlExp === "") {
sqlExp +=
"item_keyword LIKE '%" +
keyTypeSelect.options[keyTypeSelect.selectedIndex].value +
"%'";
} else {
sqlExp +=
" AND item_keyword LIKE '%" +
keyTypeSelect.options[keyTypeSelect.selectedIndex].value +
"%'";
}
}
if (resRb.checked) {
if (sqlExp !== "") {
sqlExp += " AND USER_IsRes = 'TRUE'";
}
} else {
if (sqlExp !== "") {
sqlExp += " AND USER_IsBus = 'TRUE'";
}
}
console.info(sqlExp);
recycleLayer.definitionExpression = sqlExp;
if (!recycleLayer.visible) {
recycleLayer.visible = true;
}
return queryForGeometries();
}
// Get all the geometries of the recycle layer
// the createQuery() method creates a query
// object that respects the definitionExpression
// of the layer
function queryForGeometries() {
console.log("Running query");
var rQuery = recycleLayer.createQuery();
return recycleLayer.queryFeatures(rQuery).then(function (response) {
rGeometries = response.features.map(function (feature) {
return feature.geometry;
});
return rGeometries;
});
}
filterButton.addEventListener("click", function () {
setDefinitionExpression();
});
});
... View more
10-30-2020
08:01 AM
|
0
|
9
|
4996
|
|
POST
|
I solved my issue by accessing the last item in the list as opposed to the second. This: print(s[-1) #prints None elements too Not this: print(s[1])
... View more
10-15-2020
08:54 AM
|
0
|
0
|
1386
|
|
POST
|
I'm using arcpy.da.UpdateCursor and split() to update the unit name field of my table with an element from a list. This executes successfully: import arcpy
#fields from the feature class table
field = ['Unit', 'UnitName']
#use a cursor to parse the table of the feature class
with arcpy.da.UpdateCursor(fc, field) as cursor:
for row in cursor:
unit = row[0] #get Unit in field list
s = str(unit).split() #split strings in Unit field
print(s) #print list Here are a few examples of what prints out: ['200']
['STE', '112']
['STE', 'L']
['UNIT', 'A']
['STE', 'B']
['STE', 'A']
['None']
['None'] But, when I put an index number on the print statement I get the IndexError: list index out of range . Funny thing is I don't get the error right away. A bunch of elements are printed before the error occurs. I think it is because of the None elements. import arcpy
#fields from the feature class table
field = ['Unit', 'UnitName']
#use a cursor to parse the table of the feature class
with arcpy.da.UpdateCursor(fc, field) as cursor:
for row in cursor:
unit = row[1] #get Unit in field list
s = str(unit).split() #split strings in Unit field
print(s[1]) #print element in second position
row[1] = s[1] #create variable for the element
cursor.updateRow(row) #use cursor to update "UnitName" field with element in second position
Prints: 200
112
L
A
B
A
Traceback (most recent call last):
File "\GISstaff\Jared\Python Scripts\ArcGISPro\USPS_ADDRE_copy.py", line 40, in <module>
unitname()
File "\GISstaff\Jared\Python Scripts\ArcGISPro\USPS_ADDRE_copy.py", line 34, in unitname
print(s[1])
IndexError: list index out of range
... View more
10-15-2020
07:27 AM
|
0
|
2
|
1413
|
|
POST
|
Randy Burton I was trying out the usaddress module. It seems ideal. But, it threw an error that I reported to the author on GitHub. UPDATE: I think the "CHECK" in the string is a note by the editor put in to remind him/her to come back to this particular address for whatever reason. usaddress.RepeatedLabelError: Unable to tag this string because more than one area of the string has the same label
ORIGINAL STRING: CHECK S ST LOUIS ST LOT 34 ELWOOD, IL 60421
PARSED TOKENS: [('CHECK', 'StreetName'), ('S', 'StreetNamePostDirectional'), ('ST', 'PlaceName'), ('LOUIS', 'StreetName'), ('ST', 'StreetNamePostType'), ('LOT', 'OccupancyType'), ('34', 'OccupancyIdentifier'), ('ELWOOD,', 'PlaceName'), ('IL', 'StateName'), ('60421', 'ZipCode')]
UNCERTAIN LABEL: StreetName I put this in a try/except block before I realized you can't continue the code once the try block is interrupted. I'm wondering if you've ever ran into this?
... View more
10-13-2020
12:18 PM
|
0
|
1
|
4579
|
|
POST
|
Thanks to both of you. I thought I'd try list comprehension on this, but I guess I don't grasp it enough. So, I used Randy's second answer. It worked great. Bonus question: Now I have to get the number that follows the value and put it in a new field called 'UnitName'. So, for example the 108 in this field: 515 S WEBER RD APT 108 LOCKPORT, IL 60441
... View more
10-09-2020
08:43 AM
|
0
|
0
|
4579
|
|
POST
|
I was wondering if I was on the right track with this. I have a table with fields that contain addresses like this: 515 S WEBER RD APT 108 LOCKPORT, IL 60441 I'm interested in finding three types of values if they exist, and I'd like to update the value to a new field called 'UnitType'. Right now, this is printing empty brackets. I'm not too sure why. fc = r'C:\Users\jpilbeam\Downloads\AddPts_AptUnitSte.gdb\Default.gdb\AddPts_AptUnitSte'
field = 'USPS_ADDRE'
values = ['Apt', 'Unit', 'Ste']
# Use SearchCursor with list comprehension to return a
# unique set of values in the specified field
v = [row[0] for row in arcpy.da.SearchCursor(fc, field)]
types = [i for i in v if i in values]
print(types)
>>>[]
... View more
10-08-2020
02:01 PM
|
0
|
6
|
4723
|
|
POST
|
The solution I went with was: //1.) use template for flayer,
const fLayer = new FeatureLayer({
portalItem: {
id: "b5665da3feab4b6091914cbfe4ab028f"
},
popupTemplate: template, // <- template for popup
layerId: 0,
outFields: ["*"]
});
//2.) Once the feature is selected and you obtain it, set it template2,
if (result) {
feature.graphic = result.graphic.clone(); // <- clone it to avoid mutation
feature.graphic.popupTemplate = template2; // <- template2 for feature widget
highlight = layerView.highlight(result.graphic);
} else {
feature.graphic = graphic;
}
... View more
10-07-2020
10:03 AM
|
0
|
0
|
2351
|
|
POST
|
UPDATE: I was able to include my popup template in the sample. But, how do I get the Description text element (green text) to appear in the "sidebar" only? In other words, I want the table in the popup and the Description in the "sidebar". <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1, maximum-scale=1,user-scalable=no"
/>
<title>
Feature widget in a side panel | Sample | ArcGIS API for JavaScript 4.16
</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.16/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.16/"></script>
<style>
html,
body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#viewDiv {
float: left;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#sidebar {
z-index: 99;
position: absolute;
top: 0;
right: 0;
height: 100%;
background: rgba(0, 0, 0, 0.5);
width: 380px;
}
.esri-widget {
color: white;
font-size: 14px;
font-family: "Avenir Next","Helvetica Neue",Helvetica,Arial,sans-serif;
line-height: 1.3em;
}
</style>
<script>
require([
"esri/WebMap",
"esri/layers/FeatureLayer",
"esri/views/MapView",
"esri/widgets/Feature"
], function (WebMap, FeatureLayer, MapView, Feature) {
//popup template
var template = {
//autocasts the new template
title: "<font size='2.75px'><b>{USER_Name}</b>",
content: [
{
// You can also set a descriptive text element
type: "text", // TextContentElement
text: "<font color='#1c9c52'><b>{Description}</b>"
},
{
//set content elements in the order to display
type: "fields",
fieldInfos: [
{
fieldName: "USER_Addre",
label: "Address",
visible: true
},
{
fieldName: "USER_City",
label: "City",
visible: true
},
{
fieldName: "USER_Zip",
label: "Zip Code",
visible: true
},
{
fieldName: "USER_Phone",
label: " Phone",
visible: true
},
{
fieldName: "USER_Link",
label: "Website",
visible: true
},
{
fieldName: "USER_Notes",
label: "Extra Notes",
visible: true
}
]
}
]
};
const fLayer = new FeatureLayer({
portalItem: {
id: "b5665da3feab4b6091914cbfe4ab028f"
},
popupTemplate: template,
layerId: 0,
outFields: ["*"]
});
const map = new WebMap({
basemap: "dark-gray",
layers: [fLayer]
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [-88.7, 41.8],
zoom: 8.7,
popup: {
autoOpenEnabled: true
}
});
view.when().then(function () {
// Create a default graphic for when the application starts
const graphic = {
popupTemplate: {
content: "To change search from Item to Category, make sure Search by Item dropdown is set to 'Select One'. Businesses should note that they will find more appropriate listings if they check Business under the search box."
}
};
// Provide a graphic to a new instance of a Feature widget
const feature = new Feature({
container: "sidebar",
graphic: graphic,
map: view.map,
spatialReference: view.spatialReference
});
view.whenLayerView(fLayer).then(function (layerView) {
let highlight;
// listen for the pointer-move event on the View
view.on("click", function (event) {
// Perform a hitTest on the View
view.hitTest(event).then(function (event) {
// Make sure graphic has a popupTemplate
let results = event.results.filter(function (result) {
return result.graphic.layer.popupTemplate;
});
let result = results[0];
highlight && highlight.remove();
// Update the graphic of the Feature widget
// on pointer-move with the result
if (result) {
feature.graphic = result.graphic;
highlight = layerView.highlight(result.graphic);
} else {
feature.graphic = graphic;
}
});
});
});
});
});
</script>
</head>
<body>
<div id="sidebar" class="esri-widget"></div>
<div id="viewDiv"></div>
</body>
</html>
... View more
10-02-2020
07:52 AM
|
0
|
1
|
2351
|
|
POST
|
I've been primarily looking at this sample for guidance: Feature widget in a side panel | ArcGIS API for JavaScript 4.16 I'd like to add the {Description} field from this feature layer as the new graphic in the feature widget. But, instead of putting it in the side panel as the sample shows, I have it in the "sidebar" div. How do I put the {Description} field into the "sidebar", and keep the following fields from my popup template in the popup? //popup template
var template = {
//autocasts the new template
title: "<font size='2.75px'><b>{USER_Name}</b>",
content: [
{
// You can also set a descriptive text element
type: "text", // TextContentElement
text: "<font color='#1c9c52'><b>{Description}</b>"
},
{
//set content elements in the order to display
type: "fields",
fieldInfos: [
{
fieldName: "USER_Addre",
label: "Address",
visible: true
},
{
fieldName: "USER_City",
label: "City",
visible: true
},
{
fieldName: "USER_Zip",
label: "Zip Code",
visible: true
},
{
fieldName: "USER_Phone",
label: " Phone",
visible: true
},
{
fieldName: "USER_Link",
label: "Website",
visible: true
},
{
fieldName: "USER_Notes",
label: "Extra Notes",
visible: true
}
]
}
]
}; This is as far as I got in the sample sandbox: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1, maximum-scale=1,user-scalable=no"
/>
<title>
Feature widget in a side panel | Sample | ArcGIS API for JavaScript 4.16
</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.16/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.16/"></script>
<style>
html,
body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 60%;
}
#sidebar {
z-index: 99;
position: absolute;
top: 0;
right: 0;
height: 100%;
background: rgba(0, 0, 0, 0.5);
width: 380px;
}
</style>
<script>
require([
"esri/WebMap",
"esri/layers/FeatureLayer",
"esri/views/MapView",
"esri/widgets/Feature"
], function (WebMap, FeatureLayer, MapView, Feature) {
const fLayer = new FeatureLayer({
portalItem: {
id: "b5665da3feab4b6091914cbfe4ab028f"
},
layerId: 0,
outFields: ["*"]
});
const map = new WebMap({
basemap: "dark-gray",
layers: [fLayer]
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [-88.7, 41.8],
zoom: 8.7,
popup: {
autoOpenEnabled: true
}
});
view.when().then(function () {
// Create a default graphic for when the application starts
const graphic = {
popupTemplate: {
content: "To change search from Item to Category, make sure Search by Item dropdown is set to 'Select One'. Businesses should note that they will find more appropriate listings if they check Business under the search box."
}
};
// Provide graphic to a new instance of a Feature widget
const feature = new Feature({
container: "sidebar",
graphic: graphic,
map: view.map,
spatialReference: view.spatialReference
});
view.whenLayerView(fLayer).then(function (layerView) {
let highlight;
// listen for the pointer-move event on the View
view.on("click", function (event) {
// Perform a hitTest on the View
view.hitTest(event).then(function (event) {
// Make sure graphic has a popupTemplate
let results = event.results.filter(function (result) {
return result.graphic.layer.popupTemplate;
});
let result = results[0];
highlight && highlight.remove();
// Update the graphic of the Feature widget
// on pointer-move with the result
if (result) {
feature.graphic = result.graphic;
highlight = layerView.highlight(result.graphic);
} else {
feature.graphic = graphic;
}
});
});
});
});
});
</script>
</head>
<body>
<div id="sidebar" class="esri-widget"></div>
<div id="viewDiv"></div>
</body>
</html>
... View more
10-01-2020
02:19 PM
|
0
|
2
|
2412
|
|
POST
|
This app works fine as it is. You select from one or both of the drop-downs and then hit the "Search" button to start the search. But, I've been requested to have the search happen automatically as you select from the drop-down (i.e. without hitting the search button). Basically, I'd like to mimic the search from this website: Will County EEC Mobile Site. What would I have to change to do this? I've been studying this sample code because the query for the "Well Type" does what I'm wanting: https://developers.arcgis.com/javascript/latest/sample-code/featurelayer-query/index.html. But, I can't grasp it. Here is the functioning JS. And here is the whole app on Code Pen. // JavaScript source code
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/layers/GraphicsLayer",
"esri/widgets/Search",
"esri/widgets/Home",
"esri/widgets/Expand"
], function (
Map,
MapView,
FeatureLayer,
GraphicsLayer,
Search,
Home,
Expand
) {
var catTypeSelect = document.getElementById("category");
var keyTypeSelect = document.getElementById("keyword");
var filterButton = document.getElementById("filterBtn");
var resRb = document.getElementById("ResidentialRB");
//***popups***
//popup template
var template = { //autocasts the new template
title: "<font size='2.75px'><b>{USER_Name}</b>",
content: [
{
// You can also set a descriptive text element
type: "text", // TextContentElement
text: "<font color='#1c9c52'><b>{Description}</b>"
},
{ //set content elements in the order to display
type: "fields",
fieldInfos: [{
fieldName: "USER_Addre",
label: "Address",
visible: true,
},
{
fieldName: "USER_City",
label: "City",
visible: true,
},
{
fieldName: "USER_Zip",
label: "Zip Code",
visible: true,
},
{
fieldName: "USER_Phone",
label: " Phone",
visible: true,
},
{
fieldName: "USER_Link",
label: "Website",
visible: true,
},
{
fieldName: "USER_Notes",
label: "Extra Notes",
visible: true,
},]
},
],
};
// Recycle Layer
var recycleLayer = new FeatureLayer({
portalItem: {
// autocasts as new PortalItem()
id: "b5665da3feab4b6091914cbfe4ab028f"
},
popupTemplate: template,
outFields: ["*"],
visible: false
});
// GraphicsLayer for displaying results
var resultsLayer = new GraphicsLayer();
//Set map view
var map = new Map({
basemap: "dark-gray",
layers: [recycleLayer, resultsLayer]
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-88.7, 41.8],
zoom: 8.7,
padding: {
right: 380,
},
//popup
popup: {
}
});
//widthbreakpoint for sidebar
view.watch("widthBreakpoint", function (newVal) {
console.log(newVal);
if ((newVal === "medium") || newVal === "small") {
document.getElementById('sidebar').style.display = 'none';
}
else {
document.getElementById('sidebar').style.display = 'block';
}
});
//***widgets***
////Expand instance and set content property to the div element
//var bgExpand = new Expand({
// view: view,
// content: div
//});
// // Add the expand instance to the ui
//view.ui.add(textExpand, "top-right");
//home widget
var homeBtn = new Home({
view: view,
});
view.ui.add(homeBtn, "bottom-left");
//search widget
const searchWidget = new Search({
view: view
});
//Adds the search widget below other elements in
//the top left corner of the view
view.ui.add(searchWidget, {
position: "bottom-left",
index: 2
})
// query all features from the recycle layer
view
.when(function () {
return recycleLayer.when(function () {
var query = recycleLayer.createQuery();
return recycleLayer.queryFeatures(query);
});
})
.then(getValues)
.then(getUniqueValues)
.then(addToSelect)
// re-query the layer based on the selected Category and re-populate the keyword select
catTypeSelect.addEventListener("change", function () {
var sqlExp = "";
if (catTypeSelect.selectedIndex > 0) {
sqlExp += "Category LIKE '%" + catTypeSelect.options[catTypeSelect.selectedIndex].value + "%'";
}
var query = recycleLayer.createQuery();
query.where = sqlExp;
recycleLayer.queryFeatures(query)
.then(getValues2)
.then(getUniqueValues2)
.then(addToSelect2)
});
// return an array of all the values in the
// Category and item_keyword fields of the Recycle layer
function getValues(response) {
var features = response.features;
var values = features.map(function (feature) {
return {
Category: feature.attributes.Category,
item_keyword: feature.attributes.item_keyword
}
});
return values;
}
// re-query the layer based on the selected Category and re-populate the keyword select
function getValues2(response) {
var features = response.features;
var values = features.map(function (feature) {
return feature.attributes.item_keyword
});
return values;
}
// return an array of unique values in
// the item_keyword and Category fields of the Recycle layer
function getUniqueValues(values) {
var uniqueKeyValues = [];
var uniqueCatValues = [];
values.forEach(function (item, i) {
var keyVal = item.item_keyword.split(";");
var catVal = item.Category.split(";");
catVal.map(function (val1) {
if (
(uniqueCatValues.length < 1 || uniqueCatValues.indexOf(val1) === -1) &&
val1 !== ""
) {
uniqueCatValues.push(val1);
}
});
keyVal.map(function (val2) {
if (
(uniqueKeyValues.length < 1 || uniqueKeyValues.indexOf(val2) === -1) &&
val2 !== ""
) {
uniqueKeyValues.push(val2);
}
});
});
return {
uKeyVals: uniqueKeyValues,
uCatVals: uniqueCatValues
};
}
// re-query the layer based on the selected Category and re-populate the keyword select
function getUniqueValues2(values) {
var uniqueKeyValues = [];
values.forEach(function (item, i) {
var keyVal = item.split(";");
keyVal.map(function (val2) {
if (
(uniqueKeyValues.length < 1 || uniqueKeyValues.indexOf(val2) === -1) &&
val2 !== ""
) {
uniqueKeyValues.push(val2);
}
});
});
return uniqueKeyValues;
}
// Add the unique values to the recycle type
// select element. This will allow the user
// to filter categories by type.
function addToSelect(values) {
var dOpt = document.createElement("option");
dOpt.value = "";
dOpt.selected = true;
dOpt.text = "Select one";
catTypeSelect.add(dOpt);
values.uCatVals.sort();
values.uCatVals.forEach(function (value) {
var option = document.createElement("option");
option.text = value;
catTypeSelect.add(option);
});
var dOpt2 = document.createElement("option");
dOpt2.value = "";
dOpt2.selected = true;
dOpt2.text = "Select one";
keyTypeSelect.add(dOpt2);
values.uKeyVals.sort();
values.uKeyVals.forEach(function (value) {
var option = document.createElement("option");
option.text = value;
keyTypeSelect.add(option);
});
return setDefinitionExpression();
}
// re-query the layer based on the selected Category and re-populate the keyword select
function addToSelect2(values) {
while (keyTypeSelect.options.length > 0) {
keyTypeSelect.remove(0);
}
var dOpt2 = document.createElement("option");
dOpt2.value = "";
dOpt2.disabled = true;
dOpt2.selected = true;
dOpt2.text = "Select one";
keyTypeSelect.add(dOpt2);
values.sort();
values.forEach(function (value) {
var option = document.createElement("option");
option.text = value;
keyTypeSelect.add(option);
});
return true
}
// set the definition expression on the recycle
// layer to reflect the selection of the user
function setDefinitionExpression() {
var sqlExp = "";
if (catTypeSelect.selectedIndex > 0) {
sqlExp += "Category LIKE '%" + catTypeSelect.options[catTypeSelect.selectedIndex].value + "%'";
}
if (keyTypeSelect.selectedIndex > 0) {
if (sqlExp === "") {
sqlExp += "item_keyword LIKE '%" + keyTypeSelect.options[keyTypeSelect.selectedIndex].value + "%'";
} else {
sqlExp += " AND item_keyword LIKE '%" + keyTypeSelect.options[keyTypeSelect.selectedIndex].value + "%'";
}
}
if (resRb.checked) {
if (sqlExp !== "") {
sqlExp += " AND USER_IsRes = 'TRUE'";
}
} else {
if (sqlExp !== "") {
sqlExp += " AND USER_IsBus = 'TRUE'";
}
}
console.info(sqlExp);
recycleLayer.definitionExpression = sqlExp;
if (!recycleLayer.visible) {
recycleLayer.visible = true;
}
return queryForGeometries();
}
// Get all the geometries of the recycle layer
// the createQuery() method creates a query
// object that respects the definitionExpression
// of the layer
function queryForGeometries() {
var rQuery = recycleLayer.createQuery();
return recycleLayer.queryFeatures(rQuery).then(function (response) {
rGeometries = response.features.map(function (feature) {
return feature.geometry;
});
return rGeometries;
});
}
filterButton.addEventListener("click", function () {
setDefinitionExpression();
});
});
... View more
09-23-2020
10:57 AM
|
0
|
3
|
2040
|
|
POST
|
Is there an equivalent to the info widget found in the Webapp Builder in the JS API sample code? I'm looking for a widget that I can simply put text in. I can't seem to find one.
... View more
08-21-2020
02:34 PM
|
0
|
1
|
1023
|
| Title | Kudos | Posted |
|---|---|---|
| 1 | a month ago | |
| 1 | 05-04-2026 08:45 AM | |
| 1 | 04-20-2026 01:20 PM | |
| 1 | 07-24-2025 01:27 PM | |
| 1 | 11-13-2025 08:22 AM |
| Online Status |
Offline
|
| Date Last Visited |
15 hours ago
|