Symbology not correct from ArcGIS Online Map

[BenStewart]

This is a really weird error, so I apologize if I don't voice it correctly. I am embedding a map from ArcGIS online into another webpage, and the symbols coming from AGO do not reflect what is shown in the new website, see the attached image with AGO on the left and the web map on the right.

Below is the code I am using to embed the map

function loadPortalMap(configOptions) {     esri.arcgis.utils.arcgisUrl = configOptions['portalUrl'] + "sharing/content/items";     var webmapID = configOptions['webMapId'];     viewDefinition = configOptions['lyrDefn'];     //Get webmapID from country code     //Create the appropriate dropdowns describing the layers to draw     for (var index = 0; index < viewDefinition.length; index ++) {         var item = viewDefinition[index];         var dType = item[0];         var optn = document.getElementById(dType);         var option = document.createElement("option");         option.text = item[1];         option.value = index;         try {             optn.add(option, null);         } catch (error) {              optn.add(option);         }     }      var params = { q: 'id:' + webmapID };     var mapDeffered = esri.arcgis.utils.createMap(webmapID, 'map', { mapOptions: {         logo: false,          showInfoWindowOnClick: false,         sliderStyle:"small"     } });          mapDeffered.addCallback(function(response) {         var layers = response.itemInfo.itemData.operationalLayers;         dojo.forEach(layers, function(layer) {             if (!layer.featureCollection){                  layerInfo.push({"layer":layer.layerObject,"title":layer.title});              } else {                 dojo.forEach(layer.featureCollection.layers, function(featLyr) {                     layerInfo.push({"layer":featLyr.layerObject,"title":featLyr.title});                  });             }         });                      createLegend(layerInfo, mapDeffered.results[0].map);                 layerInfo.reverse();         //changeMap();         //Set the description information from the item to          $("#tableDiv").html("<h2>Data</h2><div id='innerText'>" + response.itemInfo.item.description + "</div>");     });      mapDeffered.addErrback(function(error) {         //Do something here if map doesn't load properly         var something = error;     });           }

[KellyHutchins]

I ran a quick test using your web map and one of the sample applications and the symbology was the same in both ArcGIS.com and the application.

To test use the following sample and replace the existing web map id with yours (286b722cfaf04eee98b8a8a491fd1af5).
http://help.arcgis.com/en/webapi/javascript/arcgis/sandbox/sandbox.html?sample=map_webmap

Is there any code in your custom app that adds additional layers, customizes symbology etc?

Kelly

[BenStewart]

Thanks for the quick response! The map works fine in a bunch of the templates, as well as your little Javascript sandbox (which I have bookmarked now).

No, there is nothing else we are doing as far as adding layers, and we are doing nothing to the drawingInfo. The only other piece of Javascript in the program changes visible layers on a drop down change event. I have included that code her as well, although I can't understand how it could affect the symbology.

function changeMap() {
    var ptSel = document.getElementById("point");
    var ptIdx = ptSel.value;
    
    var rasSel = document.getElementById("raster");
    var rasIdx = rasSel.value;
    
    //Define the %in% function
    Array.prototype.contains = function(obj) {
        var i = this.length;
        while (i--) {
            if (this == obj) {
                return true;
            }
        }
        return false;
    }
    
    //The value from each of these dropdowns can be used to get the index of the layer definition we need to show
    var ptsToShow = viewDefinition[ptIdx][2];
    var rasterToShow = viewDefinition[rasIdx][2];
    var allVals = ptsToShow.concat(rasterToShow);
    
    for (var index = 0; index < layerInfo.length; index ++) {
        var lyrItem = layerInfo[index];
        if (allVals.contains(index)) { lyrItem.layer.show(); } else { lyrItem.layer.hide(); };
    }
}

[KellyHutchins]

Ben,

I don't see anything in the code that should cause a problem. Is your app public? Or can you create a test app that shows the problem?

Kelly

[BenStewart]

I am talking to my web developer right now to see what we can do. Unfortunately, I don't think we can make it public until we solve this issue (which is a Catch-22, because I can't figure out how to fix it without making it public).

In a more detailed look, it appears that there are 5 features in the map and 4 class breaks. This means 4 of the features have their values as the end point of the class breaks; description is below.

class breaks = [[26.7, 29.3], [29.3, 43.8], [43.8, 48.7], [48.7, 55.2]]
featValues = 55.20, 29.30, 43.80, 26.70, 48.70

I really don't understand what is going on here, so I am going to try to publish something externally for you to look at

[BenStewart]

I've hosted a stripped down version on my website that shows the same error. The link below is to the actual AGO map.

http://geographyis.com/testing/gafsp/GAFSP/countryPage.html
http://bit.ly/WN0ZmP

[KellyHutchins · Accepted solution]

Looks like you are using version 3.1 of the API. There was a bug that we fixed regarding layers with class breaks not including the max values. Can you try upgrading your sample to the latest version (3.3) to see if that resolves the problem?

Kelly

Edit: Looks like this fix was added at 3.2. Here's a code snippet showing a working example:

<!DOCTYPE html>   <html>   <head>   <title>Create a Web Map</title>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css">   <style>     html,body,#mapDiv,.map.container{       padding:0;       margin:0;       height:100%;     }   </style>    <script>var dojoConfig = { parseOnLoad:true };</script>   <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2compact"></script>   <script>     dojo.require("esri.map");     dojo.require("esri.arcgis.utils");      var map;        function init(){       var webmapid = "286b722cfaf04eee98b8a8a491fd1af5";       esri.arcgis.utils.createMap(webmapid, "mapDiv").then(function(response){         map = response.map;       });     }      dojo.ready(init);   </script>    </head>    <body>     <div id="mapDiv"></div>   </body>   </html>

[BenStewart]

Thanks a lot! That looks like it did it (I haven't changed the test link I sent you before).

I can't believe I missed that. I explicitly looked at the esri JS reference earlier and thought 'yeah, 3.1, that is the most recent version'. I knew it had to be a simple solution.

[BenStewart]

For what it is worth, this is broken again. I have started a new thread, as the problem is not the same, but I thought I should mention it on this thread

http://forums.arcgis.com/threads/78002-Jvascript-version-3.3-not-working