ArcGIS Server » Web Applications » Javascript APIs » ArcGIS
 
 

Code Gallery

Sample JavaScript Viewer

This sample viewer was designed to showcase some of the core capabilities of the ArcGIS Platform through a simple, modern, Web2.0 style user interface. This sample may be used with simple modifications to its configuration files or its source code can be used by application developers to further explore and understand some of the best practices and programming patterns of the ArcGIS JavaScript API.
Author SampleViewerTeam
Date Submitted 01-15-2009
Date Last Updated 04-27-2009
Language JavaScript
Product/Version ArcGIS Server 9.3
Views 23060
Downloads 7309
License Type ESRI Attribution and License Agreement
(13 ratings)

Report Inappropriate Content: This Code Gallery is intended for the free exchange of code related to ESRI software products. Let us know if this entry is inappropriate (e.g., a download for a commercial product).

 

Good, but sometimes flaky behavior   posted by lgrahamtx on Jan 15, 2009 5:18 PM

I am surprised it looks and behaves so similarly to the Flex viewer. However, it does seem to be a little flaky in IE 7.0. Be very careful editing the config files as you try to customize it yourself. When I make a few minor changes, it will work find in Firefox, but will freeze after loading the basic interface but before the map services appear. Sometimes, a reset of IIS will fix it but sometimes it will not. Any ideas? I did do the proxy setup and it does work some of the time, just a bit flaky.

Better behavior now...   posted by lgrahamtx on Jan 16, 2009 6:53 AM

after making sure I had all the service packs and patches for IE7. I think it is more a developer issue in getting ones changes realized when debugging, but still a little tricky. Am doing a thorough evaluation on a lot of machines to make sure it will run well on client machines with lots of different states of supported browser as I would really like to switch to this from Flex if possible.

Web Browser Compatability   posted by SampleViewerTeam on Jan 16, 2009 7:42 AM

The developers of the Sample JavaScript Viewer have attempted to make it as cross-browser compatible as possible. However, the limitations of some browsers mean that they are not fully capable of rendering the user interface of the Sample JavaScript Viewer. Due to differences in browser support of both JavaScript and Cascading Style Sheets (CSS) the Sample JavaScript Viewer is best viewed with Firefox 3+ and Safari 3+ web browsers. Internet Explorer 7 is supported, but has some cosmetic limitations. Internet Explorer 6 runs, but is not supported. Internet Explorer 8 has not been tested. This may change when the browser is released. Google Chrome has not been tested. (This may change when Chrome reaches 1.0.) -Sample Viewer Team

IE 7 Limitations   posted by ajpfister06 on Jan 16, 2009 10:19 AM

"Internet Explorer 7 is supported, but has some cosmetic limitations." Please list these limitations as some FF is not supported in some arenas. Thanks!

Meet some troubles in IE7 and IE6 too ...   posted by glavenu on Jan 17, 2009 6:59 AM

The first time I run my application, all is OK. When I close my browser and re-open my application, the UI is displaying well but I can't see any map services, geocode services ... If I remove all the temporary files from my IE settings, the application runs well. This issue doesn't appear in Firefox 3. Maybe I forgot some steps in the deployement process ? You can test it at http://88.191.74.143/JSViewer/index.html Thanks for your help.

Problems with dyamic services   posted by eamonn.doyle on Jan 17, 2009 9:02 AM

Hi There, The Viewer is excellent! However I'be neen unable to get it to work against dynamic (non tiled) services, even though it works perfectly against the tiled version of the same service. Has anyone got any suggestions? Eamonn

How would we make it work with our StatePlane data?   posted by gschiopu on Jan 21, 2009 6:44 AM

I'm trying to make the viewer work with our data. I have chenged the config file and added our map services - both tiled and dynamic. However - i Have also specified the extents - the initial extent and the full extent in both coords - lat and long and have tried state plane as well - I am not able to make our map services to shsow in the mapviewer. Is there anything else in the config file that may need to specigy projection or something? thank you very much Gabi Voicu Collin County GIS

Can not see tiled mapservice   posted by gschiopu on Jan 21, 2009 12:20 PM

