Problem parsing d="Z"

[JorgeFiallega]

Using esri javascript 3.7
I have an application where the DIV where the esri map is going to bind it is hidden to start with.
When the div is shown , the map comes into the default value of 400x400 so I apply
map.resize();
From time to time
I get the following error on the console:
Problem parsing d="Z" (in svg.js:64) which actually freezes the browser.
I have spent 2 days on this issue with all kinds of test, trying to find a pattern. I believe the resize makes it happen more often but a few times I have seen it even when avoiding the resizing.
I also run into this thread
http://forums.arcgis.com/threads/90698-ajax-service-to-add-points-to-graphic-layer
I still cant find a solution.
Any help would be greatly appreciated.

[BenFousek]

In general a map dislikes being hidden/display:none when loaded.

One solution might be to load the map when the target dom node becomes visible.

If your intent is some kind of loading screen you can use dojo/dom-construct destroy() to 'kill' the loading screen. This is what I use for full-page apps.

[HTML]<!-- really doesn't matter where this goes: after opening body tag or right before closing body tag -->
<div id="loading" style="position:absolute;top:0;right:0;bottom:0;left:0;z-index:9999;background:#FFF;">
  <h1>Hold on a second...</h1>
  <h2>your map is loading.</h2>
</div>[/HTML]

//at the end of the loading script
//a short timeout just to give basemap tiles a couple seconds to finish loading
setTimeout(function() {
  domConstruct.destroy('loading');
}, 2000);

I'm not sure if the Problem parsing d="Z" (in svg.js:64) has to do with the map being hidden initially or not. Based on the svg.js and the post you linked, I'd say this is being cased by a feature layer or graphics layer. I can see where loading a feature layer, and while the requests are in progress, the map's visibility or width/height changes might cause an rendering error. Are you loading a feature layer or adding graphics as part of you loading script, prior to and along with the map resize?

If none of the above, share a little more on why the map div is hidden on load or the app's loading progression (map creation, layers added, etc).

[JorgeFiallega]

Ben thanks a lot for the response.
This is an angular application which starts with other data but not displaying the map. After some actions by the user the map needs to show.
Last night I did some more testing and you are right on your comments. I was not able to replicate just resizing the map or just adding a graphic to a graphic layer, but the moment I put both together it absolutely breaks after a few hits.

function(){
  $scope.map.resize();
  $scope.map.reposition(); 
 ...
  var gra = new esri.Graphic(geometry, symbol2, '', '');
  $scope.map.graphics.add(gra);
  $scope.map.centerAndZoom(geometry, 8);
}

And I basically find no way to hook the map to the div size.

I still dont understand how you are suggesting to do it. If I start with a style of display none, when I do

var myMap = new esri.Map('map');

esri, injects the styles inline into the div, and since ti is display none it puts the default values of 400x400.
So wether I wait or not to bind the map to the div, I dont see how it will ever get the values of the div.

[BenFousek]

Create the map as you were and add the graphics after the map's display has been changed.

[JorgeFiallega]

that is the whole problem. When the map display has changed, I have to call map.resize(), and add some graphics to the layer.
I really dont find a solution for this.

[JorgeFiallega]

I decided to try the following code

function initMap(){

    esriConfig.defaults.map.height = 600;
    esriConfig.defaults.map.width = 623;      



        var myMap = new esri.Map('map');
        var urlAerial = "http://gisweb.miamidade.gov/ArcGIS/rest/services/MapCache/MDCImagery/MapServer";
        var tiled = new esri.layers.ArcGISTiledMapServiceLayer(urlAerial);

        myMap.addLayer(tiled);
        
        $rootScope.graphicLayer  = new esri.layers.GraphicsLayer();
        myMap.addLayer($rootScope.graphicLayer);

        
        $rootScope.map = myMap;
        
      }

      dojo.ready(initMap);

So I do not do a resizing of the map or add any graphics. I am just changing the default configuration for height and width.
It seems to work, but from time to time I get a 404 on tile like

http://gisweb.miamidade.gov/ArcGIS/rest/services/MapCache/MDCImagery/MapServer/tile/8/140605/110499

At that Point I get: Problem parsing d="Z"
and the map does not load.

[BenFousek]

Despite the map being display:none on load, set the map's width and height with css.

Create the map with your init function, but don't add layers. Then use whatever function you're using to set the map's display to block to add the layers and graphics after the map's display has been changed.