Think I got it.....Seems to be working well....nothing really formatted here just snips of my code.Thank you all for your help, thoughts, and patience....VERY appreciated.The below is doing a few things:
- When the user clicks the map a buffer is created
- This buffer is used to select a Point Feature
- These results are then displayed in the map and the table
- When you hover over one if the features it displays its attributes.
Note there were 3 external CSS fileshttps://js.arcgis.com/3.8/js/dojo/dojox/grid/resources/Grid.csshttps://js.arcgis.com/3.8/js/esri/css/esri.csshttp://js.arcgis.com/3.8/js/dojo/dijit/themes/tundra/tundra.cssTHANK YOU ALL....now on to the next puzzle...1. Get the Table to jump to the record and highlight it when hover or click the selected features2. Zoom to the Feature in the map when click on it in the table <body class="tundra">
<div id="grid"></div>
<div id="mapDiv">
<div id="info"></div>
</div>
</body>
var map;
require([
"esri/map", "esri/layers/FeatureLayer",
"esri/tasks/query", "esri/tasks/QueryTask",
"esri/tasks/GeometryService", "esri/tasks/BufferParameters",
"esri/graphic", "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",
"esri/TimeExtent", "dojo/number", "dojo/date/locale",
"dojo/_base/array", "dojo/store/Memory", "dgrid/OnDemandGrid",
"esri/renderers/SimpleRenderer", "esri/lang", "dojo/dom-style", "dijit/TooltipDialog", "dijit/popup",
"esri/config", "dojo/_base/Color", "dojo/dom", "dojo/domReady"
], function(
Map, FeatureLayer,
Query, QueryTask,
GeometryService, BufferParameters,
Graphic, InfoTemplate, SimpleMarkerSymbol,
SimpleLineSymbol, SimpleFillSymbol,
TimeExtent, number, locale,
arrayUtils, Memory, OnDemandGrid,
SimpleRenderer, esriLang, domStyle, TooltipDialog, dijitPopup,
esriConfig, Color, dom
) {
// create a dgrid
var sortAttr = [{
attribute: "SITENAME",
descending: true
}];
grid = new OnDemandGrid({
store: Memory({
idProperty: "SITENAME"
}),
columns:{
NAME: "SiteNames",
REGION: "Regions",
},
sort: sortAttr
}, "grid");
esri.config.defaults.io.proxyUrl = "https://fwisweb1.dgif.virginia.gov/proxypage_net/proxy.ashx";
map = new Map("mapDiv", {
basemap: "streets",
center: [-77.4329, 37.5410],
zoom: 7,
slider: false
});
var featureLayer = new FeatureLayer("https://SOMESERVER/arcgis/rest/services/Test/RampTEST/FeatureServer/0", {
mode: FeatureLayer.MODE_SELECTION,
outFields: ['*']
});
map.infoWindow.resize(245,125);
dialog = new TooltipDialog({
id: "tooltipDialog",
style: "position: absolute; width: 250px; font: normal normal normal 10pt Helvetica;z-index:100"
});
dialog.startup();
// selection symbol used to draw the selected census block points within the buffer polygon
var point = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_CIRCLE,
25,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_NULL,
new Color([137, 214, 171, 0.9]),
1
),
new Color([137, 214, 171, 0.5])
);
// Blue new Color([160, 177, 232, 0.5])
// Green new Color([137, 214, 171, 0.9]),
//close the dialog when the mouse leaves the highlight graphic
map.on("load", function(){
map.graphics.enableMouseEvents();
map.graphics.on("mouse-out", closeDialog);
});
//listen for when the onMouseOver event fires on the countiesGraphicsLayer
//when fired, create a new graphic with the geometry from the event.graphic and add it to the maps graphics layer
featureLayer.on("mouse-over", function(evt){
var t = "<b>${SITENAME}</b><hr><b>Region: </b>${REGION}<br>";
var content = esriLang.substitute(evt.graphic.attributes,t);
var highlightGraphic = new Graphic(evt.graphic.geometry,point);
map.graphics.add(highlightGraphic);
dialog.setContent(content);
domStyle.set(dialog.domNode, "opacity", 0.85);
dijitPopup.open({
popup: dialog,
x: evt.pageX,
y: evt.pageY
});
});
function closeDialog() {
map.graphics.clear();
dijitPopup.close(dialog);
}
// 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])
);
featureLayer.setSelectionSymbol(symbol);
// change cursor to indicate features are click-able
featureLayer.on("mouse-over", function () {
map.setMapCursor("pointer");
});
featureLayer.on("mouse-out", function () {
map.setMapCursor("default");
});
// Add the Feature Layer To Map
map.addLayer(featureLayer);
// geometry service that will be used to perform the buffer
var geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
//when the map is clicked create a buffer around the click point of the specified distance.
map.on("click", function(evt){
//define input buffer parameters
var params = new BufferParameters();
params.geometries = [ evt.mapPoint ];
params.distances = [ 40 ];
params.unit = GeometryService.UNIT_STATUTE_MILE;
geometryService.buffer(params);
});
geometryService.on("buffer-complete", function(result){
map.graphics.clear();
// draw the buffer geometry on the map as a map graphic
var symbol = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_NULL,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,
new Color([105,105,105]),
2
),new Color([255,255,0,0.25])
);
var bufferGeometry = result.geometries[0]
var graphic = new Graphic(bufferGeometry, symbol);
map.graphics.add(graphic);
//Select features within the buffered polygon. To do so we'll create a query to use the buffer graphic
//as the selection geometry.
var query = new Query();
query.geometry = bufferGeometry;
featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results){
var totalPopulation = sumPopulation(results);
var r = "";
r = "<b>The total Census Block population within the buffer is <i>" + totalPopulation + "</i>.</b>";
dom.byId('messages').innerHTML = r;
});
// Query for the records with the given object IDs and populate the grid
featureLayer.queryFeatures(query, function (featureSet) {
updateGrid(featureSet);
});
});
function updateGrid(featureSet) {
var data = arrayUtils.map(featureSet.features, function (entry, i) {
return {
NAME: entry.attributes.SITENAME,
REGION: entry.attributes.REGION
};
});
grid.store.setData(data);
grid.refresh();
}
});
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;
}
#grid {
height: 336px;
width: 100%;
}
.field-name {
width: 100px;
font-size: .80em;
font-weight: normal;
}
.field-magnitude {
width: 50px;
font-size: .80em;
font-weight: normal;
}
.field-deaths {
width: 70px;
font-size: .80em;
font-weight: normal;
}
.field-date {
width: 70px;
font-size: .80em;
font-weight: normal;
}
#grid .dgrid-row-odd {
background: #F2F5F9;
}
#info {
background: #fff;
box-shadow: 0 0 5px #888;
left: 1em;
padding: 0.5em;
position: absolute;
top: 1em;
z-index: 40;
}