actually we can see our dynamic map services just fine, they are Stateplane BUT we can not see the basemap the very same tiled mapservice that we see just fine in other javascript API applications. Thank you very much Gabi Voicu Collin County GIS

Basemap layers must be WGS84   posted by jmfee on Jan 21, 2009 5:31 PM

The JavaScript Viewer only supports WGS84 services so for now you can't use any other projection.

Basemap Layers   posted by eamonn.doyle on Jan 22, 2009 2:07 AM

Hi, We have sucessfully consumed both Basemap and Livemap layers in the local co-ordinate system. However we have seen that the Basemap layer must be tiled in order for either to work. It is not necessary to tile the Livemap layer. Eamonn

IE7, Resize, and Documentation Issues   posted by crusanowski on Jan 22, 2009 2:06 PM

I can confirm that I experience the same behavior on IE7 as described in an earlier comment. It will run the first time, but then I need to clear my temporary Internet files to get it to run again. I believe Google Chrome is version 1.0 and has been for a little while... The JavaScript API has an issue when you resize the map after loading and the position of it changes onscreen, then the mouse does not seem to align properly with the map. I see this occurring in this viewer. Drawing a zoom box where the box is not drawn under the mouse, but offset based upon how the map has shifted. Calling the map resize and reposition helps, but it depends upon if your map is wrapped in containers and stuff like that. Lastly, a few documentation things I found while testing: page 19 - modulePaths needs to change /ss to .widgets page 23 - I needed quotes around http://www.esri.com page 29 - I missed the DemoWidgetStrings.js because I was copying from the code boxes, and this was the only one where the code was not listed out in bold in a box. (Not bad, just inconsistent...)

Tiled and dynamic map services working   posted by gschiopu on Jan 23, 2009 5:57 AM

I have got it to work both tiled and dynamic map services, they're all stateplane. I'm trying now to change the address locator with our own, etc, search layers, etc. For Police Stations it seems that only for a point layer the code works - for a polygon may need additional changes, etc.... Thank you

IE7 and Search function   posted by tim_saldana on Jan 23, 2009 8:13 AM

The search function works for me under Chrome/Firefox, but fails under IE7. Is this expected?

Search Tool   posted by gschiopu on Jan 23, 2009 9:36 AM

How is search tool supposed to work? Is the Search Layer drop down suppoesed to populate the list with dynamic layer from the live maps?....I have tried to enter the Parcels as the seach layer and i do receive the invalid name message - how is it supposed to work? Thank you

Search Tool not working with IE   posted by gschiopu on Jan 23, 2009 9:43 AM

I have just seen the previous message, ok so right the search tool it is not working with IE, most of our users have IE so..... Thank you

Using Projected Data   posted by SampleViewerTeam on Jan 23, 2009 10:26 AM

We would like to clarify that the Sample JavaScript Viewer does support user projected data. Unfortunately in our haste to make this viewer available to the community, we ommited some of this much needed documentation. As we continue to release application improvements, we will be sure to update our documentation with information on how to leverage projected data in the Sample JavaScript Viewer. In the meantime, Jithen Singh has a great blog posting that many of you may find beneficial on this topic: http://mandown.co.nz/development/installing-and-using-your-own-data-with-the-sample-arcgis-server-9-3-javascript-api-viewer/ We apologize for any confussion we may have caused. -The Sample Viewer Team

IE 7 Search support - possible reasoning why it fails   posted by tim_saldana on Jan 26, 2009 10:08 AM

Could it be that it is due to the way IE7 handles JSON? See this link: http://grover.open2space.com/node/207

Same Problems in IE7   posted by u0281276 on Jan 27, 2009 1:50 PM

I'm getting the exact same problem in IE7 that others are. The viewer loads great the first time, but when I hit refresh, I get everything but the map. When I clear the temp files, it loads great again the first time, but is back to no map after one refresh. I would like to know if the Viewer Team is looking into this problem. Thanks!

Indetify   posted by hudynko on Jan 28, 2009 12:35 AM

Hi someone have identify widget? THX for reply :)

IE7 Refresh Fix   posted by matt2521 on Jan 30, 2009 11:17 AM

