Arg: Illegal input string in Vecetor2d (vml.xd.js)

AaronConnolly · ‎10-04-2011

All - I did a quick search on the forum and found the following related thread:

http://forums.arcgis.com/threads/21315-Adding-a-point-amp-change-extent-quot-Arg-Illegal-input-strin...

I'm not sure if this is the exact same issue, but I'm doing essentially the same thing with my app. I've created a sandbox app that demonstrates the issue, and I have attached it to this post. To use this sand box app, you'll need to re-wire the Geocoding service and Geometry service.

Given the attached sandbox, here's how to reproduce the error:

If you're using IE8 proceed to step 1. If you're using IE9 press F12 to open the developer tools. Ensure that your Browser Mode is set to IE9 and the Document Mode is set to IE8. Then proceed to step 1.

1. Type an address in the search box. Click search. Wait for the buffer to draw on the map.
2. Type a second address somewhere else. Click search. Wait for the map to redraw.
3. Notice that only the pin marker is drawn.
4. Move the map with your mouse and the following exception should be thrown in IE:

SCRIPT33426: Arg: Illegal input string in Vector2D
vml.xd.js, line 14 character 24560

This problem does not exist in Firefox, Safari or Chrome. Only IE8 and IE7

Has anyone noticed this issue in IE before? If so, do you know what causes it or how to resolve it?

Thanks,
- Aaron

derekswingley1 · ‎10-04-2011

Thanks for posting a detailed repro case. I'm in the process of trying to reproduce you're actual error...

The first thing that jumped out at me is that you're re-creating a graphics layer on each geocode. Why not just create a graphics layer when the app is initialized and re-use that throughout the app?

AaronConnolly · ‎10-04-2011

All - I did a quick search on the forum and found the following related thread:

http://forums.arcgis.com/threads/21315-Adding-a-point-amp-change-extent-quot-Arg-Illegal-input-strin...

I'm not sure if this is the exact same issue, but I'm doing essentially the same thing with my app. I've created a sandbox app that demonstrates the issue, and I have attached it to this post. To use this sand box app, you'll need to re-wire the Geocoding service and Geometry service.

Given the attached sandbox, here's how to reproduce the error:

If you're using IE8 proceed to step 1. If you're using IE9 press F12 to open the developer tools. Ensure that your Browser Mode is set to IE9 and the Document Mode is set to IE8. Then proceed to step 1.

1. Type an address in the search box. Click search. Wait for the buffer to draw on the map.
2. Type a second address somewhere else. Click search. Wait for the map to redraw.
3. Notice that only the pin marker is drawn.
4. Move the map with your mouse and the following exception should be thrown in IE:

SCRIPT33426: Arg: Illegal input string in Vector2D
vml.xd.js, line 14 character 24560

This problem does not exist in Firefox, Safari or Chrome. Only IE8 and IE7

Has anyone noticed this issue in IE before? If so, do you know what causes it or how to resolve it?

Thanks,
- Aaron

Good catch. I could probably get a little performance boost if I adjusted it.

derekswingley1 · ‎10-04-2011

