Display and Tie datagrid to graphic circle radius query

101
2
Jump to solution
08-12-2019 01:03 PM
CarlSunderman
Occasional Contributor

I am drawing a circle radius at one mile and selecting all features that fall within the circle. I want to highlight the selected features and show them in a data grid/ table, and as i click around the map, to update the table along with the selected features.

I am able to draw the circle and select the features. i'm also able to console.log the output, but can't figure out how to create the datagrid thats tied the the selected records and clear the table on each new selection. 

    <!DOCTYPE html>  
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->

<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Buffer</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
<style>
html,
body,
#mapDiv
{
padding: 0;
margin: 0;
height: 100%;
}
#messages {
background-color: #fff;
box-shadow: 0 0 5px #888;
font-size: 1.1em;
max-width: 15em;
padding: 0.5em;
position: absolute;
right: 20px;
top: 20px;
z-index: 40;
}
#drop {
background-color: #fff;
box-shadow: 0 0 5px #888;
font-size: 1.1em;
max-width: 15em;
padding: 0.5em;
position: absolute;
right: 20px;
top: 105px;
z-index: 40;
}
</style>

<script src="http://js.arcgis.com/3.11/"></script>
<script>
var map;


require([
"esri/map", "esri/layers/FeatureLayer",
"esri/tasks/query", "esri/geometry/Circle", "esri/units",
"esri/graphic", "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer",
"esri/config", "esri/Color", "dojo/dom", "dijit/form/ComboBox", "dojo/domReady!"
], function (
Map, FeatureLayer,
Query, Circle, Units,
Graphic, InfoTemplate, SimpleMarkerSymbol,
SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer,
esriConfig, Color, dom
) {
// use a proxy page if a URL generated by this page is greater than 2000 characters
//
// this should not be needed as nearly all query & select functions are performed on the client
esriConfig.defaults.io.proxyUrl = "/proxy/";

map = new Map("mapDiv", {
basemap: "streets",
center: [-81.00, 34.000],
zoom: 14,
slider: false
});

//selected features are clicked a popup window will appear displaying the content defined in the info template.
var featureLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0", {
outFields: ["POP2000", "HOUSEHOLDS", "HSE_UNITS", "TRACT", "BLOCK"]
});

// selection symbol used to draw the selected census block points within the buffer polygon
var symbol = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_CIRCLE,
6,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_NULL, new Color([200, 120, 101, 0.9]), 1),
new Color([200, 0, 0, 1])
);
featureLayer.setSelectionSymbol(symbol);

//make unselected features invisible
var nullSymbol = new SimpleMarkerSymbol().setSize(0);
featureLayer.setRenderer(new SimpleRenderer(nullSymbol));

map.addLayer(featureLayer);


var circleSymb = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_NULL,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,
new Color([105, 105, 105]),
2
), new Color([255, 255, 0, 0.25])
);
var circle;

//when the map is clicked create a buffer around the click point of the specified distance.
map.on("click", function (evt) {
selbuf = document.FormSelection.BufferSelection.selectedIndex;
var BufferSelection = document.FormSelection.BufferSelection.options[selbuf].value;

circle = new Circle({
center: evt.mapPoint,
geodesic: true,
radius: BufferSelection,
radiusUnit: Units.MILES
});
map.graphics.clear();
map.infoWindow.hide();
var graphic = new Graphic(circle, circleSymb);
map.graphics.add(graphic);

var query = new Query();
query.geometry = circle;
featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (results) {
console.log(results)
var features = results.features;
console.log(features)
});
});

});
</script>

</head>

<body>
<span id="messages">Click on the map to select by radius within mile.</span>
<span id="drop"> Select Radius Size
<form name="FormSelection">
<select name="BufferSelection">
<option>1</option>
<option>2</option>
<option>10</option>
</select>
</form>
</span>
<div id="mapDiv"></div>
</body>

</html>
Tags (1)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Here is a sample that is almost exactly what you are describing.

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Map with a Dojo dGrid</title>