Line 185 in ..\js\com\esri\solutions\jsviewer\MapManager.js reads: this._layerLoadHander(layer); The letter "l" is missing in "_layerLoadHander" Change so that is reads: this._layerLoadHandler(layer);

So, to be clear, this will not work on IE6?   posted by Keith_Fraley on Feb 03, 2009 5:50 AM

We run IE6 for our corporate internet browser of choice. I can not get this to run on IE6. The map appears but nothing else works. I just want to be clear before I move on to something else. Thanks

GeoRSSWidget   posted by aandrus@ariit.com on Feb 03, 2009 12:49 PM

I noticed that widgets that require the GeoRSSWidget have the title set to "No Title Given" which apparently is a default in WidgetFrame.js. Where should the title be set for GeoRSSWidgets?

Search does not work in IE   posted by shreepadr on Feb 05, 2009 1:45 PM

i noticed that even after changing the IE fixed ,and json changes search does not pick the layer in IE and it workd fine in FF if you found solution to this let me know

Another IE Fix   posted by crusanowski on Feb 06, 2009 7:16 AM

If the extent is set before the base layer is actually loaded, then you receive an error saying x is null. In IE, if a layer has lots of sub-layers, or a slow response from the server, the map onLoad event will fire before the layer is loaded. MapManager.js has a mapLoadHandle that tries to set the extent, and uses a setTimeout to delay this. So, sometimes the layer is loaded and sometimes not. You can increase the timeout, but that just makes things take longer. Instead, the set extent portion can be set to only run when the layer onLoad event is fired. Here is some sample code showing that (with the old code commented out): //IF the Layers are not loaded then this does not work in IE //Sometimes the map is loaded before the it is actually done processing the layer //information (especially if parsing a service with lots of layers). So this is //tying the extent to layer 0's onLoad event, instead. dojo.connect(this.map.layerIds[0], "onLoad", dojo.hitch(this, function(map) { // Ensure that the extent is what we asked for if (this.map.extent !== params.extent) { this.map.setExtent(params.extent); } })); // Ensure that the extent is what we asked for //setTimeout(dojo.hitch(this, function() { // if (this.map.extent !== params.extent) { // this.map.setExtent(params.extent); // } //}), 1000);

If you use your own icons for the widget tutorial and can't see them...   posted by jenn775 on Feb 06, 2009 11:56 AM

I ran through the developer guide instructions for creating a custom widget and used my own icons rather than the ones specified in the tutorial. I found that the path specified on page 22 for config.xml, icon="assets/images/icons/green_beacon.png" (modified with my image name) did not work because it ultimately points to the assets directory in the js/com/esri/jsviewer folder rather than the one in my custom widget folder. To fix, I used icon="../../../jkwidg/widgets/assets/images/icons/green_beacon.png" where jkwidg is the name of my custom widget folder in the js/com folder.

Re: IE7 Refresh Fix   posted by eanderson on Feb 10, 2009 9:33 PM

Don't know if this is specific to W7/IIS7/IE8 but I found simply correcting the script error was not enough; I also had to add the json MIME type as described in the README file. After adding that, the viewer works everytime on startup.

PHP Proxy Problem for Queries   posted by alperdincer on Feb 10, 2009 11:49 PM

I have a problem about the PHP proxy and I explained it in the forum topic below, do you have any solutions for that? Thanks. Alper. http://forums.esri.com/Thread.asp?c=158&f=2396&t=274251

Use forum for discussion   posted by SampleViewerTeam on Feb 23, 2009 2:52 PM

If you have a topic want to be seen and discussed by the whole JavaScript API community, the forum is the good place to start: http://resources.esri.com/arcgisserver/apis/javascript/arcgis/index.cfm?fa=forums. Put in "sampleviewer" or alike into the title so that your topic will receive attention from people who use the sample viewer and the viewer development team.

Sample Viewer: Widget open on startup   posted by mjfraley on Mar 06, 2009 9:35 AM

Is there an easy way to have a widget open by default when the application starts? Thanks, Jo

LiveMaps   posted by geodoc on Mar 09, 2009 8:25 AM