Does this code repro the issue for you:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test IE8 Buffer / Graphics Layer Bug</title>
    <link type="text/css" rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/tundra/tundra.css"/>
    <style type="text/css">
      body { font-size: 100%; font-family: Verdana; }
      #map { height: 600px; width: 800px; margin: 50 auto; }
    </style>
    <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5"></script>
    <script>
      dojo.require("esri.map");
      dojo.require("esri.tasks.locator");
      
      var map, locator, addressGraphicSymbol, GEOMETRY_SERVICE;
      var spatialReferenceWKID_BING = 102113;

      function init() {
        // console.log('into init...');
        var initExtent = new esri.geometry.Extent({ "xmin": -13056017, "ymin": 4028145, "xmax": -13030946, "ymax": 4042916, "spatialReference": { "wkid": 102100}});
        map = new esri.Map("map", { extent: initExtent });
       
        locator = new esri.tasks.Locator("http://tasks.arcgisonline.com/ArcGIS/rest/services/Locators/TA_Address_NA_10/GeocodeServer");
        // dojo.connect(locator, "onAddressToLocationsComplete", showResults);
        dojo.connect(locator, "onAddressToLocationsComplete", placeAddressGraphic);
        
        //Add the topographic layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service    
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
        map.addLayer(basemap);

        dojo.connect(map, 'onLoad', function (theMap) {
          //resize the map when the browser resizes
          dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
        });
        
        addressGraphicSymbol = new esri.symbol.SimpleMarkerSymbol();
        GEOMETRY_SERVICE = new esri.tasks.GeometryService('http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer');
      }

      function geocodeAddress() {
        // map.graphics.clear();
        var address = { "SingleLine": dojo.byId("address").value };
        locator.outSpatialReference= map.spatialReference;
        locator.addressToLocations(address,["Loc_name"]);
      }

      function placeAddressGraphic(c) {
        // c is a candidates object
        // console.log('candidates: ', c);
        var x = c[0].location.x, y = c[0].location.y;

          // Create the Address Layer on the map
          //------------------------------------
          var addressLayer = createGraphicsLayer("addressBufferLayer");
          if (addressLayer) {
              reorderGraphicsLayer("addressBufferLayer", 0);

              // Must add Graphic to map
              //------------------------
              var point = new esri.geometry.Point(x, y, new esri.SpatialReference({ "wkid": spatialReferenceWKID_BING }));
              var graphic = new esri.Graphic(point, addressGraphicSymbol);
              var focusRadius = 1;
                                  
              if (graphic != undefined && graphic != null) {
                  // Create buffer parameters for buffer query
                  //------------------------------------------
                  var params = new esri.tasks.BufferParameters();
                  params.distances = [focusRadius];
                  params.bufferSpatialReference = new esri.SpatialReference({ "wkid": spatialReferenceWKID_BING });
                  params.outSpatialReference = map.spatialReference;
                  params.unit = esri.tasks.GeometryService.UNIT_STATUTE_MILE;
                  params.geometries = [graphic.geometry];
                  // console.log('params: ', params);
                  GEOMETRY_SERVICE.buffer(params,
                      function (features) {
                        // alert('buffer callback');
                          if (features != undefined && features != null) {
                              var bufferGraphic = null;
                              var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, 
                                  new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([5, 95, 158, 0.65]), 2),
                                  new dojo.Color([145, 209, 255, 0.35]));

                              dojo.forEach(features, function (feature) {
                                  bufferGraphic = new esri.Graphic(feature, symbol);
                                  var layer = getGraphicsLayer("addressBufferLayer");
                                  if (layer == null) {
                                      layer = createGraphicsLayer("addressBufferLayer");
                                      reorderGraphicsLayer("addressBufferLayer", 0);
                                  }
                                  if (layer != null) {
                                      layer.clear();
                                      layer.add(bufferGraphic);
                                      layer.add(graphic);
                                  }
                              });

                              if (bufferGraphic != undefined && bufferGraphic != null) {
                                  map.setExtent(bufferGraphic.geometry.getExtent().expand(1.5));
                              }else{
                                  alert("There was a problem drawing buffer. bufferGraphic is null or undefined.");
                              }

                          }else{
                              alert("There was a problem executing buffer. No features were returned");
                          }
                      },
                      function (Error) {
                          var message = "The geometry service's buffer() method failed. \r\nCode: " + 
                              Error.code + "\r\nMessage: " + Error.message + "\r\nDetails:" + Error.details;
                          alert(message);

                      }
                  );
              }
          }
      }

      function createGraphicsLayer(layerID) {
          var layer = null;
          var oldLayer = null;
          // Create graphics layer and remove any layer that is 
          // there with the same ID
          //---------------------------------------------------
          if (map.getLayer(layerID)) {
              oldLayer = map.getLayer(layerID);
              layer = new esri.layers.GraphicsLayer({ id: "newLayer" });
              map.removeLayer(oldLayer);
              layer.id = layerID;
          }
          else {
              layer = new esri.layers.GraphicsLayer({ id: layerID });
          }

          // Add new layer to map
          //---------------------
          map.addLayer(layer);
          return layer;
      }

      function reorderGraphicsLayer (layerID, index) {
          // Check for invalid indexes
          //--------------------------
          if (index < 0 || (map.graphicsLayerIds != undefined && index > map.graphicsLayerIds.length)) {
              alert("reorderGraphicsLayer failed. Index (" + index + ") is out of range");
              return null;
          }

          var layer = map.getLayer(layerID);
          if (layer == undefined || layer == null) {
              alert("reorderGraphicsLayer failed. Layer (" + layerID + ") not found.");
              return null;
          }
          map.reorderLayer(layer, index);
      }

      function getGraphicsLayer (layerID) {
          var layer = map.getLayer(layerID);
          if (layer == undefined || layer == null) {
              alert("GetGraphicsLayer failed. Layer (" + layerID + ") is undefined or null");
              return null;
          }
          return layer;
      }

      dojo.ready(init);
    </script>
