I am using this example...
DataGrid with zoom button | ArcGIS API for JavaScript
I replaced the reference of the polygon Map Service with my own and it works FINE.
I then try it with a Point Feature and it breaks...
Is there something I am doing wrong for the Point feature...I replaced the SELECTION symbol for that of a point
Looking to modify this for both a point and line feature....
| var StatesGrid = declare([Grid, Selection]); |
var columns = [{
label: "", //wasn't able to inject an HTML <div> with image here
field: "OBJECTID",
formatter: makeZoomButton
},{
label: "unknown",
field: "SITENAME"
}];
//restrict sorting to the state name field
for (var i = 0; i < columns.length; i++) {
if (i == 1) {
columns.sortable = true;
} else {
columns.sortable = false;
}
}
grid = new StatesGrid({
bufferRows: Infinity,
columns: columns
}, "grid");
//add the states demographic data
var statesLayer = new FeatureLayer("https://fwisweb1.dgif.virginia.gov/arcgis/rest/services/Public/DGIF_Public/FeatureServer/1", {
mode: FeatureLayer.MODE_SELECTION,
outFields: ["OBJECTID", "SITENAME"]
});
//define a selection symbol
var GridSelectsymbol = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_CIRCLE,
12,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([0, 0, 255, 0.5]),
6
),
new Color([0, 0, 255])
);
| statesLayer.setSelectionSymbol(GridSelectsymbol); |
statesLayer.on("load", function(evt) {
var query = new Query();
query.where = "1=1";
evt.layer.queryFeatures(query, function(featureSet) {
var items = array.map(featureSet.features, function(feature) {
return feature.attributes;
});
//idProperty must be set manually if value is something other than 'id'
var memStore1 = new Memory({
data: items,
idProperty: "OBJECTID"
});
window.grid.set("store", memStore1);
window.grid.set("sort", "SITENAME");
grid.on(".field-OBJECTID:click", function(e) {
//retrieve the ObjectId when someone clicks on the magnifying glass
if (e.target.alt) {
zoomRow(e.target.alt);
}
});
app.map.addLayers([statesLayer]);
| | function makeZoomButton(id) { |
//set the feature 'id' as the alt value for the image so that it can be used to query below
var zBtn = "<div data-dojo-type='dijit/form/Button'><img src='images/ArrowUp.png' alt='" + id + "'";
zBtn = zBtn + " width='18' height='18'></div>";
return zBtn;
}
function zoomRow(id) {
statesLayer.clearSelection();
var query1 = new Query();
query1.objectIds = [id];
statesLayer.selectFeatures(query1, FeatureLayer.SELECTION_NEW, function(features) {
//zoom to the selected feature
var stateExtent = features[0].geometry.getExtent().expand(2.0);
app.map.setExtent(stateExtent);
});
}