I added 3 MapServices to the liveMap section in den congig File. Now when I start the JSViewer and click on the Live Maps entry, the widget opens, but there are no Layers to turn on or off. Otherwise when I switch to the transparency Slider, all 3 LiveMaps are shown and I can adjust the Layer Transperency. With just one Live Layer everything works fine. Is this a common Problem, that you can have only 1 LiveMap? Or am I doing something wrong?

Legend widget?   posted by jakc on Mar 22, 2009 8:14 PM

Is there a widget that would show the legend for the livemaps that are turned on (vector layers)? Any pointers on how to create this widget, much appreciated.

Issue with Dojo Publish   posted by pwong on Mar 30, 2009 3:18 PM

I was walking through the creatig demo widget in the tutuorial and everything worked (with some changes to documentation errors). When I got to the point where it instructions you to add a point to the map, it does not work. Then I went ahead and made a simple function to call a service map page and read it as JSON and it errors instantly. Both of these examples relies on the this call. dojo.publish("widgetDrawRequestEvent",[params]); or dojo.publish("dataRequestEvent", [params]); Has anyone else been able to get these events to fire successfully?

Using Projected Data - Still Need Documentation   posted by waukegan on Apr 22, 2009 12:30 PM

In response to the January 23rd, 2009 post by the Sample Viewer Team, we went to Jithen Singh's blog post at mandown.co.nz and followed the instructions to no avail. Could the Sample Viewer Team *please* make more documentation available on how to configure their Sample JavaScript Viewer to use projected data - specifically Stateplane NAD83 in the continental US? Thanks.

impossible to open the "Live Maps" Widget   posted by auboiron on May 12, 2009 5:04 AM

I've a problem, when I click on the icon of the "Live Maps" Widget nothing happened. Firebug sends me this message : "_748.getElementsByTagName is not a function" Thanks for your help

Problem Displaying Local Map Service Using the Sample Viewer   posted by mhuff on May 12, 2009 1:17 PM

I downloaded the sample viewer. I have the arcgis server and web server on the same machine. On the development machine I downloaded the project and changed the config file to access my services using the server url tag. I modified the index.html and added the url to my dynamic map service which is also in WGS84 projection. However, I'm unable to view my service. I also tried querytask sample to cross check whether my services are accessible thru proxy, and I was able to view my local map service. I contacted ESRI support and tried to trouble shoot the sample but we were unsuccessful. Can you please provide some insight into what could be wrong? Any suggestions will be appreciated. Thank you, Marivic Huff

What are the changes from the last update?   posted by crusanowski on May 14, 2009 10:52 AM

According the Code Gallery, this was last updated on 04-27-2009. Prior to that there was an update on 03-24-2009. The update in March updated the version of the ArcGIS Server JavaScript API. The update in April does not appear to be any different?!?! I compared the downloads using WinMerge to find differences, and it tells me that everything is identical. Was there really an update?

Can't Find ReadMe.txt   posted by u0281276 on May 22, 2009 3:25 PM

Am I missing something or is the readme.txt file referenced in the documentation .pdf missing?

Never Mind...Found It   posted by u0281276 on May 22, 2009 3:33 PM

My .zip file didn't unzip correctly.

Applying My local mapservice to application   posted by 007maximus on Jun 09, 2009 1:10 PM

Hi I tried making some changes to the config.xml file so I can view my map and nothing came up. Do I have to make changes somwher where else in the application beside the Config.xml file?

Can google maps be used with this viewer?   posted by Bradberry on Jun 09, 2009 4:15 PM

Is there a way to reference the google maps with the config.xml?

Javascript API version 1.4   posted by jgeisen on Jun 18, 2009 7:25 AM

Does this work with version 1.4 of the Javascript API?

Other AGOL Basemaps?   posted by dchiang on Jun 24, 2009 1:12 PM

I tried adding just one more basemap, the topo map on ESRI's own server - http://server.arcgisonline.com/ArcGIS/rest/services/NGS_Topo_US_2D/MapServer - into the config.xml file. The new layer showed up on the Maps menu item but when clicked on it the map turns to a gray blank. Added one map service in WGS84 (wkid=4326) running on my dev machine to config.xml Livemaps section, and it did not show up in the Livemaps widget when I open it. Are there other areas that need config or additional instructions I'm missing?