</head>
<body class="tundra">
  <div class="search">
    <span>SEARCH:</span>
    <input type="text" id="address" value="1600 Pennsylvania Ave. Washington, DC" />
    <input type="button" value="Search" onclick="geocodeAddress();" />
    <br />
    <span>
      380 New York Street, Redlands, CA<br />
      1600 Pennsylvania Ave. Washington, DC<br />
      1060 W. Addison Street, Chicago, IL<br />
    </span>
  </div>
  <div id="map"></div>
</body>
</html>

AaronConnolly · ‎10-04-2011

Does this code repro the issue for you:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test IE8 Buffer / Graphics Layer Bug</title>
    <link type="text/css" rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/tundra/tundra.css"/>
    <style type="text/css">
      body { font-size: 100%; font-family: Verdana; }
      #map { height: 600px; width: 800px; margin: 50 auto; }
    </style>
    <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5"></script>
    <script>
      dojo.require("esri.map");
      dojo.require("esri.tasks.locator");
      
      var map, locator, addressGraphicSymbol, GEOMETRY_SERVICE;
      var spatialReferenceWKID_BING = 102113;

      function init() {
        // console.log('into init...');
        var initExtent = new esri.geometry.Extent({ "xmin": -13056017, "ymin": 4028145, "xmax": -13030946, "ymax": 4042916, "spatialReference": { "wkid": 102100}});
        map = new esri.Map("map", { extent: initExtent });
       
        locator = new esri.tasks.Locator("http://tasks.arcgisonline.com/ArcGIS/rest/services/Locators/TA_Address_NA_10/GeocodeServer");
        // dojo.connect(locator, "onAddressToLocationsComplete", showResults);
        dojo.connect(locator, "onAddressToLocationsComplete", placeAddressGraphic);
        
        //Add the topographic layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service    
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
        map.addLayer(basemap);

        dojo.connect(map, 'onLoad', function (theMap) {
          //resize the map when the browser resizes
          dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
        });
        
        addressGraphicSymbol = new esri.symbol.SimpleMarkerSymbol();
        GEOMETRY_SERVICE = new esri.tasks.GeometryService('http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer');
      }

      function geocodeAddress() {
        // map.graphics.clear();
        var address = { "SingleLine": dojo.byId("address").value };
        locator.outSpatialReference= map.spatialReference;
        locator.addressToLocations(address,["Loc_name"]);
      }

      function placeAddressGraphic(c) {
        // c is a candidates object
        // console.log('candidates: ', c);
        var x = c[0].location.x, y = c[0].location.y;

          // Create the Address Layer on the map
          //------------------------------------
          var addressLayer = createGraphicsLayer("addressBufferLayer");
          if (addressLayer) {
              reorderGraphicsLayer("addressBufferLayer", 0);

              // Must add Graphic to map
              //------------------------
              var point = new esri.geometry.Point(x, y, new esri.SpatialReference({ "wkid": spatialReferenceWKID_BING }));
              var graphic = new esri.Graphic(point, addressGraphicSymbol);
              var focusRadius = 1;
                                  
              if (graphic != undefined && graphic != null) {
                  // Create buffer parameters for buffer query
                  //------------------------------------------
                  var params = new esri.tasks.BufferParameters();
                  params.distances = [focusRadius];
                  params.bufferSpatialReference = new esri.SpatialReference({ "wkid": spatialReferenceWKID_BING });
                  params.outSpatialReference = map.spatialReference;
                  params.unit = esri.tasks.GeometryService.UNIT_STATUTE_MILE;
                  params.geometries = [graphic.geometry];
                  // console.log('params: ', params);
                  GEOMETRY_SERVICE.buffer(params,
                      function (features) {
                        // alert('buffer callback');
                          if (features != undefined && features != null) {
                              var bufferGraphic = null;
                              var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, 
                                  new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([5, 95, 158, 0.65]), 2),
                                  new dojo.Color([145, 209, 255, 0.35]));

                              dojo.forEach(features, function (feature) {
                                  bufferGraphic = new esri.Graphic(feature, symbol);
                                  var layer = getGraphicsLayer("addressBufferLayer");
                                  if (layer == null) {
                                      layer = createGraphicsLayer("addressBufferLayer");
                                      reorderGraphicsLayer("addressBufferLayer", 0);
                                  }
                                  if (layer != null) {
                                      layer.clear();
                                      layer.add(bufferGraphic);
                                      layer.add(graphic);
                                  }
                              });

                              if (bufferGraphic != undefined && bufferGraphic != null) {
                                  map.setExtent(bufferGraphic.geometry.getExtent().expand(1.5));
                              }else{
                                  alert("There was a problem drawing buffer. bufferGraphic is null or undefined.");
                              }

                          }else{
                              alert("There was a problem executing buffer. No features were returned");
                          }
                      },
                      function (Error) {
                          var message = "The geometry service's buffer() method failed. \r\nCode: " + 
                              Error.code + "\r\nMessage: " + Error.message + "\r\nDetails:" + Error.details;
                          alert(message);

                      }
                  );
              }
          }
      }

      function createGraphicsLayer(layerID) {
          var layer = null;
          var oldLayer = null;
          // Create graphics layer and remove any layer that is 
          // there with the same ID
          //---------------------------------------------------
          if (map.getLayer(layerID)) {
              oldLayer = map.getLayer(layerID);
              layer = new esri.layers.GraphicsLayer({ id: "newLayer" });
              map.removeLayer(oldLayer);
              layer.id = layerID;
          }
          else {
              layer = new esri.layers.GraphicsLayer({ id: layerID });
          }

          // Add new layer to map
          //---------------------
          map.addLayer(layer);
          return layer;
      }

      function reorderGraphicsLayer (layerID, index) {
          // Check for invalid indexes
          //--------------------------
          if (index < 0 || (map.graphicsLayerIds != undefined && index > map.graphicsLayerIds.length)) {
              alert("reorderGraphicsLayer failed. Index (" + index + ") is out of range");
              return null;
          }

          var layer = map.getLayer(layerID);
          if (layer == undefined || layer == null) {
              alert("reorderGraphicsLayer failed. Layer (" + layerID + ") not found.");
              return null;
          }
          map.reorderLayer(layer, index);
      }

      function getGraphicsLayer (layerID) {
          var layer = map.getLayer(layerID);
          if (layer == undefined || layer == null) {
              alert("GetGraphicsLayer failed. Layer (" + layerID + ") is undefined or null");
              return null;
          }
          return layer;
      }

      dojo.ready(init);
    </script>
