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);
});
}
Solved! Go to Solution.
var extent = null;
var extentWidth = 1000;
if (features[0].geometry.type.toUpperCase() === "POINT"){
extent = new Extent(features[0].geometry.x - extentWidth, features[0].geometry.y - extentWidth, features[0].geometry.x + extentWidth, features[0].geometry.y + extentWidth, features[0].geometry.spatialReference)
}
else{
extent = features[0].geometry.getExtent().expand(2.0);
}
Point does not support getExtent() method, in the case of point you'll have to build your own envelope from the point coordinates.
var extent = null;
var extentWidth = 1000;
if (features[0].geometry.type.toUpperCase() === "POINT"){
extent = new Extent(features[0].geometry.x - extentWidth, features[0].geometry.y - extentWidth, features[0].geometry.x + extentWidth, features[0].geometry.y + extentWidth, features[0].geometry.spatialReference)
}
else{
extent = features[0].geometry.getExtent().expand(2.0);
}
Thanks a ton......what would I do for a LINE?
Jay,
A line is already covered in Riyas's code. It is only the point that does not have an extent and that is why he has the if point condition.
What part did you add this to. I have not figured it out yet.
jay kapalczynski What line of the original template did you get this to work?
EDIT:
I found this