topic Re: zoom into the map in ArcGIS JavaScript Maps SDK Questions

zoom into the map

ADITIROY — Mon, 22 Feb 2016 06:07:47 GMT

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');

}

});

Re: zoom into the map

syangL — Mon, 22 Feb 2016 07:22:49 GMT

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!

Re: zoom into the map

ADITIROY — Mon, 22 Feb 2016 07:29:37 GMT

Thank You so much Moya y

Re: zoom into the map

ADITIROY — Mon, 22 Feb 2016 11:17:26 GMT

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();

});

Re: zoom into the map

RobertScheitlin__GISP — Mon, 22 Feb 2016 14:49:24 GMT

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?

Re: zoom into the map

ADITIROY — Tue, 23 Feb 2016 03:40:00 GMT

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