</head>
<body class="tundra">
  <div class="search">
    <span>SEARCH:</span>
    <input type="text" id="address" value="1600 Pennsylvania Ave. Washington, DC" />
    <input type="button" value="Search" onclick="geocodeAddress();" />
    <br />
    <span>
      380 New York Street, Redlands, CA<br />
      1600 Pennsylvania Ave. Washington, DC<br />
      1060 W. Addison Street, Chicago, IL<br />
    </span>
  </div>
  <div id="map"></div>
</body>
</html>

Yes, this code reproduces the issue. Remember, after the second geocode (and map extent change) you need to move the map with your mouse to generate the exception. The buffer geometry and address symbol will not be drawn, as well.

Are you able to reproduce this on your machine?

derekswingley1 · ‎10-04-2011

I can repro...looking into it.

derekswingley1 · ‎10-04-2011

I haven't been able to isolate a specific problem with your code but I was able to tweak the Find an Address sample to do a geocode then buffer and not have it throw the error in IE. Let me know if this code works for you:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Find Address</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/claro/claro.css">
    <style>
      html, body { 
        height: 100%; width: 100%;
        margin: 0; padding: 0;
      } 
      #map{ 
        padding:0;
        border:solid 1px #343642;
        margin:5px 5px 5px 0px;
      }
      #leftPane{
        width:20%;
        border-top: solid 1px #343642;
        border-left: solid 1px #343642;
        border-bottom: solid 1px #343642;
        background-color:#DCDAC5; 
        margin:5px 0px 5px 5px;
        color: #343642;
        font:100% Georgia,"Times New Roman",Times,serif;
        letter-spacing: 0.05em;
      }
     </style>

    <script type="text/javascript">var dojoConfig = { parseOnLoad: true };</script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5"></script>
    <script type="text/javascript">
      dojo.require("esri.map");
      dojo.require("esri.tasks.locator");
      dojo.require("dojo.number");
      dojo.require("dijit.form.Button");
      dojo.require("dijit.form.Textarea");
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      
      var map, locator, gs, bufferGraphics;

      function init() {
        var initExtent = new esri.geometry.Extent({"xmin":-13343554,"ymin":2967656,"xmax":-7473190,"ymax":5902838,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map", { extent: initExtent});
        
        var tms = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
        map.addLayer(tms);

        dojo.connect(map, 'onLoad', function(map) {
          dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
        });
        
        gs = new esri.tasks.GeometryService('http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer');
        
        locator = new esri.tasks.Locator("http://tasks.arcgisonline.com/ArcGIS/rest/services/Locators/TA_Address_NA_10/GeocodeServer");
        dojo.connect(locator, "onAddressToLocationsComplete", showResults);
        
        bufferGraphics = new esri.layers.GraphicsLayer();
        dojo.connect(bufferGraphics, 'onLoad', function() {
          map.reorderLayer(bufferGraphics, 0);
        });
        map.addLayer(bufferGraphics);

        // hit the locator when a link is clicked
        dojo.forEach(dojo.query('a', dojo.byId('leftPane')), function(anchor) {
          dojo.connect(anchor, 'onclick', function() {
            console.log('clicked a link, sending: ', this.innerHTML);
            locate(this.innerHTML);
          });
        });

      }

      function locate() {
        map.graphics.clear();
        bufferGraphics.clear();
        var address;
        arguments.length ? address = arguments[0] : 
          address = dojo.byId('address').value;
        var address = { "SingleLine": address };
        locator.outSpatialReference= map.spatialReference;
        locator.addressToLocations(address,["Loc_name"]);
      }

      function showResults(candidates) {
        var candidate;
        var geom;
        var symbol = new esri.symbol.SimpleMarkerSymbol();
        var infoTemplate = new esri.InfoTemplate("Location", "Address: ${address}<br />Score: ${score}<br />Source locator: ${locatorName}");
        
        dojo.every(candidates,function(candidate){
          // console.log(candidate.score);
          if (candidate.score > 80) {
            // add a point for the graphic
            var attributes = { address: candidate.address, score:candidate.score, locatorName:candidate.attributes.Loc_name };   
            geom = candidate.location;
            var graphic = new esri.Graphic(geom, symbol, attributes, infoTemplate);
            map.graphics.add(graphic);

            // buffer the point
            doBuffer([geom], handleBuffer, errorHandler);
            return false; //break out of loop after one candidate with score greater  than 80 is found.
          }
        });
        if(geom !== undefined){
          map.centerAndZoom(geom,12);
        }
      }

      function doBuffer(geoms, callback, err) {
        var bufferParams = new esri.tasks.BufferParameters();
        bufferParams.distances = [1];
        bufferParams.bufferSpatialReference = map.spatialReference;
        bufferParams.outSpatialReference = map.spatialReference;
        bufferParams.unit = esri.tasks.GeometryService.UNIT_STATUTE_MILE;
        bufferParams.geometries = geoms;
        gs.buffer(bufferParams, callback, err);
      }

      function handleBuffer(bufferResults) {
        // console.log('buffer came back: ', bufferResults);
        var symbol = new esri.symbol.SimpleFillSymbol(
          esri.symbol.SimpleFillSymbol.STYLE_SOLID, 
          new esri.symbol.SimpleLineSymbol(
            esri.symbol.SimpleLineSymbol.STYLE_SOLID, 
            new dojo.Color([5, 95, 158, 0.65]), 
            2
          ), 
          new dojo.Color([145, 209, 255, 0.35])
        );

        // add the buffer graphic
        // then move it back so that address point show up on top
        bufferGraphics.add(
          new esri.Graphic(
            bufferResults[0],
            // new esri.symbol.SimpleFillSymbol()
            symbol
          )
        );
      }

      function errorHandler(err) {
        console.log('buffer failed...');
      }
      dojo.ready(init);
    </script>
  </head>
  <body class="claro">
    <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="sidebar" gutters="false" style="width:100%; height:100%;">
      <div id="leftPane" dojotype="dijit.layout.ContentPane" region="left">
        Enter an input address and the application will use the sample address locator to return the location for 
        street addresses in the United States. 
        <br />
        <textarea type="text" id="address"/>380 New York St, Redlands</textArea>
        <br />
        <button dojotype="dijit.form.Button" onclick="locate()"> Locate</button> 
        <br />
        <a href="#">1060 West Addison, Chicago, IL</a><br />
        <a href="#">380 New York Street, Redlands, CA</a><br />
        <a href="#">1600 Pennsylvania Ave. Washington, DC</a><br />
      </div>
      <div id="map" dojotype="dijit.layout.ContentPane" region="center">
      </div>
    </div>
  </body>
</html>

AaronConnolly · ‎10-05-2011

I haven't been able to isolate a specific problem with your code but I was able to tweak the Find an Address sample to do a geocode then buffer and not have it throw the error in IE. Let me know if this code works for you:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Find Address</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/claro/claro.css">
    <style>
      html, body { 
        height: 100%; width: 100%;
        margin: 0; padding: 0;
      } 
      #map{ 
        padding:0;
        border:solid 1px #343642;
        margin:5px 5px 5px 0px;
      }
      #leftPane{
        width:20%;
        border-top: solid 1px #343642;
        border-left: solid 1px #343642;
        border-bottom: solid 1px #343642;
        background-color:#DCDAC5; 
        margin:5px 0px 5px 5px;
        color: #343642;
        font:100% Georgia,"Times New Roman",Times,serif;
        letter-spacing: 0.05em;
      }
     </style>

    <script type="text/javascript">var dojoConfig = { parseOnLoad: true };</script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5"></script>
    <script type="text/javascript">
      dojo.require("esri.map");
      dojo.require("esri.tasks.locator");
      dojo.require("dojo.number");
      dojo.require("dijit.form.Button");
      dojo.require("dijit.form.Textarea");
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      
      var map, locator, gs, bufferGraphics;

      function init() {
        var initExtent = new esri.geometry.Extent({"xmin":-13343554,"ymin":2967656,"xmax":-7473190,"ymax":5902838,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map", { extent: initExtent});
        
        var tms = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
        map.addLayer(tms);

        dojo.connect(map, 'onLoad', function(map) {
          dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
        });
        
        gs = new esri.tasks.GeometryService('http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer');
        
        locator = new esri.tasks.Locator("http://tasks.arcgisonline.com/ArcGIS/rest/services/Locators/TA_Address_NA_10/GeocodeServer");
        dojo.connect(locator, "onAddressToLocationsComplete", showResults);
        
        bufferGraphics = new esri.layers.GraphicsLayer();
        dojo.connect(bufferGraphics, 'onLoad', function() {
          map.reorderLayer(bufferGraphics, 0);
        });
        map.addLayer(bufferGraphics);

        // hit the locator when a link is clicked
        dojo.forEach(dojo.query('a', dojo.byId('leftPane')), function(anchor) {
          dojo.connect(anchor, 'onclick', function() {
            console.log('clicked a link, sending: ', this.innerHTML);
            locate(this.innerHTML);
          });
        });

      }

      function locate() {
        map.graphics.clear();
        bufferGraphics.clear();
        var address;
        arguments.length ? address = arguments[0] : 
          address = dojo.byId('address').value;
        var address = { "SingleLine": address };
        locator.outSpatialReference= map.spatialReference;
        locator.addressToLocations(address,["Loc_name"]);
      }

      function showResults(candidates) {
        var candidate;
        var geom;
        var symbol = new esri.symbol.SimpleMarkerSymbol();
        var infoTemplate = new esri.InfoTemplate("Location", "Address: ${address}<br />Score: ${score}<br />Source locator: ${locatorName}");
        
        dojo.every(candidates,function(candidate){
          // console.log(candidate.score);
          if (candidate.score > 80) {
            // add a point for the graphic
            var attributes = { address: candidate.address, score:candidate.score, locatorName:candidate.attributes.Loc_name };   
            geom = candidate.location;
            var graphic = new esri.Graphic(geom, symbol, attributes, infoTemplate);
            map.graphics.add(graphic);

            // buffer the point
            doBuffer([geom], handleBuffer, errorHandler);
            return false; //break out of loop after one candidate with score greater  than 80 is found.
          }
        });
        if(geom !== undefined){
          map.centerAndZoom(geom,12);
        }
      }

      function doBuffer(geoms, callback, err) {
        var bufferParams = new esri.tasks.BufferParameters();
        bufferParams.distances = [1];
        bufferParams.bufferSpatialReference = map.spatialReference;
        bufferParams.outSpatialReference = map.spatialReference;
        bufferParams.unit = esri.tasks.GeometryService.UNIT_STATUTE_MILE;
        bufferParams.geometries = geoms;
        gs.buffer(bufferParams, callback, err);
      }

      function handleBuffer(bufferResults) {
        // console.log('buffer came back: ', bufferResults);
        var symbol = new esri.symbol.SimpleFillSymbol(
          esri.symbol.SimpleFillSymbol.STYLE_SOLID, 
          new esri.symbol.SimpleLineSymbol(
            esri.symbol.SimpleLineSymbol.STYLE_SOLID, 
            new dojo.Color([5, 95, 158, 0.65]), 
            2
          ), 
          new dojo.Color([145, 209, 255, 0.35])
        );

        // add the buffer graphic
        // then move it back so that address point show up on top
        bufferGraphics.add(
          new esri.Graphic(
            bufferResults[0],
            // new esri.symbol.SimpleFillSymbol()
            symbol
          )
        );
      }

      function errorHandler(err) {
        console.log('buffer failed...');
      }
      dojo.ready(init);
    </script>
  </head>
  <body class="claro">
    <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="sidebar" gutters="false" style="width:100%; height:100%;">
      <div id="leftPane" dojotype="dijit.layout.ContentPane" region="left">
        Enter an input address and the application will use the sample address locator to return the location for 
        street addresses in the United States. 
        <br />
        <textarea type="text" id="address"/>380 New York St, Redlands</textArea>
        <br />
        <button dojotype="dijit.form.Button" onclick="locate()"> Locate</button> 
        <br />
        <a href="#">1060 West Addison, Chicago, IL</a><br />
        <a href="#">380 New York Street, Redlands, CA</a><br />
        <a href="#">1600 Pennsylvania Ave. Washington, DC</a><br />
      </div>
      <div id="map" dojotype="dijit.layout.ContentPane" region="center">
      </div>
    </div>
  </body>
</html>

Gotchya, I'm not able to reproduce the issue with this code. Strange.

Any ideas as to why this occurs only in IE8, IE7? Is there a race condition in the code I provided that those browsers are unable to handle? Or some other subtly?

Are there any resources online that talk about optimizing performance in the javascript API? You know, like tips and tricks? I took your advice from earlier and removed all the code that created graphics layers on the fly and its seems to be snappier. What else can we do?

derekswingley1 · ‎10-05-2011

Being that it's IE7 and 8, it's bound to be something VML related. Beyond that, I'm not sure. As far as optimizations go, I don't see much room for improvement. Do as little as possible and use simple symbols.

How about asking IE users to install Google Chrome Frame (doesn't require admin rights anymore)?

AaronConnolly · ‎10-05-2011

Being that it's IE7 and 8, it's bound to be something VML related. Beyond that, I'm not sure. As far as optimizations go, I don't see much room for improvement. Do as little as possible and use simple symbols.

How about asking IE users to install Google Chrome Frame (doesn't require admin rights anymore)?

I'd love it if our users switched off IE. I think most don't care to change browsers. They just expect your application to work. Which is fair, I guess.