<link rel="stylesheet" href="http://js.arcgis.com/3.25/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.25/dgrid/css/dgrid.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.25/dgrid/css/skins/tundra.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.25/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.25/esri/css/esri.css">
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}

#container {
height: 100%;
visibility: hidden;
}

#bottomPane {
height: 200px;
}

.left {
float: left;
width: 50%;
overflow: hidden;
height: 200px;
}

.right {
float: left;
width: 50%;
overflow: hidden;
height: 200px;
}

.dgrid {
border: none;
}

.field-id {
cursor: pointer;
}
</style>

<script src="http://js.arcgis.com/3.25/"></script>
<script>
// load dgrid, esri and dojo modules
// create the grid and the map
// then parse the dijit layout dijits
require([
"dgrid/OnDemandGrid",
"dgrid/Selection",
"dojo/store/Memory",
"dojo/_base/array",
"dojo/dom-style",
"dojo/dom-attr",
"dijit/registry",
"esri/map",
"esri/layers/FeatureLayer",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/Color",
"esri/config",
"esri/renderers/SimpleRenderer",
"esri/tasks/QueryTask",
"esri/tasks/query",
"esri/geometry/Circle",
"esri/graphic",
"esri/dijit/PopupTemplate",
"esri/InfoTemplate",
"dojo/_base/declare",
"dojo/number",
"dojo/on",
"dojo/_base/lang",
"dojo/parser",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(
Grid,
Selection,
Memory,
array,
domStyle,
domAttr,
registry,
Map,
FeatureLayer,
SimpleMarkerSymbol,
SimpleLineSymbol,
SimpleFillSymbol,
Color,
esriConfig,
SimpleRenderer,
QueryTask,
Query,
Circle,
Graphic,
PopupTemplate,
InfoTemplate,
declare,
dojoNum,
on,
lang,
parser
) {
esriConfig.defaults.io.proxyUrl = "proxy/Proxy.ashx"
parser.parse();

// create the dgrid
window.grid = new(declare([Grid, Selection]))({
// use Infinity so that all data is available in the grid
bufferRows: Infinity,
columns: {
"id": "ID",
"popuplation": {
"label": "2000 Population",
"formatter": dojoNum.format
},
"households": "Households",
"houseunits": "House Units"
}
}, "grid");
// add a click listener on the ID column
grid.on(".field-id:click", selectBlkPnt);
grid.on("th.field-households:mouseover", function(evt){
if(domAttr.get(evt.target, "title") !== "Blah Blah"){
domAttr.set(evt.target, "title", "Blah Blah");
}
});

// create the dgrid
window.grid2 = new(declare([Grid, Selection]))({
// use Infinity so that all data is available in the grid
bufferRows: Infinity,
columns: {
"id": "ID",
"popuplation": {
"label": "2000 Population",
"formatter": dojoNum.format
},
"white": "White",
"black": "Black",
"asian": "Asian"
}
}, "grid2");

window.map = new Map("map", {
basemap: "streets",
center: [-95.249, 38.954],
zoom: 14,
});

window.blockUrl = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0";
window.blockGroupURL = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/1";
window.outFields = ["OBJECTID", "POP2000", "HOUSEHOLDS", "HSE_UNITS"];
window.bgoutFields = ["OBJECTID", "POP2000", "WHITE", "BLACK", "ASIAN"];


var fl = new FeatureLayer(window.blockUrl, {
id: "blockPnts",
outFields: window.outFields
});

var fl2 = new FeatureLayer(window.blockGroupURL, {
id: "blockGroup",
outFields: window.bgoutFields
});

// Selection symbol used to draw the selected census block points within the buffer polygon
var symbol = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_CIRCLE,
12,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_NULL,
new Color([247, 34, 101, 0.9]),
1
),
new Color([207, 34, 171, 0.5])
);
fl.setSelectionSymbol(symbol);

// Selection symbol used to draw the selected census block points within the buffer polygon
var symbol2 = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_NULL,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([247, 0, 0, 1]),
3
),
new Color([0, 0, 0, 0.5])
);
fl2.setSelectionSymbol(symbol2);

