Stuck on error: esri.layers.WMSLayerInfo is not a constructor

TonyAppel1 · ‎01-06-2012

Hi all,
Let me preface this with the knowledge that my skills in javascript are "enough to cause trouble" at best.
With that in mind, I have the html block below which has:
1: basemap of a custom tiled map layer using a service that is internal to our company.
2: I am trying to overlay a WMS, non-tiled, layer on top of that.

I keep getting the error below and the WMS layer will not draw or connect. What am I missing or doing wrong?

I have removed some non-map related code so that this will fit in the code block.

Thanks in advance.

esri.layers.WMSLayerInfo is not a constructor
[Break On This Error] var layer1 = new esri.layers.WMSLay...itle:"PD_SPATIAL_CLUSTERED_POINT"});

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <meta name="layout" content="main" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.6/js/dojo/dijit/themes/claro/claro.css">
    <script type="text/javascript">
        var djConfig = {
            parseOnLoad: true
        };
    </script>
 <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.6"></script>
    <script type="text/javascript">
        dojo.require("esri.map");
        dojo.require("esri.toolbars.draw");
        dojo.require("esri.layers.tiled")
        dojo.require("dijit.dijit");
        dojo.require("esri.layers.wmts")
        
        dojo.declare("com.nokia.QuadKeyLayer", esri.layers.TiledMapServiceLayer, {
            constructor: function (url) {
                this.cacheUrl = url;
                this.spatialReference = new esri.SpatialReference({
                    wkid: 3857
                });
                this.tileInfo = new esri.layers.TileInfo({
                    rows: 256,
                    cols: 256,
                    dpi: 96,
                    format: "PNG8",
                    compressionQuality: 0,
                    origin: {
                        x: -20037508.342787,
                        y: 20037508.342787
                    },
                    spatialReference: {
                        wkid: 3857
                    },
                    lods: [{
                        level: 0,
                        scale: 591657527.591555,
                        resolution: 156543.033928
                    }, {
                        level: 1,
                        scale: 295828763.795777,
                        resolution: 78271.5169639999
                    }, {
                        level: 2,
                        scale: 147914381.897889,
                        resolution: 39135.7584820001
                    }, {
                        level: 3,
                        scale: 73957190.948944,
                        resolution: 19567.8792409999
                    }, {
                        level: 4,
                        scale: 36978595.474472,
                        resolution: 9783.93962049996
                    }, {
                        level: 5,
                        scale: 18489297.737236,
                        resolution: 4891.96981024998
                    }, {
                        level: 6,
                        scale: 9244648.868618,
                        resolution: 2445.98490512499
                    }, {
                        level: 7,
                        scale: 4622324.434309,
                        resolution: 1222.99245256249
                    }, {
                        level: 8,
                        scale: 2311162.217155,
                        resolution: 611.49622628138
                    }, {
                        level: 9,
                        scale: 1155581.108577,
                        resolution: 305.748113140558
                    }, {
                        level: 10,
                        scale: 577790.554289,
                        resolution: 152.874056570411
                    }, {
                        level: 11,
                        scale: 288895.277144,
                        resolution: 76.4370282850732
                    }, {
                        level: 12,
                        scale: 144447.638572,
                        resolution: 38.2185141425366
                    }, {
                        level: 13,
                        scale: 72223.819286,
                        resolution: 19.1092570712683
                    }, {
                        level: 14,
                        scale: 36111.909643,
                        resolution: 9.55462853563415
                    }, {
                        level: 15,
                        scale: 18055.954822,
                        resolution: 4.77731426794937
                    }, {
                        level: 16,
                        scale: 9027.977411,
                        resolution: 2.38865713397468
                    }, {
                        level: 17,
                        scale: 4513.988705,
                        resolution: 1.19432856685505
                    }, {
                        level: 18,
                        scale: 2256.994353,
                        resolution: 0.597164283559817
                    }]
                });
                this.fullExtent = new esri.geometry.Extent({
                    xmin: -20037508.34,
                    ymin: -20037508.34,
                    xmax: 20037508.34,
                    ymax: 20037508.34,
                    spatialReference: {
                        wkid: 3857
                    }
                });
                this.initialExtent = new esri.geometry.Extent({
                    xmin: -20037508.34,
                    ymin: -20037508.34,
                    xmax: 20037508.34,
                    ymax: 20037508.34,
                    spatialReference: {
                        wkid: 3857
                    }
                });
                this.serverIndex = 0;
                this.loaded = true;
                this.onLoad(this);
            },
            getTileUrl: function(level, row, col) {
                var quad = "";
                var i = 0;
                for (i = level; i > 0; i--)
                {
                    var mask = 1 << (i - 1);
                    var cell = 0;
                    if ((col & mask) != 0)
                    {
                        cell++;
                    }
                    if ((row & mask) != 0)
                    {
                        cell += 2;
                    }
                    quad += cell;
                }
                return this.cacheUrl + quad;
            }
        });
        var map, osmLayer, editLayer, toolbar;
  function init() {
            var extent = new esri.geometry.Extent({"xmin":-10017753.324052965,"ymin":3508287.6149750105,
                "xmax":-10016081.264059184,"ymax":3509481.9435419976,"spatialReference":{"wkid":900913}});
            map = new esri.Map("map",{extent:extent,logo:false});
            osmLayer = new com.nokia.QuadKeyLayer("http://prd.lbsp.navteq.com/mgi/6.0/quadkey?token=JSLOCAPI_TEST_LBSP_ALL&quadkey=");
            map.addLayer(osmLayer);
            
   var layer1 = new esri.layers.WMSLayerInfo({name:"probe:PD_SPATIAL_CLUSTERED_POINT",title:"PD_SPATIAL_CLUSTERED_POINT"});
   var resourceInfo = {
   extent: new esri.geometry.Extent(-126.40869140625,31.025390625,-109.66552734375,41.5283203125,{wkid: 4326}),
   layerInfos: [layer1]
   };
   var wmsLayer = new esri.layers.WMSLayer("http://pchiimpapp01.hq.navteq.com:8080/geoserver/wms?TILED=TRUE",
   {resourceInfo: resourceInfo,
   visibleLayers: ["probe:PD_SPATIAL_CLUSTERED_POINT"]}
   );
   map.addLayers([wmsLayer]);
            createToolbar(map);

        }
       
                
            });
        }
        function createToolbar(themap) {
            dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
            toolbar = new esri.toolbars.Draw(map);
            dojo.connect(toolbar, "onDrawEnd", addToMap);
        }
        function addToMap(geometry) {
            toolbar.deactivate();
            map.showZoomSlider();
            var symbol = new esri.symbol.CartographicLineSymbol(esri.symbol.CartographicLineSymbol.STYLE_SOLID,
                    new dojo.Color([150,150,150]), 2, esri.symbol.CartographicLineSymbol.CAP_ROUND,
                    esri.symbol.CartographicLineSymbol.JOIN_MITER, 5);
            var graphic = new esri.Graphic(geometry, symbol);
            map.graphics.add(graphic);
            var t = esri.geometry.webMercatorToGeographic(geometry);
            var transformedGeo = esri.geometry.webMercatorToGeographic(geometry);
            var json = transformedGeo.paths.toJSON();
            new Ajax.Request('/fallout-ui/task/submitLink', { method:'post', contentType:'application/json', postBody: Object.toJSON({  geometry: transformedGeo.paths[0] }) });
        }
        function startEdit() {
            map.graphics.clear();
            toolbar.activate(esri.toolbars.Draw.POLYLINE);
            map.hideZoomSlider();
        }
        dojo.addOnLoad(init);
    </script>

</head>
<body class="claro" style="font-size: small; font-family: Arial Unicode MS,Arial,sans-serif;">
    <div id="map" style="position:relative;width:700px; height:500px; border:1px solid #000;">
  
    </div>
    <button onclick="startEdit()">Draw Link</button>
</body>
</html>

VictorCapa3 · ‎01-06-2012

Just taking a quick look, you are calling dojo.require("esri.layers.wmts") and I think it should be dojo.require("esri.layers.wms"). I tested your page and at least saw a call to a web service but wasn't sure what it was returning.

GiftHlongoane · ‎06-08-2016

After struggling a few times with this I ended up using AMD require statements and that solved it.

require(

[

"esri/layers/WMTSLayerInfo",

"esri/layers/WMTSLayer",

"esri/layers/ArcGISTiledMapServiceLayer"

],

function (

WMTSLayerInfo,

WMTSLayer,

ArcGISTiledMapServiceLayer

) {

//Code here

});