- Home
- :
- All Communities
- :
- Developers
- :
- JavaScript Maps SDK
- :
- JavaScript Maps SDK Questions
- :
- Re: zoom into the map
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Mute
- Printer Friendly Page
zoom into the map
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
Hello ,
I am getting a problem in plotting the graphics and zoom into the feature on the map. Here below is my code. Please help. The data is getting populated into the grid and after that it is not zooming into the map.
define([
"dojo/_base/declare",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
'dijit/_WidgetsInTemplateMixin',
'dojo/_base/lang',
"esri/tasks/query",
"dojo/text!/Widgets/SearchButton/SearchButton.html",
"xstyle/css!/Widgets/SearchButton/css/StyleSheet.css",
"esri/Color",
"esri/tasks/locator",
"esri/InfoTemplate",
"esri/symbols/Font",
"esri/symbols/TextSymbol",
"dojo/_base/array",
"dojo/number",
"dojo/parser",
"esri/tasks/FindTask",
"esri/tasks/FindParameters",
"dojo/_base/connect",
"dojox/grid/DataGrid",
"dojo/data/ItemFileReadStore",
"esri/graphic",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleMarkerSymbol",
"dojo/on",
"dijit/form/Button",
"esri/geometry/Point",
'require',
"dojox/widget/Standby",
"dojo/_base/window",
"dojo/window",
"dojo/dom",
"dojo/dom-attr",
"dijit/registry",
"dijit/form/NumberTextBox",
"dijit/Dialog",
"esri/tasks/geometry",
"dojo/domReady!"
], function (declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, lang, query, template, widgetCss,
Color, locator, InfoTemplate, Font, TextSymbol, array, number, parser, FindTask, FindParameters, connect, DataGrid, ItemFileReadStore,
Graphic, SimpleLineSymbol, SimpleFillSymbol, SimpleMarkerSymbol, on, Button, Point, require,
Standby, win, window, dom, domAttr, registry, NumberTextBox, Dialog,
Geometry) {
var imageUrl = require.toUrl("./images");
var searchDialogbox;
var center, zoom;
var grid, store;
return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
// widgetsInTemplate: true,
templateString: template,
map: null,
Map: null,
imageUrl: imageUrl,
findParams: null,
searchDialogbox: null,
findtask: null,
searchText: null,
spatialReference: null,
featureUrl:null,
map: this.map,
//doFind:null,
postCreate: function () {
findtask1: function () {
this.findtask = new FindTask("http://");
this.findParams = new FindParameters();
this.findParams.returnGeometry = true;
this.findParams.layerIds = [0];
this.findParams.searchFields = ["OBJECTID","FEEDER_NAME"];
this.findParams.outSpatialReference = this.map.spatialReference;
console.log("find sr: ", this.findParams.outSpatialReference);
},
doFind: function () {
//Set the search text to the value in the box
this.findParams.searchText = this.ownerName.value;
this.findtask.execute(this.findParams, lang.hitch(this, this.showResults));
},
showResults: function (results) {
console.log(results);
this.map.graphics.clear();
var symbol = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([98, 194, 204]), 2),
new Color([98, 194, 204, 0.5])
);
//create array of attributes
var items = array.map(results, function (result) {
var graphic = result.feature;
console.log(graphic);
graphic.setSymbol(symbol);
this.map.graphics.add(graphic);
return result.feature.attributes;
});
console.log("alertqb");
var data = {
identifier: "OBJECTID", //This field needs to have unique values
label: "OBJECTID", //Name field for display. Not pertinent to a grid but may be used elsewhere.
items: items
};
//Create data store and bind to grid.
store = new ItemFileReadStore({
data: data
});
var grid = registry.byId("grid");
grid.setStore(store);
grid.on("rowclick", lang.hitch(this, this.onRowClickHandler));
console.log("rowclick");
//Zoom back to the initial map extent
this.map.centerAndZoom(center, zoom);
},
onRowClickHandler: function (evt) {
console.log("1");
var clicked = evt.grid.getItem(evt.rowIndex).OBJECTID;
console.log('clicked');
var selected = array.filter(this.map.graphics.graphics, function (graphic) {
return ((graphic.attributes) && graphic.attributes.OBJECTID === clicked);
});
console.log('clicked20');
if (selected.length) {
this.map.setExtent(selected[0].geometry.getExtent(), true);
console.log('clicked25');
}
},
});
});
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
ADITI,
It seems that you didn't assign a value to center and the zoom.
this.map.centerAndZoom(center, zoom);
more information about centerAndZoom :Map | API Reference | ArcGIS API for JavaScript
In your cases ,I prefer to use centerAt:Map | API Reference | ArcGIS API for JavaScript or setextent: Map | API Reference | ArcGIS API for JavaScript
This is a piece of code I had use in the same situation。
// graphic might be your result.feature.
function centerGraphic(graphic){
switch (graphic.geometry.type) {
case "point":
map.centerAndZoom(graphic.geometry,map.getLevel()+1);
break;
case "polyline":
var line = graphic.geometry.getExtent();
map.setExtent(line.expand(1.6));
break;
case "polygon":
var ext = graphic.geometry.getExtent();
map.setExtent(ext.expand(1.6));
break;
}
Good day!
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
Thank You so much Moya y
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
Dear moya Y,
I integrated the code but it is still not working.
define([
"dojo/_base/declare",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
'dijit/_WidgetsInTemplateMixin',
'dojo/_base/lang',
"esri/tasks/query",
"dojo/text!/Widgets/SearchButton/SearchButton.html",
"xstyle/css!/Widgets/SearchButton/css/StyleSheet.css",
"esri/Color",
"esri/tasks/locator",
"esri/InfoTemplate",
"esri/symbols/Font",
"esri/symbols/TextSymbol",
"dojo/_base/array",
"dojo/number",
"dojo/parser",
"esri/tasks/FindTask",
"esri/tasks/FindParameters",
"dojo/_base/connect",
"dojox/grid/DataGrid",
"dojo/data/ItemFileReadStore",
"esri/graphic",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleMarkerSymbol",
"dojo/on",
"dijit/form/Button",
"esri/geometry/Point",
'require',
"dojox/widget/Standby",
"dojo/_base/window",
"dojo/window",
"dojo/dom",
"dojo/dom-attr",
"dijit/registry",
"dijit/form/NumberTextBox",
"dijit/Dialog",
"esri/tasks/geometry",
"dojo/domReady!"
], function (declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, lang, query, template, widgetCss,
Color, locator, InfoTemplate, Font, TextSymbol, array, number, parser, FindTask, FindParameters, connect, DataGrid, ItemFileReadStore,
Graphic, SimpleLineSymbol, SimpleFillSymbol, SimpleMarkerSymbol, on, Button, Point, require,
Standby, win, window, dom, domAttr, registry, NumberTextBox, Dialog,
Geometry) {
var imageUrl = require.toUrl("./images");
var searchDialogbox;
var center, zoom;
var grid, store;
return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
// widgetsInTemplate: true,
templateString: template,
map: null,
Map: null,
imageUrl: imageUrl,
findParams: null,
searchDialogbox: null,
findtask: null,
searchText: null,
spatialReference: null,
featureUrl:null,
map: this.map,
//doFind:null,
postCreate: function () {
dojo.query("#lnkSearchByButton").connect("onclick", lang.hitch(this, this.Searchbutton));
dojo.query("#Searchbtn").connect("onclick", lang.hitch(this, this.doFind));
searchDialogbox = new Dialog({
id: "searchDialogboxSearch",
title: 'Search On ButtonClick',
loadingMessage: 'Loading...',
}, 'divSearchbutton');
this.onRowClickHandler();
},
findtask1: function () {
this.findtask = new FindTask("http://");
this.findParams = new FindParameters();
this.findParams.returnGeometry = true;
this.findParams.layerIds = [0];
this.findParams.searchFields = ["OBJECTID","FEEDER_NAME"];
this.findParams.outSpatialReference = this.map.spatialReference;
console.log("find sr: ", this.findParams.outSpatialReference);
},
doFind: function () {
//Set the search text to the value in the box
this.findParams.searchText = this.ownerName.value;
this.findtask.execute(this.findParams, lang.hitch(this, this.showResults));
},
showResults: function (results) {
console.log(results);
this.map.graphics.clear();
var symbol = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([98, 194, 204]), 2),
new Color([98, 194, 204, 0.5])
);
//create array of attributes
var items = array.map(results, function (result) {
var graphic = result.feature;
console.log(graphic);
graphic.setSymbol(symbol);
this.map.graphics.add(graphic);
return result.feature.attributes;
});
console.log("alertqb");
var data = {
identifier: "OBJECTID", //This field needs to have unique values
label: "OBJECTID", //Name field for display. Not pertinent to a grid but may be used elsewhere.
items: items
};
//Create data store and bind to grid.
store = new ItemFileReadStore({
data: data
});
var grid = registry.byId("grid");
grid.setStore(store);
grid.on("rowclick", lang.hitch(this, this.centergraphic));
console.log("rowclick");
//Zoom back to the initial map extent
this.map.centerAndZoom(center, zoom);
},
centergraphic: function (graphic)
{
switch (this.graphic.geometry.type) {
case "point":
this.map.centerAndZoom(this.graphic.geometry, this.map.getLevel() + 1);
break;
case "polyline":
var line = this.graphic.geometry.getExtent();
this.map.setExtent(line.expand(1.6));
break;
case "polygon":
var ext = this.graphic.geometry.getExtent();
this.map.setExtent(ext.expand(1.6));
break;
}
},
//Open the dialog box
Searchbutton: function () {
searchDialogbox.show();
this.findtask1();
},
});
});
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
Aditi,
So are you passing in the "center" and "zoom" var values when you initialize this widget?
Do you get into your rowclick event handler?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
Robert,
Thank you. Yes, I getting into the rowclick event handler and i have not passed any values for zoom and center.The result is getting plotted into the grid but is not zooming into the feature in the map.
Aditi