// Make unselected features invisible
var nullSymbol = new SimpleMarkerSymbol().setSize(0);
fl.setRenderer(new SimpleRenderer(nullSymbol));

// Make unselected features invisible
var nullSymbol2 = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_NULL).setOutline(null);
fl2.setRenderer(new SimpleRenderer(nullSymbol2));

fl.on("click", selectGrid);

// change cursor to indicate features are click-able
fl.on("mouse-over", function() {
window.mapClickEvt.pause();
map.setMapCursor("pointer");
});
fl.on("mouse-out", function() {
setTimeout(function() {
window.mapClickEvt.resume();
}, 800);

map.setMapCursor("default");
});

map.addLayer(fl);
map.addLayer(fl2);

var circleSymb = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_NULL,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,
new Color([105, 105, 105]),
2
), new Color([255, 255, 0, 0.25])
);
var circle;

// When the map is clicked create a buffer around the click point of the specified distance
window.mapClickEvt = on.pausable(map, "click", function(evt) {
circle = new Circle({
center: evt.mapPoint,
geodesic: true,
radius: 1,
radiusUnit: "esriMiles"
});
map.graphics.clear();
var graphic = new Graphic(circle, circleSymb);
map.graphics.add(graphic);

var query = new Query();
query.geometry = circle;
// Use a fast bounding box query. It will only go to the server if bounding box is outside of the visible map.
fl.selectFeatures(query, FeatureLayer.SELECTION_NEW, selectInBuffer);
fl2.selectFeatures(query, FeatureLayer.SELECTION_NEW, selectInBuffer2)
});

function selectInBuffer2(features) {
console.info(features);
var data = array.map(features, function(feature) {
return {
// property names used here match those used when creating the dgrid
"id": feature.attributes[window.bgoutFields[0]],
"popuplation": feature.attributes[window.bgoutFields[1]],
"white": feature.attributes[window.bgoutFields[2]],
"black": feature.attributes[window.bgoutFields[3]],
"asian": feature.attributes[window.bgoutFields[4]]
};
});
var memStore = new Memory({
data: data
});
window.grid2.set("store", memStore);
}

function selectInBuffer(features) {
var data = array.map(features, function(feature) {
return {
// property names used here match those used when creating the dgrid
"id": feature.attributes[window.outFields[0]],
"popuplation": feature.attributes[window.outFields[1]],
"households": feature.attributes[window.outFields[2]],
"houseunits": feature.attributes[window.outFields[3]]
};
});
var memStore = new Memory({
data: data
});
window.grid.set("store", memStore);
}

map.on("load", function(evt) {
// show the border container now that the dijits
// are rendered and the map has loaded
domStyle.set(registry.byId("container").domNode, "visibility", "visible");
});

// fires when a row in the dgrid is clicked
function selectBlkPnt(e) {
map.graphics.clear();
var fl = map.getLayer("blockPnts");
var query = new Query();
query.objectIds = [parseInt(e.target.innerHTML, 10)];
query.returnGeometry = true;
fl.queryFeatures(query, function(results) {
var gra = results.features[0].clone();
var symbol = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_CIRCLE,
12,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_NULL,
new Color([247, 247, 0, 1]),
1
),
new Color([247, 247, 0, 0.9])
);
gra.setSymbol(symbol);
map.graphics.add(gra);
});

}

// fires when a feature on the map is clicked
function selectGrid(e) {
var id = e.graphic.attributes.OBJECTID;
// select the corresponding row in the grid
// and make sure it is in view
grid.clearSelection();
grid.select(id);
grid.row(id).element.scrollIntoView();
}
});
</script>
</head>

<body class="tundra">
<div id="container" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline', gutters: false">
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'"></div>
<div id="bottomPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom'">
<div id="grid" class="left"></div>
<div id="grid2" class="right"></div>
</div>
</div>
</body>

</html>

View solution in original post

2 Replies
KenBuja
MVP Honored Contributor

Take a look at this sample that uses a dgrid: dgrid | ArcGIS API for JavaScript 3.29 

