|
POST
|
How do I query a feature layer? My feature layer is about 150 points with attributes. I'd like to be able to have the user query these points by "Type". I've had a look at this example: https://developers.arcgis.com/javascript/latest/sample-code/featurelayer-query/index.html As far as I can see I should be able to use it. Based on the example, here's what I came up with using my own data. But it's not functioning. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Query features from a FeatureLayer - 4.9</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
<script src="https://js.arcgis.com/4.9/"></script>
<style>
html,
body,
#viewDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#infoDiv {
background-color: white;
color: black;
padding: 6px;
width: 400px;
}
#results {
font-weight: bolder;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/layers/GraphicsLayer",
"esri/geometry/geometryEngine",
"esri/Graphic"
],
function (
Map, MapView,
FeatureLayer,
GraphicsLayer,
geometryEngine,
Graphic
) {
var attTypeSelect = document.getElementById("attractions");
//attractions
var attractions = new FeatureLayer({
url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Attractions/FeatureServer/0?token=kIhkvEGZO_-PPXgeZu2nYpHz_eXYZ1NZ9DGgX7CbRZsG9vic6BHNeOiiLw37TCoGgn22dNexnPmhppQk8YeXV3f0OxYcTC1YcMINIwcbcw_e8tEpKfdkjCLL3byL640Dil7J-izJUpOFIl7Wa1L6UpZ-xZbP1oA41jmhaOC_dha3PPvm-lwnFY6ZsAk5IIdub0_nimOM2IlTUTaER45elvCg3lfmy5BVodDkggLnWQY-60sg50jYQys-QSpzDFSShttps://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Attractions/FeatureServer/0?token=brm_9OG_7AUlcufevjfLoiSCxxlcVN1g5n68z0G-L5L1gE22RKd_us2vNRlwNY1EwS0ci88AMo4Xu7Y90ScmkgC4KubpvN94IAAPMn1JdSEaDsNACutdsM0RCDxAUt6OJa5JDd3K53AI816rgB6QgMGaqNnR4A7-XNgfqKwfN9ygBw_P0uN_Mec_NPoKg19J_S91p9LwPuxjSGgYjPC6N6rJTsp206_z4Om7XtP_3uUaVHf6NRMDy4TdLMotUnxs",
outFields: ["*"],
id: "attractions",
visible: false
});
//GraphicsLayer for desplaying results
var resultsLayer = new GraphicsLayer();
var map = new Map({
basemap: "dark-gray",
layer: "attractions"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-87.75188, 41.23308],
zoom: 10
});
view.ui.add("infoDiv", "top-right");
//query all features from the attractions layer
view.when(function () {
return attractions.when(function () {
var query = attractions.createQuery();
return attractions.queryFeatures(query);
});
})
.then(getValues)
.then(getUniqueValues)
.then(addToSelect);
// return an array of all the values in the
// Type field of the attractions layer
function getValues(response) {
var features = response.features;
var values = features.map(function (feature) {
return feature.attributes.Type;
});
return values;
}
// return an array of unique values in
// the Type field of the attractions layer
function getUniqueValues(values) {
var uniqueValues = [];
values.forEach(function (item, i) {
if ((uniqueValues.length < 1 || uniqueValues.indexOf(item) === -1) &&
(item !== "")) {
uniqueValues.push(item);
}
});
return uniqueValues;
}
// Add the unique values to the attractions type
// select element. This will allow the user
// to filter attractions by type.
function addToSelect(values) {
values.sort();
values.forEach(function (value) {
var option = document.createElement("option");
option.text = value;
attTypeSelect.add(option);
});
return setattractionsDefinitionExpression(attTypeSelect.value);
}
// set the definition expression on the attractions
// layer to reflect the selection of the user
function setattractionsDefinitionExpression(newValue) {
attractions.definitionExpression = "Type" + newValue + "'";
if (!attractions.visible) {
attractions.visible = true;
}
return queryForAtractionGeometries();
}
// Get all the geometries of the attractions layer
// the createQuery() method creates a query
// object that respects the definitionExpression
// of the layer
function queryForAttractionGeometries() {
var attractionsQuery = attractions.createQuery();
return attractions.queryFeatures(attractionsQuery)
.then(function (response) {
attractionsGeometries = response.features.map(function (feature) {
return feature.geometry;
});
return attractionsGeometries;
});
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="infoDiv">
Select attractions type:
<select id="attractions"></select>
</div>
</body>
</html>
... View more
10-11-2018
11:47 AM
|
0
|
2
|
5318
|
|
POST
|
//add legend
var legend = new Expand({
content: new Legend({
view: view,
//style: "card"
}),
view: view,
expanded: false
});
view.ui.add(legend, "top-left");
}); Update: Something in my code is only allowing the legend to appear card style once (line 5 here) is commented out. I was talking to an Esri tech about this and he was able to use my layers in a app with a card-style legend and it was fine. So, I'm marking your answer here as correct since, on the surface, it answers the question.
... View more
10-05-2018
09:27 AM
|
1
|
0
|
1464
|
|
POST
|
@Molly F Could you tell me how you got the service title to display? Here's how my legend looks: The names of the Feature Services and the Layers are being displayed. I'm trying to get my legend to look like yours.
... View more
10-03-2018
12:05 PM
|
0
|
2
|
5969
|
|
POST
|
Robert, here's how it is in the script for the Route 66 layer: var rt66 = new FeatureLayer({
url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Will_County_Tourist_Attractions/FeatureServer/1?token=lCbBAZf7OeU-woSquLtIM3JmePz2QkOjfB0_BEd4zP5paSlezeyNSlcuO2yqUvsV0ZGyjL30dGXV-TWOcw6H1tq-Lx1Y7J0u4WbRF8uJXQzPYdK-gjHzSfFPGS3HpY46cOK2KQi4a2089fHESZ3UvjhoNr2YYENlmzjuTKVlfd9EiLhyLMs2ZUTMecCyKDP_W2KuZlLeh82Lee4FJ0SPHgB0fA52qRntM89Pj9HKTXydVAfJiRFEnyN9I9ft8yfX",
}) EDIT: the service url came from the Overview tab of the feature layer's AGOL page:
... View more
10-03-2018
10:27 AM
|
0
|
1
|
1342
|
|
POST
|
These feature layers I'm working with were created from a File Geodatabase: https://willcountygis.maps.arcgis.com/home/item.html?id=14a8dfb2cb6048f29691c5dc1405c4b5 Here's how it looks in the legend: If I rename a feature layer in the web map it doesn't save. So I save it and create another web map. I use that layers' service URL in my script and the title in the legend still is there twice, as it looks in the image above. It seems like it should be simple, but how do I change the title to just "Route 66", for example?
... View more
10-03-2018
09:39 AM
|
0
|
3
|
1455
|
|
POST
|
Robert, What's confusing me is how their script uses 'const' instead of 'var': // add a legend widget instance to the view
// and set the style to 'card'. This is a
// responsive style, which is good for mobile devices
const legend = new Expand({
content: new Legend({
view: view,
style: "card" // other styles include 'classic'
}),
view: view,
expanded: true
});
view.ui.add(legend, "bottom-left");
});
... View more
10-01-2018
02:26 PM
|
0
|
1
|
1464
|
|
POST
|
I need help implementing this.This app I'm creating is supposed to be mobile-friendly which is why I'm seeking the card style. Legend widget card style | ArcGIS API for JavaScript 4.9 I've been referencing this sample code, but I'm not too sure how to tweak it so that it works in my script. Here's how that portion of my script looks now: var legend = new Legend({
view: view
});
view.ui.add(legend, "top-left"),
//functions
map.addMany([canal, preserves, rt66, boundary, attractions, featureLayer]);
}); Here's a link to my whole script.
... View more
10-01-2018
02:08 PM
|
1
|
4
|
1746
|
|
POST
|
Thanks Robert. The order of your variables seems the wrong way round, but it did the trick! I tried this order and it didn't change anything: map.addMany([attractions, boundary, rt66, canal, preserves]);
... View more
09-28-2018
10:54 AM
|
0
|
1
|
1693
|
|
POST
|
I'm working on an app with a few feature layers. There are points (attractions) and polygons (preserves). Why do the polygons overlap the points? Image: It doesn't seem to deal with the order of the feature layers in the <script>: //add attraction feature layer
var attractions = new FeatureLayer({
url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Attractions/FeatureServer/0?token=FRQ3ta_CoBnz3s5xOY8Q649k62CGCo1FxjRhLn9ptI2ANN03ld5Yma2vHGf8MbovDnGjE6VxpTJ7kAShDHjSAeJiuFhGiZVTT1yC6oogNPkfeKqroE1drY-84jmqnKHcEtgY_WjYeIa-RAftHdlO-OgqDvMQSwElQzVkI_GjsXViudg4DHApFmxlp3RoYngYH5kYH3qXcVSAU6Qhp-DgciW_ZvfWalpE1IJsB2b6eKO1bdGdPibKtQUJoGuqFbs_",
id: "attractions",
zoom: 2,
});
//add will county boundary
var boundary = new FeatureLayer({
url: "http://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Will_County_Boundary/FeatureServer/0?token=6vBDftNXDqbaZH6fbfhuDCeGkJFaWMSEPaeYDt6PbDBfVacnSMMD7PZS3QeCW6mDqgSFMK0tRjMyJyrxDPQ3rcjTNUCFpi0pfpU_mFLoKXGlT5FTGTPH3GjMqL9iQCqh9_ihX8D1-DQ5N_ptC-ic9bKeDLjqU2xQOv8wIRPjX5VwrtsQz_ltdanO49SVPaJ8F7EN6qWZMgvFw9V0iBbV4Iu0khjfjhuswBNzhjJa3I6q0epaze9AsPRVvVXJ5wik",
id: "boundary",
zoom: 1,
});
//add Rt 66
var rt66 = new FeatureLayer({
url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Will_County_Tourist_Attractions/FeatureServer/1?token=Bj40q7dvc09lhoMxvDc_YHICLyf8Sz-HYSQ-n4lP4f4CGm3JaITUY0Tm7FnhhXcDel7W4rzUoKt1jDqw5CZGaEAQgq3IfUGez171nOzq5UlHAX5xQqWiV5BC3eUbd02xjimDX7VzJh8Z6muNPIep3iy1uZKfURjQ-Pdi5bbuF1p2DtffTsnOYCpNsyRX8SraieLTqxpm-2L6TdzRrUt2B6V48kzXcrQQz6uGDiUrBycc0GL0K94QiUmKwJNUxDXB",
id: "rt66",
zoom: 1,
});
//add Canal
var canal = new FeatureLayer({
url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Will_County_Tourist_Attractions/FeatureServer/7?token=hhHLfbTFMO4xFbknwKCPflTqPD9RL5itP3d986PoOep4vUpYx5a27DnJ2PlFrPNXbkh_ytENT0SON4tQmlnxh7kiIqS10xkmfylm7IjTE9g5zah3TAe3XNEV6PxrN2jyU42SX0CF-7EABZGhODoFvu9K8wMQnAH5-2iJ26SmD68z2De_aXWT8EOjwAt6jBPV_BF9P031hxa8ei_rYDM126rHh_B7lPwoD8WjuVTp67qZyo3EdCKcuv1fsKG7g70M",
id: "canal",
});
//add FPDWC preservs
var preserves = new FeatureLayer({
url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Will_County_Tourist_Attractions/FeatureServer/2?token=iVy9SWuGGAelNxz-bZrVvaE5FG3S_FfugVidwyINuh_XgsPUhM_W_XO3f75zJDIN2J2f6D0b7fMbjd2zl08NAghPxjZiD4RZGapZajL_nNMp2xoCxB77LDk201BkOMwnEmOIv10EexpqjR_rV713GK7Jw19qB4SkKkWj6sKBOM0bKxo78fc6znY--QIvtegGrigwViKjxyIB17sGxXswV62xOKkYpX96s37oGaKqRNX7EzG4IUmTXA8mQfb9W4S4",
id: "preserves",
});
//functions
map.add(featureLayer);
map.add(attractions);
map.add(boundary);
map.add(rt66);
map.add(canal);
map.add(preserves);
});
</script> I suspect it has to do with the hosted feature layers back in AOL. The attractions feature layer was created from a CSV file, while the other feature layers were uploaded to AOL in a FGDB.
... View more
09-28-2018
09:58 AM
|
1
|
3
|
1901
|
|
POST
|
Brilliant. Thanks Robert. BTW, I also had to change this section to false or else I was getting the attributes to show up in the popup too. {
fieldName: "Photo",
label: "Photo",
visible: false,
}
... View more
09-21-2018
01:14 PM
|
0
|
0
|
4576
|
|
POST
|
In my attributes the Photo field is a URL: http://www.willcogis.org/website2014/gis/images/mar.png So, I thought I'd change the type to "url" instead of "image" under mediaInfos. Nothing.
... View more
09-21-2018
11:34 AM
|
0
|
2
|
4576
|
|
POST
|
Adrian, That segment is actually where I got the idea. My code has the chart section partially incorporated (using an image). But, I can't get the image to show up in the popup. For one, I'm not sure what the tooltipField variable is or why they include it? Here's how I incorporated it: var view = new MapView({
container: "viewDiv",
map: map,
scale: 500000,
center: [-87.95, 41.4],
popup: {
dockEnabled: true,
dockOptions: {
//disables the dock button from the pop-up
buttonEnabled: false,
//ignore the default sizes that trigger responsive docking
breakpoint: false,
}
}
});
//popup template
var template = { //autocasts the new template
title: "<font color= '#008000'>{Name}",
content: [{ //set content elements in the order to display
type: "fields",
fieldInfos: [{
fieldName: "Type",
label: "Type",
visible: true,
}, {
fieldName: "Address",
label: "Address",
visible: true,
}, {
fieldName: "Website",
label: "Website",
visible: true,
}, {
fieldName: "Photo",
label: "Photo",
visible: true,
},
]
}, {
// You can set a media element within the popup as well. This
// can be either an image or a chart. You specify this within
// the mediaInfos. Similar to text elements, media can only be set within the content.
type: "media",
mediaInfos: [{
type: "image",
value: {
fields: ["Photo"],
normalizeField: null,
}
}]
}
]
};
... View more
09-21-2018
10:54 AM
|
1
|
3
|
4576
|
|
POST
|
This webpage I'm working on is in a test phase. I have one point on the map. There's a table behind it with the name, type, address, website and photo. I would like to have the photo show up in the popup. Right now, when you click the point the photo field shows up in the popup as a link. That's not what I'm going for. I want this and each additional point I add to show the photo of its related field directly in the popup. Here's a sample that does something similar: ArcGIS API for JavaScript Sandbox. Each popup has it's related chart coming from their table. This is what I want to do. The pics here don't change.
... View more
09-21-2018
09:34 AM
|
1
|
5
|
4863
|
|
POST
|
Thanks to you both. I just realized at the same time it was the the header in the CSS that was causing the problem. I'll have to adjust this.
... View more
09-19-2018
12:44 PM
|
0
|
0
|
2523
|
|
POST
|
Robert, I can't see anything in the CSS that would be related to the popup. Here's a link to the webpage in case you'd like to check it out. It's all one big HTML file. I've tried undocking it, but the title is still centered. I've tried it without the graphic used to outline the feature layer, but no difference. I haven't taken out all elements related to the popup and started over. I might have to, however.
... View more
09-19-2018
12:15 PM
|
0
|
3
|
2523
|
| Title | Kudos | Posted |
|---|---|---|
| 1 | 2 weeks ago | |
| 1 | 4 weeks ago | |
| 1 | 07-24-2025 01:27 PM | |
| 1 | 11-13-2025 08:22 AM | |
| 1 | 11-12-2025 08:37 AM |
| Online Status |
Online
|
| Date Last Visited |
9 hours ago
|