- Home
- :
- All Communities
- :
- Developers
- :
- JavaScript Maps SDK
- :
- JavaScript Maps SDK Questions
- :
- Re: Zoom not working for 2nd set of query results,...
- 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 not working for 2nd set of query results, proxy working only once?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I'm modifying some Javascript 3.x code written by previous staff member. I had to "fix" a cross-domain and proxy issue to get around the token timing out every year. To do that, I adding a ProxyRule that points to our common proxy on another machine.
Initiall, this all seems to be working as expected. I user fills out the query boxes and selects "Find Places", which returns a table of attributes. The user can than click on different items in the table and the map will zoom. The click-zoom can be done multiple times and it works.
However, I noticed that although the "click to zoom" works for the first set of results, if the user performs another query, the table gets populated correctly but "click to zoom" will draw but not zoom. I know it is drawing since I can zoom out and see the polygon change as I select different items in the table.
The "placename" query which returns a table of items to click, I believe, is c# code (that I would rather not touch,) and the query seems to be working just fine. My new esri.layers.FeatureLayer uses the MODE_SNAPSHOT. I have tried the other options thinking ONDEMAND might work better, but that seems to make it worse (i.e. the zoom after the 1st query is hit and miss).
I was developing in Firefox developer tools, but that provided no addition help I could interpret. So I took a look at the developer tools in Chrome, I'm starting to thing that my proxy is working with my secure service the first time, but not with the second placename query OR I am missing a line to retrieve a new set of data from the service. The error is
dojo.io.script error
k {message: "Request canceled", response: Object, log: undefined, stack: "Error: Request canceled
at new k (https://js.a…is.com/3.7/js/esri/layers/SnapshotMode.js:20:263)"}
Uncaught TypeError: Cannot read property '_jsonpCallback' of undefined
proxy.ashx?https://<my Service URL>/MapServer/0/query?f=js…:1 Uncaught TypeError: Cannot read property '_jsonpCallback' of undefined
at proxy.ashx?https://<my Service URL>/MapServer/0/query?f=js…:1
Services are from ArcGIS Server 10.2.1 (will eventually to 10.5.1). This is an internal only site so can not provide a sample.
Edit: I will add that am seeing an error in Firefox when it fails
TypeError: dojo.io.script.jsonp_dojoIoScript_UCU_Codes00 is undefined
Any help would be appreciated. Thanks
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
<!--The viewport meta tag is used to improve the presentation and behavior
of the samples on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Internal UCU Mapper</title>
<link rel="stylesheet" href="//js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="//js.arcgis.com/3.7/js/esri/css/esri.css">
<style>
html,body { height:100%; width:100%; margin:0; padding:0; }
body {
background:#dfe5d7;
font-family:"Georgia,Verdana";
}
span{ font-weight:bold; color:#808080; text-align:left; }
.inset{
color: #d7decf;
text-shadow: 0px 2px 2px #808080;
font-weight:bold;
}
#header {
background: #fcfff4; /* old browsers */
background: -moz-linear-gradient(left, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); /* firefox */
/* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=1 ); */ /* ie */
border:solid 1px #398235;
height:80px;
padding:0;
margin:0;
}
#map {
position:absolute;
padding: 0;
margin: 0;
height: 100%;
left:310px;
}
.claro .dijitContentPane {
padding: 0;
}
.maptitle{
padding-left:15px;
font-size:32px;
}
.subtitle {
font-size:14px;
padding-left:40px;
color:#462D44;
}
#leftpane {
position:absolute;
border:none;
background:none;
color:#462D44;
font-size:8pt;
height:100px;
padding: 15px;
text-align:left;
width:300px;
margin:0;
}
</style>
<script src="//js.arcgis.com/3.7/"></script>
<script>
var map, featureLayer;
require([
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"esri/map",
"esri/layers/FeatureLayer",
"dijit/form/FilteringSelect",
"dijit/form/ComboBox",
"dojox/grid/DataGrid",
"dojo/data/ItemFileReadStore",
"esri/tasks/QueryTask",
"esri/tasks/query",
"esri/dijit/Scalebar",
"esri/urlUtils",
"dijit/registry",
"dojo/dom",
"dojo/on",
"dojo/parser",
"dojo/domReady!"
],
function(
BorderContainer,
ContentPane,
Map,
FeatureLayer,
FilteringSelect,
ComboBox,
DataGrid,
ItemFileReadStore,
QueryTask,
query,
Scalebar,
urlUtils,
registry,
dom,
on,
parser
)
{
parser.parse();
// function init() { // using init() seems to cause issues with IE
// on(dom.byId("grid"), "onRowClick", onRowClickHandler); //this had to be done in the function itself
on(dom.byId("btnexecute"), "click", executeTask);
var initExtent = new esri.geometry.Extent({"xmin":-1025000,"ymin":520000,"xmax":1400000,"ymax":2400000,"spatialReference":{"wkid":3338}});
map = new esri.Map("map",{extent:initExtent});
dojo.connect(window, 'resize', map, map.resize);
//Add Scalebar
var scalebar = new esri.dijit.Scalebar({
map: map,
scalebarUnit: "english",
attachTo: "bottom-left"
});
// Proxy and CORS set for secure services;
// ... zoom working on 1st query set only....hmmm
// ......my proxy stuff
urlUtils.addProxyRule({ urlPrefix: "https://<Service URL/webadaptor>", proxyUrl: "https://<Service URL and path to proxy>.ashx"});
esriConfig.defaults.io.proxyUrl = "https://<Service URL and path to proxy>.ashx";
esriConfig.defaults.io.alwaysUseProxy = false;
esriConfig.defaults.io.corsDetection = false;
var protocol = window.location.protocol;
//Add adfg USAtopoArcOnline in alaska Albers as basemap
var basemap = new esri.layers.ArcGISTiledMapServiceLayer("<myBaseMapURL>/MapServer");
map.addLayer(basemap);
//Add subunits
var subs = new esri.layers.ArcGISDynamicMapServiceLayer("<mySubunitsURL>/MapServer");
map.addLayer(subs);
//Add ucu boundaries, will not show until zoomed in a bit
var ucu = new esri.layers.ArcGISDynamicMapServiceLayer(protocol + "<mySecureServiceURL>/MapServer");
map.addLayer(ucu);
//Add ucu label layer that is used for queries and zooming
//MODE_SNAPSHOT
var ucu_label = new esri.layers.FeatureLayer(protocol + "<mySecureLServiceLabelsURL>/MapServer/0", {
mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"]
});
ucu_label.setMinScale(0);
var theucu = 'XXXXX';
var layerdef = "ucu="+"'"+theucu+"'";
ucu_label.setDefinitionExpression(layerdef);
//since the label polygons are hollow we need to display selected polygon
var symbol2 = new esri.symbol.SimpleFillSymbol(
esri.symbol.SimpleFillSymbol.STYLE_SOLID,
new esri.symbol.SimpleLineSymbol(
esri.symbol.SimpleLineSymbol.STYLE_SOLID,
new dojo.Color([0, 0, 0, .7]), 3
),
new dojo.Color([125, 125, 125, 0.35])
);
ucu_label.setRenderer(new esri.renderer.SimpleRenderer(symbol2));
//one way of zooming to layer
//dojo.connect(ucu_label, "onUpdateEnd", ucu_zoom);
map.addLayer(ucu_label);
//one way of zooming to layer
dojo.connect(ucu_label, "onUpdateEnd", function () {
var zoomExtent = esri.graphicsExtent(ucu_label.graphics);
map.setExtent(zoomExtent.expand(1.25),true);
map.refresh();
map.setExtent(initExtent,true);
}); // now the zoom won't happen until map is updated
function onRowClickHandler(evt){
// alert("I am an alert box!");
var clickeducu = grid.getItem(evt.rowIndex).ucu;
layerdef = "ucu="+"'"+clickeducu+"'";
ucu_label.setDefinitionExpression(layerdef);
}
function executeTask(){
if (mySelect.value.length !=3 ){
return;
}
if (mySelect.value.length == 3){
var querywhere = "gmu="+"'"+mySelect.value+"'";
}
if (mySelect.value.length ==3 && placetxt.value.length>0){
querywhere = "gmu="+"'"+mySelect.value+"'"+" and place like"+"'%"+placetxt.value+"%'";
}
// var querywhere = "gmu="+"'"+mySelect.value+"'"+" and regyear=2000";
var queryTask = new esri.tasks.QueryTask("/SpatialService/PlacenameService.ashx");
var query = new esri.tasks.Query();
query.returnGeometry=false;
query.outFields = ["placename_id","ucu","place", "gmu"];
query.where = querywhere;
// query.where = "gmu='01C' and place like '%creek%'";
dojo.connect(queryTask,"onComplete",function(featureSet){
//build an array of attributes
var items = dojo.map(featureSet.features,function(feature){
return feature.attributes;
});
var data = {identifier:"placename_id", items:items};
store = new dojo.data.ItemFileReadStore({data:data});
grid.setStore(store);
grid.setSortIndex(0,"true"); //sort on the place name
grid.on("click", onRowClickHandler);
// on(dom.byId("grid"), "onRowClick", onRowClickHandler);
});
queryTask.execute(query);
}
});
</script>
</head>
<body class="claro">
<div id="mainWindow"
data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="design:'headline', gutters:false"
style="width: 100%; height: 100%; margin: 0;">
<div id="header"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'top'">
<span class="inset maptitle">Alaska Fish and Game UCU Lookup</span>
<br>
<span class="subtitle">View the placenames associated with UCU's and view the UCU on a map</span>
</div>
<div id="leftpane"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'left'" >
<div style="height:24px;padding-bottom 4px;text-align:left;">
First select a GMU (required).
<br>
<CFOUTPUT>
<select id="mySelect" data-dojo-type="dijit.form.ComboBox" style="width:200px;font-size:16p;"
value="Select a GMU" >
<CFLOOP query="GMUS">
<OPTION VALUE="#gmus.GMU#">#gmus.GMU#</option>
</CFLOOP>
</cfoutput>
</select>
</div>
<br>
Then type a place name string or leave blank
<br>
<input type="text" id="placetxt" value="" ></input>
<br>
Next hit the "Find places" button
<br>
<!--- <input id="btnexecute" type="button" value="Find places" onclick="executeTask()"></input> --->
<button id="btnexecute" data-dojo-type="dijit/form/Button" type="button">Find places</button>
<br>
<br>
Double click on a results row to view UCU on the map
<br>
Note: not all UCU's' are mappable, for example 0000 minors
<br>
<br>
<table dojoType="dojox.grid.DataGrid" jsid="grid" id="grid" rowSelector="20px" height="100%" width="200px">
<thead>
<tr>
<th field="place" width="140px">Place</th>
<th field="ucu" width="80px">UCU</th>
</tr>
</thead>
</table>
</div>
<div id="map"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'center'" style="overflow:hidden;">
</div>
</div>
</body>
</html>
BTW, not that this should matter, but this still does use some ColdFusion code.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Rebecca,
This code logic seems to be pretty suspect:
//one way of zooming to layer
dojo.connect(ucu_label, "onUpdateEnd", function () {
var zoomExtent = esri.graphicsExtent(ucu_label.graphics);
map.setExtent(zoomExtent.expand(1.25),true);
map.refresh();
map.setExtent(initExtent,true);
}); // now the zoom won't happen until map is updatedBasically you are saying every time the ucu_label layer has finished drawing you zoom to the layers graphics extent, refresh, and then you try and set the extent back to the initial extent... The one setExtent is canceling the second, and why is this being called every time the layer finishes drawing?..
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Thanks for the response Robert. I had noticed that right after posting and played around with commenting out for line 6 and line 5/6, but no change in behavior. There are some comments in the code that makes me think he tried a different way of getting the initial site to work, and this seems to make it work...but commenting it out doesn't seem to hurt either. I am not sure if my issue is something new because of the proxy, of if it was always that way. It is not a page I use often (but other staff do).
I did a few other searched and found ArcGIS Javascript API - Proxy Page which got me to look at my proxy.log. But I'm also going to try the suggested addition to the web.config file for the proxy. Not sure if that will help, but can't hurt to try.
I also came across another thread https://community.esri.com/thread/96899 that mentioned adding a javascript timeout value of 10ms when dealing with a refresh(). I know I have to do this occasionally for Python scripts since it returns before the OS has had time to catch up. But I haven't quite figure out how to add a timeout, and where I would add a time out. As you know, my JS skills are a very small fraction compared to yours.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Rebecca,
So before you added the proxy you did not have this issue, but you have a token timeout once a year?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I'm not sure if there was an issue before or not. As mentioned, I don't use it much, and I just called the person that first reported the issue caused by the proxy token timeout, and she doesn't remember either.
So, as a band-aid (since it will draw the graphic), I've change the dojo.connect around a little to set the zoom to the initial/full extent so at least the user will see the graphic draw and can manually zoom. Not ideal, but better than nothing. They can also reload the whole page and get it to work as it is meant to, with the first query anyway.
dojo.connect(ucu_label, "onUpdateEnd", function () {
map.setExtent(initExtent,true);
var zoomExtent = esri.graphicsExtent(ucu_label.graphics);
map.setExtent(zoomExtent.expand(1.25),true);
map.refresh();
//map.setExtent(initExtent,true);
}); I still think I am just missing something in the code to get lines 3/4 to update the extent correctly after the 2nd query. My thought is that after the initial query, the next query maybe is filtering what is return for the ucu_label.graphics based on the extent of the first query???? I have no idea if that would make sense or not, and there is the blackbox of the
var queryTask = new esri.tasks.QueryTask("/SpatialService/PlacenameService.ashx");
which refers to a compiled .cs file. BTW - the Placenames is an external table which is basically a a many to one (UCU) polygon. Probably should have mentioned that, but since the Placenames query seems to work just fine, and the user only clicks on one of the returned records for it to zoom to the UCU, I don't think that would be the issue. (sorry that I left that that out, if it might make a difference).
Although I would love to figure this out, and I'm learning a lot messing with this, it's getting to the point that they may just have to live with it (Spent most the day on it). Getting the token to not time out each year was really the priority since (remembering and) getting the tokens setup for this server every year is a headache. Having it managed on our side (GIS) vs. on a different groups (non-GIS) server makes it easier in the long run.
I'll leave this open until Monday (off Friday) and may try tech support if no resolved before then. But after that I'll probably just give it up. Just a pain if they need it for more than one query in a session.
