Query Features Sample Code

344
6
Jump to solution
07-13-2021 07:12 AM
EllisHammond1
New Contributor II

Hello,

I am working on developing an application with the JS API and was using a sample code to teach myself.

The sample code was previously here: https://developers.arcgis.com/javascript/latest/sample-code/featurelayer-query/ But has since been replaced with a new example. The previous example involved querying earthquakes based on magnitude and proximity to well sites. 

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.

@BlakeTerhune @KenBuja I have seen that you guys have helped with this kind of thing before, hope you don't mind me tagging you.

<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>

    <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.19/"></script>

    <style>
        html,
        body,
        #viewDiv {
          height100%;
          width100%;
          margin0;
          padding0;
        }

        #infoDiv {
          background-colorwhite;
          colorblack;
          padding6px;
          width400px;
        }

        #results {
          font-weightbolder;
          padding-top10px;
        }
        .slider{
          width100%;
          height60px;
        }
        #drop-downs{
          padding-bottom15px;
        }
      </style>

      <script>
        require([
          "esri/Map",
          "esri/views/MapView",
          "esri/layers/FeatureLayer",
          "esri/layers/GraphicsLayer",
          "esri/geometry/geometryEngine",
          "esri/Graphic",
          "esri/widgets/Slider"
        ], function(MapMapViewFeatureLayerGraphicsLayergeometryEngineGraphicSlider) {

          var BrownfieldsUrl =

          var SchoolsBufferSchoolsGeometriesminnetdwel;

          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(valuetype){
              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: [SchoolsLayerBrownfieldsLayerresultsLayer]
          });

          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(itemi) {
              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: [25512800.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>

 

 

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
Noah-Sager
Esri Regular Contributor

Hi @EllisHammond1, is this the version of the sample that you were referring to?

https://codepen.io/noash/pen/vYmgNqa?editors=1000

 

Older versions of the SDK, which contains the samples, are available to download by version if you have a developer's account: https://developers.arcgis.com/downloads/#javascript

 

View solution in original post

6 Replies
Noah-Sager
Esri Regular Contributor

Hi @EllisHammond1, is this the version of the sample that you were referring to?

https://codepen.io/noash/pen/vYmgNqa?editors=1000

 

Older versions of the SDK, which contains the samples, are available to download by version if you have a developer's account: https://developers.arcgis.com/downloads/#javascript

 

View solution in original post

EllisHammond1
New Contributor II

Hi @Noah-Sager 

Yes, that's the sample - Thank you so much!

If possible, are you able to troubleshoot my code in the original post? I'm unsure as to why it's not working.

Thanks in advance for your help - really appreciate it.

0 Kudos
BlakeTerhune
MVP Regular Contributor

There's a lot going on here that needs to be addressed. From my first pass, here are some basic issues I noticed.

  • You reference a variable "SchoolsTypeSelect" that does not exist. Probably should be SchoolTypeSelect
  • var schoolTypeSelect = document.getElementById("TypeOfEs_1");
    There is no element with an id = "TypeOfEs_1"
  • The URL defined for BrownfieldsUrl is incomplete. Maybe it should be

 

https://services3.arcgis.com/htbSquWCstgNlzeK/ArcGIS/rest/services/Brownfield_master_layer_v2_LivClip/FeatureServer/0​

 

I'll take another look if you're able to resolve those issues.

0 Kudos
EllisHammond1
New Contributor II

Hi @BlakeTerhune ,

Thank you so much for agreeing to help me with this - I think I've corrected some of the issues. 

You can find a new version here or below:

<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>

<link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.19/"></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;
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) {

//brownfieldsites
var BrownfieldsLayer = new FeatureLayer({
url: "https://services3.arcgis.com/htbSquWCstgNlzeK/ArcGIS/rest/services/Brownfield_master_layer_v2_LivCli...",
outFields: ["*"],
visible: false
});

var SchoolsBuffer, SchoolsGeometries, minnetdwel;

var schoolTypeSelect = document.getElementById("school-type");

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("queryBrownfields");

// schools
var SchoolsLayer = new FeatureLayer({
portalItem: {
// autocasts as new PortalItem()
id: "347ad1e5dd444aa2985f18f2a27eb6dd"
},
outFields: ["*"],
visible: false
});

// GraphicsLayer for displaying results
var resultsLayer = new GraphicsLayer();

var map = new Map({
basemap: "topo-vector",
layers: [SchoolsLayer, BrownfieldsLayer, resultsLayer]
});

var view = new MapView({
container: "viewDiv",
map: map,
center: [-2.986252, 53.404343],
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) {});
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(SchoolsPoints) {
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
SchoolTypeSelect.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="dwel" class="slider"></div>
<button id="query-brownfields" class="esri-widget">Query Brownfield Sites</button>
<div id="results" class="esri-widget"></div>
</div>
</body>
</html>

0 Kudos
EllisHammond1
New Contributor II

Hi @BlakeTerhune,

Thank you so much for agreeing to help me with this - I've been working on it this morning and have gotten closer, please disregard the previous reply. 

New version below and here

<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>

<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.18/"></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;
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 =
"https://services3.arcgis.com/htbSquWCstgNlzeK/arcgis/rest/services/Brownfield_master_layer_v2_LivCli...";
var schoolBuffer, schoolsGeometries, dwelling;
var schoolTypeSelect = document.getElementById("school-type");
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");
// oil and gas schools
var schoolsLayer = new FeatureLayer({
portalItem: {
// autocasts as new PortalItem()
id: "347ad1e5dd444aa2985f18f2a27eb6dd"
},
outFields: ["*"],
visible: false
});
// historic brownfields
var brownfieldsLayer = new FeatureLayer({
url: brownfieldsUrl,
outFields: ["*"],
visible: false
});
// GraphicsLayer for displaying results
var resultsLayer = new GraphicsLayer();
var map = new Map({
basemap: "topo-vector",
layers: [schoolsLayer, brownfieldsLayer, resultsLayer]
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-2.986252, 53.404343],
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
// STATUS2 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 STATUS2 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 setschoolsDefinitionExpression(schoolTypeSelect.value);
}
// set the definition expression on the schools
// layer to reflect the selection of the user
function setschoolsDefinitionExpression(newValue) {
schoolsLayer.definitionExpression = " TypeOfEs_1 = '" + newValue + "'";
if (!schoolsLayer.visible) {
schoolsLayer.visible = true;
}
return queryForschoolGeometries();
}
// Get all the geometries of the schools layer
// the createQuery() method creates a query
// object that respects the definitionExpression
// of the layer
function queryForschoolGeometries() {
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 school geometries
var bufferGraphic = null;

function createBuffer(schoolPoints) {
var bufferDistance = distanceSlider.values[0];
var schoolBuffers = geometryEngine.geodesicBuffer(
schoolPoints,
[bufferDistance],
"meters",
true
);
schoolBuffer = schoolBuffers[0];
if (bufferGraphic) {
bufferGraphic.geometry = schoolBuffer;
} else {
// add the buffer to the view as a graphic
bufferGraphic = new Graphic({
geometry: schoolBuffer,
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 dwelling value set by the user
dwelSlider.on("thumb-drag", function(event) {
dwelling = 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
schoolTypeSelect.addEventListener("change", function() {
var type = event.target.value;
setschoolsDefinitionExpression(type).then(createBuffer);
});
// query for brownfields with the specified dwelling
// 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 = "dwel >= " + dwelSlider.values[0];
query.geometry = schoolBuffer;
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 + " brownfields 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>
Brownfield dwelling:
<div id="dwel" class="slider"></div>
<button id="query-brownfields" class="esri-widget">Query Brownfield Sites</button>
<div id="results" class="esri-widget"></div>
</div>
</body>

</html>

0 Kudos
BlakeTerhune
MVP Regular Contributor

Checking the console log, you are getting errors in the geometry engine, which would only be in your createBuffer() function. In there, you have a schoolPoints parameter that you need to use in geodesicBuffer(). However, there are a couple places you call createBuffer without any arguments; lines 142 and 245.