infoWindow stopped Working after we changed JSAPI to version 3.3.

[AkbarEhsan]

Hi,

We have been trying to migrate to Cloud version of ArcGIS maps using Feature Layer.

Campus Map : IUPUI : Indianapolis

We had to change the JSAPI referenced to resolving the Zooming issue.
<script type="text/javascript" src="//serverapi.arcgisonline.com/jsapi/arcgis/?v=3.3"></script>

From

<script type="text/javascript" src="//serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script>

Now all our menu option at the top like Link, Print View, Measure, Label etc do not work.

I am a newbie to ArcGIS who inherited a complex API. So, please let me make sense of how we can make it work. For example, if you click Link on this page, it pops open an infoWindow with a URL to link to here:

Campus Map : IUPUI : Indianapolis

But it does not happen in the modified version with jsapi version 3.3.

Actually Draw, Label and Measure tools also do not work.

Please help.

Thanks,

Akbar

[YueWu1]

Hi Akbar,

Basically you need to use your browser developer tool to debug the issue once you change the api to 3.3.

There are two things you can start with,

1. Check our online documentation What's new in Version 3.3 | Guide | ArcGIS API for JavaScript to make sure if there is new changes in a new version of api.

For example, you want to make sure that Esri JavaScript css file match the verison as well, for example:

        <link rel="stylesheet" type="text/css" media="print" href="https://community.esri.com//serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css" />

        <link rel="stylesheet" type="text/css" media="print" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />

     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />

2. If it is possible, you should change the api version to the latest version 3.16 and you need to migrate the code from legacy mode to AMD module.

As of version 3.4 of the ArcGIS API for JavaScript, all Esri modules are written in the AMD style using define() and dojo/_base/declare. For more, information, you can check this document: Dojo and AMD | Guide | ArcGIS API for JavaScript

Hope this can help.

[AkbarEhsan]

Hi Yue,

I am very new to ArcGIS API. I have changed the CSS to match the JSAPI version. That did not resolve my issues.

But I am not sure what I need to fix the Link, Print View etc at the top.

I think I have changed my API to 3.3. And I do not see any errors in Console.

For example, if you look in the Console in Chrome, you will notice that console.log does generate the content that should have gone in infoWindow. But the infoWindow does not show. Here is the code of my Generate function:

    function generateURL() {

        /*Generate a URL from current map view including map center point, zoom level and visible layers

  The actual size of the map is not recorded because it sizes itself to the browser window */

        // Get bounding box and derive coordinates of center point

  newLoc = buildLink();

        // Generate the info window to report the new url

        var s1 = "<h4 style=\"color: white\">Copy the text below for a link to this view.</h4>";

        var s2 = "<textarea rows='4' cols='45' id='linktxt' name='linktxt'>" + newLoc + "</textarea>";

        var s3 = "<br/><a href=\"" + newLoc + "\"" + "target=\"_blank\" style=\"color: white\">" + "Click here to open this view in new tab" + "</a>";

        var content = s1 + s2 + s3;

        var screenpoint = new esri.geometry.Point(625, 0); //This line sets the screenpoint

  console.log(content, screenpoint);

  dojo.addClass(map.infoWindow.domNode, "myTheme");

        map.infoWindow.setTitle("Link to this view:");

        map.infoWindow.setContent(content);

        map.infoWindow.resize(400, 200);

     map.infoWindow.show(screenpoint); //This line determine where the infoWindow will display

    } //End of generateURL()

Can you, please, give an example?

Thanks,

Akbar

[YueWu1]

I can't access to test with your application with 3.3 version since this application is still on 3.2.

This is definitely a good start to lean how to code and debug for JavaScript API.

You can setup some breakpoints in the code and try to compare before and after upgrade to 3.3, this can help you narrow down the issue or find which line of code is not working.

Debugging JavaScript - Google Chrome

[AkbarEhsan]

Hi Yue,

Are you not able to get to this page:
Campus Map : IUPUI : Indianapolis

I am surprised. It is on port 80 and should be open.

Thanks,

Akbar

[RobertScheitlin__GISP]

Akbar,

The popups seem to be working for me.

[AkbarEhsan]

Those popups do work. The Link button at the top is supposed to pop open a wind with a link to the map. That one is not working in addition to all other top buttons.

Akbar

[YueWu1]

For the Link issue:

I think the issue is because from versions 3.3, if a spatial reference is not provided a defualt spatial reference of 4326 will be assigned. Here is the API reference mentioned about this:Point | API Reference | ArcGIS API for JavaScript

So I checked with your 3.2 version of code, previously in your code, the screenpoint not define the spatialreference and it is nil.

However, when you upgrade to 3.3, since you not define the spatialreference, the api automatically append 4326. Based on your code at line 1114, you assign this Point as a screenPoint location rather than a geometric point, therefore you didn't assign any spatialreference to this point. And you can check the point sapiatalreference is nil in 3.2. However, based on the documentation I mentioned in 3.3, the screenpoint will automatically append 4326. And that's the reason you can't see the link popup window.

var screenpoint = new esri.geometry.Point(625, 0); //This line sets the screenpoint

The reason is because screenpoint x:625, y:0 is not a valid point if the spatialreference set as 4326

You need to re-create a valid point geometry that match with your spatialrefence, or find a way to set the spatialreference value to nil in order to match with your screenPoint location.

For the Print issue:

I am not sure why you change the print service from your school service to Esri's out of box print service. Would you switch back to your original print service and test again. On 3.2 API version, Campus Map : IUPUI : Indianapolis it works fine with your print service. You should debug this issue by switch back to your original print service.

 //url = "https://gis.uits.iu.edu/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20T...";
   url = "https://utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%...";

[AkbarEhsan]

     Hi,

I looked for spatialreference in the code and found that it is 102100. Based on that, I commented out the  following line:

var screenpoint = new esri.geometry.Point(625, 0);

I replaced it with the following:

      var proj = new esri.SpatialReference({

            wkid: 102100

        });

        var screenpoint = new esri.geometry.Point(x, y, proj);

I flipped the code for Printing but it also did not work.

It still is not working. I am sorry to be a bother and really thankful for wanting to help me.

Thanks.

[YueWu1]

That is not a valid point (625,0) in spatialReference 102100.

The issue here is your code logic is using a screenPoint (625,0) on the screen rather than the point location on the map. Previously, (api <3.3) will allow you to have a nil spatial reference. However since we found that from 3.3, it will not allow any nil spatial reference.

In this case, I would say you need to change your code logic and let the popup to show based  on a valid map point rather than a screenlocation point. You can take a look about this sample that shows you how to capture a click on map and use as a valid point. Basic service area | ArcGIS API for JavaScript