javascript basic viewer and WMS or KML operational layers

[NakishaFouch]

I am using the javascript basic viewer template and accessing the basemaps and my own rest services operational layers using the json example (http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm).  Has anyone attempted to integrate WMS or KML operational layers into the javascript basic viewer template?  Any insight on how to do this would be greatly appreciated.

[JohnGravois]

by JSON example, do you mean this one?
http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples/layers_wms.html

have you seen our KML and WMS samples?

[NakishaFouch]

I have seen those examples, but I am trying to use the javascript basic viewer template so I am trying to add wms layers and kml layers based on the way the code is structured in that basic viewer template, which is more like this...

var webmap = {};
        webmap.item = {
          "title":"",
          "snippet": "",
          "extent": [[ 30.05859375, -42.36328125],[188.26171875, 63.10546875]]
        };

        webmap.itemData = {
        "operationalLayers": [
    {
   "url":"http://.../ArcGIS/rest/services/.../MapServer/",
   "visibility":true,
   "opacity":0.4,
   "title":"Human Footprint Index v.2 1995-2004"
  },
 
   {
                     "url": "http://.../ArcGIS/rest/services/.../MapServer/",
                     "visibility": true,
              visibleLayers": [0],
                     "opacity": 0.75,
                     "title": "World DB on Protected Areas"
    }],
          "baseMap": {
            "baseMapLayers": [{
              "opacity": 1,
              "visibility": true,
              "url": "http://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer"
              },
     {
              "isReference": true,
              "opacity": 1,
              "visibility": true,
              "url": "http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer"
              }],
            "title": "World_Terrain_Base"
          },
          "version": "1.1"
        };
 
      //get the localization strings
      i18n = dojo.i18n.getLocalization("esriTemplate", "template");
      configOptions = {
         webmap:webmap,
        //The id for the web mapping applciation item that contains configuration info - in most
        //cases this will be null.
        appid: "",
        //set to true to display the title
        displaytitle: true,
        //Enter a title, if no title is specified, the webmap's title is used.
        title: "OPG Community MapIT",
        //Enter a description for the application. This description will appear in the left pane
        //if no description is entered the webmap description will be used.
        description: "",
  layer: "http://Maps.clemson.edu/ArcGIS/rest/services/anjo_web/MapServer",
        //specify an owner for the app - used by the print option. The default value will be the web map's owner
        owner: '',
  //Specify a color theme for the app. Valid options are gray,blue,purple,green and orange
        theme: 'gray',
        //Optional tools - set to false to hide the tool
        //set to false to hide the zoom slider on the map
        displayslider: true,
        displaymeasure: true,
        displaybasemaps: true,
        displayoverviewmap: true,
        displayeditor: true,
        etc......

And so far I can't get the wms and kml layers to work in this structure.  So any insight on how to do this is greatly appreciated.

[KellyHutchins]

We don't have the web map spec documented yet so it isn't a simple task to create a web map using json. You could use ArcGIS.com to build the web map with all the layers that you want to include then use Chrome Dev Tools or Firebug to inspect the requests to see the web map json for that map.

I added a KML layer to a sample map and here's how the KML operational layer looked.

{
        "url": "http://dl.dropbox.com/u/2654618/kml/Wyoming.kml",
        "id": "kml_6802",
        "visibility": true,
        "opacity": 1,
        "title": "Wyoming",
        "type": "KML",
        "visibleFolders": [0, 1]
    }

A simpler alternative would be to just build the web map in arcgis.com and use the id in the basic viewer app. Is there a reason you don't want to do this? 

[NakishaFouch]

Thanks Kelly.  I assume the wms layer code is pretty similar, just a type = wms? 

We have a couple of wms and kml layers, but most the data we are using is from our own rest services.  We wanted the option of using the basic template, since it provides a nice user interface with lots of functionality built in, but we wanted to hang it off our server instead of using Arcgis.com since it is using mostly internal data. 

Again, thanks for the assistance!

[JohnGravois]

hi Nakisha,

since our print samples convert the contents of the application to webmap json, i was able to get another valid example for wms by including it in the following app, and then snooping the network traffic.

hopefully it helps!

var wmsLayer = new esri.layers.WMSLayer("http://sampleserver1.arcgisonline.com/ArcGIS/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/WMSServer");
wmsLayer.setVisibleLayers([0,1,2]);
wmsLayer.setImageFormat("png");

{
"id" : "layer0",
"url" : "http://sampleserver1.arcgisonline.com/ArcGIS/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/WMSServer",
"title" : "Specialty/ESRI_StatesCitiesRivers_USA",
"opacity" : 1,
"type" : "wms",
"version" : "1.3.0",
"transparentBackground" : true,
"visibleLayers" : ["0", "1", "2"]
}

[NakishaFouch]

Very helpful! 

I added the code, it's running without error but the layer doesn't show up in the layer dropdown, on the legend, or on the basemap.  I haven't changed anything, I am using the example wms exactly. 

The KML is up and running.

I also found this link:

http://resources.arcgis.com/en/help/main/10.1/index.html#//0154000004w8000000

which provides lots of examples for the webmap json.

[JohnGravois]

i wasn't able to see the wms in that sample either (until i commented out the other layers and the web mercator map extent).

app.map = new esri.Map("map"/*, {
          "extent": new esri.geometry.Extent({"xmin":-13074922,"ymin":4015867,"xmax":-13073339,"ymax":4016413,"spatialReference":{"wkid":102100}})
        }*/);

//app.map.addLayer(satellite);
//app.map.addLayer(labels);
//app.map.addLayer(poolFeatureLayer);

[NakishaFouch]

Hmm well since I am using the basic viewer template, the extent code is a little more complicated.  On the backend the extent settings seem to be setup to use whatever extent comes with first operational layer.   I am explicitly setting my extent to near se asia with a spatial reference of 4326, which looks to be what that wms layer is using based on the examples. However, even after commenting out that explicit extent setting, as well as the other operational layers, I am still not having much luck getting the layer to appear.

[JohnGravois]

hmmm.... not sure whats going on there.

i think it would be worthwhile to echo Kelly's earlier comments...  even if you are hosting WMS layers on your own ArcGIS Server machine, you can still mash the content up in arcgis.com and create a webmap pretty conveniently.  anytime the webmap is consumed, the content is still going to be pulled from your own machine.  arcgis.com is only saving the url of the resource.