esri.SnappingManager on a esri.layers.GraphicsLayer

BjørnSandvik · ‎07-05-2011

Hi,

When creating a snapping manager on a graphics layer I get the error "Uncaught TypeError: Cannot read property 'declaredClass' of null".

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <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="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>VE Tile Layer</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.3/js/dojo/dijit/themes/claro/claro.css">
    <script type="text/javascript">djConfig = { parseOnLoad:true }</script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.3"></script>
    
    <script type="text/javascript" charset="utf-8">
      dojo.require("esri.map");
      dojo.require("esri.SnappingManager");
      dojo.require("esri.virtualearth.VETiledLayer");

      var veTileLayer;

      function init() {
        
        var options = {
          extent: new esri.geometry.Extent({
            xmin: 1191657,
            ymin: 8383658,
            xmax: 1196348,
            ymax: 8386042,
            spatialReference: {
              wkid: 102113
            }
          })
        };
        
        var map = new esri.Map("map", options);

        //Creates the Virtual Earth layer to add to the map
        veTileLayer = new esri.virtualearth.VETiledLayer({
          bingMapsKey: 'Av1bH4keF8rXBtxWOegklgWGCYYz8UGYvBhsWKuvc4Z15kT76xVFOERk8jkKEDvT',
          mapStyle: esri.virtualearth.VETiledLayer.MAP_STYLE_ROAD
        });

        map.addLayer(veTileLayer);


        // Add route
        // http://help.arcgis.com/en/webapi/javascript/arcgis/help/jsapi/polyline.htm
        var route = new esri.geometry.Polyline(new esri.SpatialReference({wkid:102113}));
        
        route.addPath([[1191657,8383658], [1196348,8386042]]);
     
        var routeStyle = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,255]), 3);
        
        var graphic = new esri.Graphic(route, routeStyle);
        
        var routeLayer = new esri.layers.GraphicsLayer({opacity:0.80});
        routeLayer.add(graphic);      
        
        map.addLayer(routeLayer); 

        var snappingManager = new esri.SnappingManager({
          alwaysSnap: true,
          layerInfos: [{layer:routeLayer}],
          map: map
        });

      }

      dojo.addOnLoad(init);
    </script>

  </head>

  <body class="claro">
    <div style="position:relative;">
      <div id="map" style="width:1024px; height:512px; border:1px solid #000;"></div>
    </div>
  </body>

</html>

What could be wrong?!?

KellyHutchins · ‎07-05-2011

The map's graphics layer is available after the map loads. So try moving the code that adds the route and sets up snapping into the map's onLoad event.

      function init() {
        
        var options = {
          extent: new esri.geometry.Extent({
            xmin: 1191657,
            ymin: 8383658,
            xmax: 1196348,
            ymax: 8386042,
            spatialReference: {
              wkid: 102113
            }
          })
        };
        
        var map = new esri.Map("map", options);
        
        dojo.connect(map,"onLoad",addRoute);

        //Creates the Virtual Earth layer to add to the map
        veTileLayer = new esri.virtualearth.VETiledLayer({
          bingMapsKey: 'Av1bH4keF8rXBtxWOegklgWGCYYz8UGYvBhsWKuvc4Z15kT76xVFOERk8jkKEDvT',
          mapStyle: esri.virtualearth.VETiledLayer.MAP_STYLE_ROAD
        });

        map.addLayer(veTileLayer);



      }
      function addRoute(map){

        var route = new esri.geometry.Polyline(new esri.SpatialReference({wkid:102113}));
        
        route.addPath([[1191657,8383658], [1196348,8386042]]);
     
        var routeStyle = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,255]), 3);
        
        var graphic = new esri.Graphic(route, routeStyle);
        
        var routeLayer = new esri.layers.GraphicsLayer({opacity:0.80});
        routeLayer.add(graphic);      
        
        map.addLayer(routeLayer); 

        var snappingManager = new esri.SnappingManager({
          alwaysSnap: true,
          layerInfos: [{layer:routeLayer}],
          map: map
        });      
      }