RobertScheitlin__GISP
MVP Esteemed Contributor

Here is a sample that is almost exactly what you are describing.

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Map with a Dojo dGrid</title>

<link rel="stylesheet" href="http://js.arcgis.com/3.25/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.25/dgrid/css/dgrid.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.25/dgrid/css/skins/tundra.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.25/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.25/esri/css/esri.css">
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}

#container {
height: 100%;
visibility: hidden;
}

#bottomPane {
height: 200px;
}

.left {
float: left;
width: 50%;
overflow: hidden;
height: 200px;
}

.right {
float: left;
width: 50%;
overflow: hidden;
height: 200px;
}

.dgrid {
border: none;
}

.field-id {
cursor: pointer;
}
</style>

<script src="http://js.arcgis.com/3.25/"></script>
<script>
// load dgrid, esri and dojo modules
// create the grid and the map
// then parse the dijit layout dijits
require([
"dgrid/OnDemandGrid",
"dgrid/Selection",
"dojo/store/Memory",
"dojo/_base/array",
"dojo/dom-style",
"dojo/dom-attr",
"dijit/registry",
"esri/map",
"esri/layers/FeatureLayer",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/Color",
"esri/config",
"esri/renderers/SimpleRenderer",
"esri/tasks/QueryTask",
"esri/tasks/query",
"esri/geometry/Circle",
"esri/graphic",
"esri/dijit/PopupTemplate",
"esri/InfoTemplate",
"dojo/_base/declare",
"dojo/number",
"dojo/on",
"dojo/_base/lang",
"dojo/parser",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(
Grid,
Selection,
Memory,
array,
domStyle,
domAttr,
registry,
Map,
FeatureLayer,
SimpleMarkerSymbol,
SimpleLineSymbol,
SimpleFillSymbol,
Color,
esriConfig,
SimpleRenderer,
QueryTask,
Query,
Circle,
Graphic,
PopupTemplate,
InfoTemplate,
declare,
dojoNum,
on,
lang,
parser
) {
esriConfig.defaults.io.proxyUrl = "proxy/Proxy.ashx"
parser.parse();

// create the dgrid
window.grid = new(declare([Grid, Selection]))({
// use Infinity so that all data is available in the grid
bufferRows: Infinity,
columns: {
"id": "ID",
"popuplation": {
"label": "2000 Population",
"formatter": dojoNum.format
},
"households": "Households",
"houseunits": "House Units"
}
}, "grid");
// add a click listener on the ID column
grid.on(".field-id:click", selectBlkPnt);
grid.on("th.field-households:mouseover", function(evt){
if(domAttr.get(evt.target, "title") !== "Blah Blah"){
domAttr.set(evt.target, "title", "Blah Blah");
}
});

// create the dgrid
window.grid2 = new(declare([Grid, Selection]))({
// use Infinity so that all data is available in the grid
bufferRows: Infinity,
columns: {
"id": "ID",
"popuplation": {
"label": "2000 Population",
"formatter": dojoNum.format
},
"white": "White",
"black": "Black",
"asian": "Asian"
}
}, "grid2");

window.map = new Map("map", {
basemap: "streets",
center: [-95.249, 38.954],
zoom: 14,
});

window.blockUrl = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0";
window.blockGroupURL = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/1";
window.outFields = ["OBJECTID", "POP2000", "HOUSEHOLDS", "HSE_UNITS"];
window.bgoutFields = ["OBJECTID", "POP2000", "WHITE", "BLACK", "ASIAN"];


var fl = new FeatureLayer(window.blockUrl, {
id: "blockPnts",
outFields: window.outFields
});

var fl2 = new FeatureLayer(window.blockGroupURL, {
id: "blockGroup",
outFields: window.bgoutFields
});

// Selection symbol used to draw the selected census block points within the buffer polygon
var symbol = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_CIRCLE,
12,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_NULL,
new Color([247, 34, 101, 0.9]),
1
),
new Color([207, 34, 171, 0.5])
);
fl.setSelectionSymbol(symbol);

// Selection symbol used to draw the selected census block points within the buffer polygon
var symbol2 = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_NULL,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([247, 0, 0, 1]),
3
),
new Color([0, 0, 0, 0.5])
);
fl2.setSelectionSymbol(symbol2);

