I am working on developing an application with the JS API and was using a sample code to teach myself.
Does anyone know where this has gone, or alternatively does anyone have this previous sample code available to share?
I have copied my attempt to get this to work below - if anyone can help me I would be really grateful ð I'm very new to HTML and JS so would welcome any hints and tips. I'm trying to create an app that allows client-side query, where users can query brownfield sites in Liverpool, based on their proximity to certain types of schools, and minimum net housing potential.
<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</title>
<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;
padding-top: 10px;
}
.slider{
width: 100%;
height: 60px;
}
#drop-downs{
padding-bottom: 15px;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/layers/GraphicsLayer",
"esri/geometry/geometryEngine",
"esri/Graphic",
"esri/widgets/Slider"
], function(Map, MapView, FeatureLayer, GraphicsLayer, geometryEngine, Graphic, Slider) {
var BrownfieldsUrl =
var SchoolsBuffer, SchoolsGeometries, minnetdwel;
var schoolTypeSelect = document.getElementById("TypeOfEs_1");
var dwelSlider = new Slider({
container: "dwel",
min: 0,
max: 110,
steps: 10,
values: [ 2 ],
visibleElements: {
labels: true,
rangeLabels: true
}
});
var distanceSlider = new Slider({
container: "distance",
min: 100,
max: 10000,
steps: 100,
labelFormatFunction: function(value, type){
if (type === "value"){
return parseInt(value);
}
return value;
},
values: [ 5000 ],
visibleElements: {
labels: true,
rangeLabels: true
}
});
var queryBrownfields = document.getElementById("query-brownfields");
// schools
var SchoolsLayer = new FeatureLayer({
portalItem: {
// autocasts as new PortalItem()
id: "347ad1e5dd444aa2985f18f2a27eb6dd"
},
outFields: ["*"],
visible: false
});
//brownfieldsites
var BrownfieldsLayer = new FeatureLayer({
url: BrownfieldsUrl,
outFields: ["*"],
visible: false
});
// GraphicsLayer for displaying results
var resultsLayer = new GraphicsLayer();
var map = new Map({
basemap: "hybrid",
layers: [SchoolsLayer, BrownfieldsLayer, resultsLayer]
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [53.404343, -2.986252],
zoom: 9
});
view.ui.add("infoDiv", "top-right");
// query all features from the schools layer
view
.when(function() {
return SchoolsLayer.when(function() {
var query = SchoolsLayer.createQuery();
return SchoolsLayer.queryFeatures(query);
});
})
.then(getValues)
.then(getUniqueValues)
.then(addToSelect)
.then(createBuffer);
// return an array of all the values in the
// TypeOfEs_1 field of the schools layer
function getValues(response) {
var features = response.features;
var values = features.map(function(feature) {
return feature.attributes.TypeOfEs_1;
});
return values;
}
// return an array of unique values in
// the TypeOfEs_1 field of the schools 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 schools type
// select element. This will allow the user
// to filter schools by type.
function addToSelect(values) {
values.sort();
values.forEach(function(value) {
var option = document.createElement("option");
option.text = value;
SchoolTypeSelect.add(option);
});
return setSchoolDefinitionExpression(SchoolTypeSelect.value);
}
// set the definition expression on the schools
// layer to reflect the selection of the user
function setSchoolDefinitionExpression(newValue) {
SchoolsLayer.definitionExpression = "TypeOfEs_1 = '" + newValue + "'";
if (!SchoolsLayer.visible) {
SchoolsLayer.visible = true;
}
return queryForSchoolsGeometries();
}
// Get all the geometries of the schools layer
// the createQuery() method creates a query
// object that respects the definitionExpression
// of the schools layer
function queryForSchoolsGeometries() {
var SchoolsQuery = SchoolsLayer.createQuery();
return SchoolsLayer.queryFeatures(SchoolsQuery).then(function(response) {
SchoolsGeometries = response.features.map(function(feature) {
return feature.geometry;
});
return SchoolsGeometries;
});
}
// creates a single buffer polygon around
// the schools geometries
var bufferGraphic = null;
function createBuffer(SchoolPoints) {
var bufferDistance = distanceSlider.values[0];
var SchoolsBuffers = geometryEngine.geodesicBuffer(SchoolsPoints, [bufferDistance], "meters", true);
SchoolsBuffer = SchoolsBuffers[0];
if(bufferGraphic){
bufferGraphic.geometry = SchoolsBuffer;
} else {
// add the buffer to the view as a graphic
bufferGraphic = new Graphic({
geometry: SchoolsBuffer,
symbol: {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
outline: {
width: 1.5,
color: [255, 128, 0, 0.5]
},
style: "none"
}
});
view.graphics.add(bufferGraphic);
}
}
// Get the minnetdwel value set by the user
dwelSlider.on("thumb-drag", function(event) {
minnetdwel = event.value;
});
// create a buffer around the queried geometries
distanceSlider.on("thumb-drag", function(event) {
if(event.state === "stop"){
createBuffer(SchoolsGeometries);
}
});
// set a new definitionExpression on the schools layer
// and create a new buffer around the new schools
SchoolsTypeSelect.addEventListener("change", function() {
var type = event.target.value;
setSchoolsDefinitionExpression(type).then(createBuffer);
});
// query for brownfields with the specified min net dwell
// within the buffer geometry when the query button
// is clicked
queryBrownfields.addEventListener("click", function() {
queryBrownfields().then(displayResults);
});
function queryBrownfields() {
var query = BrownfieldsLayer.createQuery();
query.where = "MinNetDwel >= " + dwelSlider.values[0];
query.geometry = SchoolsBuffer;
query.spatialRelationship = "intersects";
return BrownfieldsLayer.queryFeatures(query);
}
// display the brownfields query results in the
// view and print the number of results to the DOM
function displayResults(results) {
resultsLayer.removeAll();
var features = results.features.map(function(graphic) {
graphic.symbol = {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
style: "diamond",
size: 6.5,
color: "darkorange"
};
return graphic;
});
var numBrownfields = features.length;
document.getElementById("results").innerHTML = numBrownfields + " Brownfield Sites found";
resultsLayer.addMany(features);
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="infoDiv" class="esri-widget">
<div id="drop-downs">
Select school type:
<select id="school-type" class="esri-widget"></select>
</div>
School buffer distance (meters):
<div id="distance" class="slider"></div>
Minimum Net Dwellings:
<div id="MinNetDwel" class="slider"></div>
<button id="query-brownfields" class="esri-widget">Query Brownfield Sites</button>
<div id="results" class="esri-widget"></div>
</div>
</body>
</html>