Changing to version 1.4   posted by crusanowski on Jul 20, 2009 1:54 PM

I was able to get the base Sample JavaScript Viewer working by adding dojo.require("dijit._Contained"); to the js\com\esri\solutions\jsviewer\WidgetFrame.js file. We still get some errors with some custom widgets, but with this change at least the default viewer works.

One more Change for 1.4 API to get IE to work   posted by crusanowski on Jul 21, 2009 12:49 PM

I almost forgot to test with IE also... IE does not always run the scripts in the right order... IE: DOJO may run a function before the ESRI API has finished initializing. In this case the onResizeRequest: function(/*Object*/ box) of MapManager.js needed a try... except added to it so that the function will not present an error if it is run before everything is initialized.

buffer   posted by zaheer73 on Jul 24, 2009 6:01 AM

Does anyone know how to add a dynamic buffer inside this app

Steps to upgrade to version 1.4   posted by daudihus on Sep 01, 2009 10:13 AM

The instructions here are based on previous posts as well as my own findings Changes to index.html a) Change three occurrences of 1.2 to 1.4 b) enclose the onPageResizeHandler function inside a try..catch block Changes to WidgetFrame.js c) There is a typo in the postCreate function (approx line 83) Change: this.titleNode = dojo.query("#.widgetTitle", this.domNode)[0]; To: this.titleNode = dojo.query(".widgetTitle", this.domNode)[0]; by removing the #. d) Insert the following statement near the top of the file dojo.require("dijit._Contained"); Changes to _Widget.js e) Insert the following statement near the top of the file dojo.require("dijit._Contained"); Additionally, f) add the .json MIME type to your web server (see Readme.txt for details) Hope I didn't forget anything. DH

Print or export to pdf support??   posted by araposta on Sep 09, 2009 5:37 AM

Can anyone help me on how to put printing or exporting to pdf option? can i use the map2pdf sample; How can i make ti work; I am very new to programming

Widget Panel Button issues in Firefox 3.5.3   posted by Andrew_Blakey on Sep 20, 2009 2:49 PM

There seem to be issues with the buttons along the top of a widget panel in the latest Firefox release. The buttons won't appear in Firefox but do appear in Safari, leading me to believe that it is a new issue since Firefox was last updated to 3.5.3.

MapManager : syntax error   posted by janyv on Oct 21, 2009 1:29 AM

Hi all, In MapManager.js (approx. lines 183 and following, there is a syntax error : if (layer.loaded) { // IE caching behavior, loaded is true right away. this._layerLoadHander(layer); } else { dojo.connect(layer, "onLoad", dojo.hitch(this,"_layerLoadHandler", layer)); } --> this._layerLoadHander has to be replaced by this._layerLoadHandler in order to effectively call the function. Thanks, yvan

updates?   posted by masmith on Nov 02, 2009 10:26 AM

Any plans to release an updated sample viewer for JSAPI 1.5?

Widget display issues   posted by Mtclimber03 on Nov 03, 2009 1:16 PM

I'm building a web app with this sample and when I preview my index.html in Aptana Web the widgets appear correctly, but when I open this in Firefox the widgets are missing titles, icons, and some functions? Anyone know how to correct this?

it is working well with IE8   posted by birdface on Nov 24, 2009 12:14 AM

Hi every one, I was able to load the application in IE8 and js 1.5 I fix the staff already mentioned in the other posts and forum . With one last change witch prevented the SERCH widget from working : In the SearchWidget.json there is an extra comma on line 25 Instead of linkField: "", add zoomScale: 10000. So it would be linkField: "", zoomScale: 10000.

RE: Widget Panel Button issues in Firefox 3.5.3   posted by jerry_ on Nov 30, 2009 8:26 AM

Replace the line 83 in WidgetFrame.js "this.titleNode = dojo.query("#.widgetTitle", this.domNode)[0];" with "this.titleNode = dojo.query(".widgetTitle", this.domNode)[0];"

Updates   posted by abooker on Dec 11, 2009 12:38 PM

Does anyone know when we can expect updates to the Sample viewer? Also, is there any chance that the sample viewer will be better supported for Internet Explorer 8? Anyways, great job to ESRI SampleViewerTeam.