// Make unselected features invisible
var nullSymbol = new SimpleMarkerSymbol().setSize(0);
fl.setRenderer(new SimpleRenderer(nullSymbol));

// Make unselected features invisible
var nullSymbol2 = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_NULL).setOutline(null);
fl2.setRenderer(new SimpleRenderer(nullSymbol2));

fl.on("click", selectGrid);

// change cursor to indicate features are click-able
fl.on("mouse-over", function() {
window.mapClickEvt.pause();
map.setMapCursor("pointer");
});
fl.on("mouse-out", function() {
setTimeout(function() {
window.mapClickEvt.resume();
}, 800);

map.setMapCursor("default");
});

map.addLayer(fl);
map.addLayer(fl2);

var circleSymb = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_NULL,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,
new Color([105, 105, 105]),
2
), new Color([255, 255, 0, 0.25])
);
var circle;

// When the map is clicked create a buffer around the click point of the specified distance
window.mapClickEvt = on.pausable(map, "click", function(evt) {
circle = new Circle({
center: evt.mapPoint,
geodesic: true,
radius: 1,
radiusUnit: "esriMiles"
});
map.graphics.clear();
var graphic = new Graphic(circle, circleSymb);
map.graphics.add(graphic);

var query = new Query();
query.geometry = circle;
// Use a fast bounding box query. It will only go to the server if bounding box is outside of the visible map.
fl.selectFeatures(query, FeatureLayer.SELECTION_NEW, selectInBuffer);
fl2.selectFeatures(query, FeatureLayer.SELECTION_NEW, selectInBuffer2)
});

function selectInBuffer2(features) {
console.info(features);
var data = array.map(features, function(feature) {
return {
// property names used here match those used when creating the dgrid
"id": feature.attributes[window.bgoutFields[0]],
"popuplation": feature.attributes[window.bgoutFields[1]],
"white": feature.attributes[window.bgoutFields[2]],
"black": feature.attributes[window.bgoutFields[3]],
"asian": feature.attributes[window.bgoutFields[4]]
};
});
var memStore = new Memory({
data: data
});
window.grid2.set("store", memStore);
}

function selectInBuffer(features) {
var data = array.map(features, function(feature) {
return {
// property names used here match those used when creating the dgrid
"id": feature.attributes[window.outFields[0]],
"popuplation": feature.attributes[window.outFields[1]],
"households": feature.attributes[window.outFields[2]],
"houseunits": feature.attributes[window.outFields[3]]
};
});
var memStore = new Memory({
data: data
});
window.grid.set("store", memStore);
}

map.on("load", function(evt) {
// show the border container now that the dijits
// are rendered and the map has loaded
domStyle.set(registry.byId("container").domNode, "visibility", "visible");
});

// fires when a row in the dgrid is clicked
function selectBlkPnt(e) {
map.graphics.clear();
var fl = map.getLayer("blockPnts");
var query = new Query();
query.objectIds = [parseInt(e.target.innerHTML, 10)];
query.returnGeometry = true;
fl.queryFeatures(query, function(results) {
var gra = results.features[0].clone();
var symbol = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_CIRCLE,
12,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_NULL,
new Color([247, 247, 0, 1]),
1
),
new Color([247, 247, 0, 0.9])
);
gra.setSymbol(symbol);
map.graphics.add(gra);
});

}

// fires when a feature on the map is clicked
function selectGrid(e) {
var id = e.graphic.attributes.OBJECTID;
// select the corresponding row in the grid
// and make sure it is in view
grid.clearSelection();
grid.select(id);
grid.row(id).element.scrollIntoView();
}
});
</script>
</head>

<body class="tundra">
<div id="container" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline', gutters: false">
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'"></div>
<div id="bottomPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom'">
<div id="grid" class="left"></div>
<div id="grid2" class="right"></div>
</div>
</div>
</body>

</html>

View solution in original post