<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Intro to FeatureLayer - 4.11</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.11/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.11/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/tasks/support/Query",
"esri/tasks/QueryTask",
"esri/Graphic"
], function(Map, MapView, FeatureLayer, Query,QueryTask,Graphic) {
var map = new Map({
basemap: "topo"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-73.98,40.74],
zoom: 13
});
/********************
* Add feature layer
********************/
// var featureLayer = new FeatureLayer({
// url:
// "https://services1.arcgis.com/JPUKRee8mEBfJ0K4/arcgis/rest/services/Subway/FeatureServer"
// });
//map.add(featureLayer);
var query = new Query();
query.where = "LINE ='BMT'";
query.outFields = [ "*" ];
query.returnGeometry = true;
var queryTask = new QueryTask({
url:"https://services1.arcgis.com/JPUKRee8mEBfJ0K4/arcgis/rest/services/Subway/FeatureServer"
});
queryTask.execute(query)
.then(function(result){
//console.log(result.features.length)
//*** ADD ***//
result.features.forEach(function(item){
var g = new Graphic({
geometry: item.geometry,
attributes: item.attributes,
symbol: {
type: "simple-marker",
color: "black",
width: 1.2,
style: "short-dot"
}
});
view.graphics.add(g);
});
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>