Installing And Using Your Own Data With The Sample ArcGIS Server 9.3 JavaScript API Viewer

This week I have been doing some research and development around some of the new sample viewers that ESRI has build for ArcGIS Server 9.3 users. Sample viewers exist for the different API’s and is freely available for users to download and extend.

Today I thought I would download and have a look at the Sample ArcGIS 9.3 JavaScript API Viewer.

This viewer can be found and downloaded from the Code Gallery on the ArcGIS Server Resource Centre here: http://resources.esri.com/arcgisserver/… Included in the .zip is a developers guide and the folder containing all the required files. The readme.txt file found in the folder contains instructions on how to go about installing the Sample ArcGIS 9.3 JavaScript API Viewer. The instructions are missing steps on using your own data within the viewer. So here’s how I got things working.

Extract all the contents of the folder within the .zip to you web server directory. In my case: C:\Inetpub\Wwwroot\SampleViewers\jsapi

Make this directory a .NET application and add the json MIME type into IIS. Instructions for this can be found in the readme.txt.

Load the application you just installed in your browser and you should see something like below:

Ok now lets configure this and add some of our own data. Some information about the data I am using:

Spatial Reference ID: 2193
Spatial Reference Name: NZGD_2000_New_Zealand_Transverse_Mercator
Type: Tiled

If you will be requesting data from another server you need to add the URL of that server to the proxy.config. This will allow the application to connect to the server and gain access to the data. In my case the web server is my machine and I will be connecting to one of our servers for accessing data.

Open up the proxy.config from your installation location and add a new line to the proxy.config as below:

<serverUrl url="http://demos.eagelgis.co.nz/arcgis/rest/services" matchAll="true"></serverUrl>

Save the file and your proxy.config should look like this:

 

We now need to configure basemaps and livemaps. Open the config.xml. I commented out the existing mapservices and add my own one as I didn’t need the others. I’ll be using one of the existing icons.

<mapservice label="Satellite Map" type="tiled" visible="true" alpha="1" icon="assets/images/icons/i_shuttle.png">
http://demos.eaglegis.co.nz/ArcGIS/rest/services/Geographx/newzealandcached-pooled/MapServer</mapservice>

Since this my only map service, I have set the visibility so that basemap will be visible on load. Also make sure you set the type of map service you are using.

The next important thing is to set the inital extent and full extent. You can get these values from your REST interface. In my case if I browse to: http://demos.eaglegis.co.nz/arcgis/… and scroll down the page I can see these values:

Copy the values from the initial extent and full extent and modify the line:

<map initialExtent="528467.19681447 4731217.54305386 2623138.58078645 6195235.17701277" fullExtent="1032167.078195 4644266.21949 2172013.918305 6352960.83371">

Save the config.xml. Your config.xml should similar to mine below:

If you now load the application you should see your new data as below:

Depending on your configuration if you did not set the json MIME type in IIS you will get the following when trying to bring up the overview map:

The fix for this is add the json MIME type to IIS. Instructions for this can be found in the readme.txt. It does say optional in the readme.txt but it’s required. Also we need to update the URL for the overview map. Browse to C:\Inetpub\Wwwroot\SampleViewers\jsapi\js\com\esri\solutions\jsviewer\widgets\config. Open the OverviewWidget.json.

In here update mapservice with the map service you are using.

overview: { 
        mapservice: "http://demos.eaglegis.co.nz/ArcGIS/rest/services/Geographx/newzealandcached-pooled/MapServer",
        servicetype: "tiled"
    }

Adding this and trying it again will give you a working application like below:

Ok so things are working well. I have been running a few tests and noticed I was getting a load of 404’s. Now if you are in the USA and your browser is set to en-us and you load the viewer you shouldn’t get any 404’s. If you are outside the USA and your browser is set to something different you will get lots of 404’s.

This is due to the NLS language support not being configured. Instructions to configure this can be found in the readme.txt. For New Zealand make the following changes:

Browse to C:\Inetpub\Wwwroot\SampleViewers\jsapi\js\com\esri\solutions\jsviewer\nls. Copy the three .js files. Create a new directory called en-nz. Paste the copied .js files into this new directory.

Now browse to C:\Inetpub\Wwwroot\SampleViewers\jsapi\js\com\esri\solutions\jsviewer\nls. Copy the then .js files. Create a new directory called en-nz. Paste the copied .js files into this new directory.

You can now follow the developers guide to extending and adding widgets. I’ll be building and adding some new widgets so I will update my posts.