IE 7 throws error, firefox does not

TerryGiles · ‎11-15-2010

I have a series of anchor tags in a panel next to my map, each the name of a person. The map contains just the ESRI street map service and points in the map's graphicslayer that are the person's location (not dynamic, just hard coded x,y).

When you click one of the name <a> tags, it should zoom the map to their location and display the info window. This works great in Firefox, but IE 7 does 2 things -
the graphics disappear from the map &
if you try to pan the map or zoom out it throws an error about 'illegal string in Vector 2d' (see attached).

Any idea what's causing this and how to fix it (other than not using IE...)?

note - I added a demo version of html page to this post. Try it in IE - click on Person 1 in the left and it will work. Now click on Person 2 and you'll notice the graphic is gone and if you try to pan you'll get the error.. The Esri forums do not allow for uploading .htm files so rename it from .txt to .htm and give it a try.

Thanks, TG

sample html <a> tag -

<a href ='' title='some name' onclick='clickLink(1);return false;' >some name</a>


        //in my init function, the maps extent changed handler is set using 
        dojo.connect(map, 'onExtentChange', Extent_Change);

        function clickLink(id) {
            //generic handler for all of the links in the student list

            map.infoWindow.hide();

            var graphic;

            dojo.forEach(map.graphics.graphics, function (g) {
                if (g.attributes["ID"] == id)
                {
                    graphic = g;
                }
            });

            //tmpGraphic and bolClickLink are global in scope
            tmpGraphic = graphic;
            bolClickLink = true;
            map.centerAndZoom(graphic.geometry, map.getNumLevels()-3);
        }



        function Extent_Change(ext, delta, bolLevel,lod) {
            var e = new Object;

            if (bolClickLink) {
                e.graphic = tmpGraphic;
                e.screenPoint = map.toScreen(tmpGraphic.geometry);
                e.mapPoint = tmpGraphic.geometry;
                graphicClick(e);

            }

            bolClickLink = false;

        }

        function graphicClick(evt) {

            map.infoWindow.setTitle("Flat Stanley");
            map.infoWindow.setContent(evt.graphic.attributes["Name"] + "<br/>" + evt.graphic.attributes["Place"]);
            map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));

        }

Anonymous User · ‎11-15-2010

Original User: pforbess

Terry,

Go to jslint.com, copy and paste your code into the box, and hit the JSLint button.

You will see tons of suggestions - not all of them are relevant. But it mentions several variables that are not initialized.

I did this to find a problem where IE7 was behaving different from Firefox. For me, it was simply putting 'var' in front of a certain variable name, and suddenly it all worked in IE7.

TerryGiles · ‎11-16-2010

Paul,

Thanks for the suggestion. I ran it through JSLint but it didn't help me figure out what's going on. I started removing pieces of code and have it down to pretty much nothing and it still happens. The code below just has one anchor tag and a map in the page and I'm getting the same behavior as before - 1st time it works, the 2nd time you click the link, graphics disappear & it throws the 'invalid string in vector 2D' error if you try to pan/zoom out.

Any other thoughts?

Thanks,
Terry

<!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=EmulateIE7" />

    <title> Demo </title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.0/js/dojo/dijit/themes/tundra/tundra.css" />


     <style type="text/css">
      html, body {
        height: 100%; width: 100%; margin: 0;
      }
      body{
        background-color:white; overflow:hidden;
        font-family: "Trebuchet MS";
      }

      #mapDiv
      {
        height: 100%; width: 100%; margin: 0;
      }

      </style>

    <script type="text/javascript">
        var djConfig = {
            parseOnLoad: true
        };
    </script>

    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.0">
    </script>

    <script type="text/javascript">
        dojo.require("esri.map");


        //global for the Map
        var map;

        //globals for various map services
        var PhotoMap = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/I3_Imagery_Prime_World_2D/MapServer", { id: "Photo" });

        function init() {

            map = new esri.Map("mapDiv");
            map.addLayer(PhotoMap);
        }



        function clickLink() {
            //generic handler for all of the links in the student list

            var pt = new esri.geometry.Point(getRandomCoord('x'), getRandomCoord('y'), new esri.SpatialReference({ wkid: 4326 }));
            var sms = new esri.symbol.SimpleMarkerSymbol();
            
            var graphic = new esri.Graphic(pt, sms);
            
            map.graphics.add(graphic);
            map.centerAndZoom(pt, map.getNumLevels() - 3);


        }



        function getRandomCoord(axis) {
            switch (axis) {
                case 'x':
                    return (Math.random() * -179);
                case 'y':
                    return (Math.random()* 80) ;
                default:
                    return -20.0;
            }
        }

        //show map on load
        dojo.addOnLoad(init);


    </script>
  </head>
  
  <body class="tundra">
  
          <a href ='' title='' onclick='clickLink();return false'>click me</a><br/>
  
          <div id="mapDiv" ></div>

  </body>

</html>

Anonymous User · ‎11-16-2010

Original User: lowgas

well, since you say it is working on the first click, i dont see how this is it, but the only thing i notice is your Graphics constructor only has 2 of the 4 required parameters.

http://help.arcgis.com/EN/webapi/javascript/arcgis/help/jsapi_start.htm

maybe that has something to do with it, maybe not.

TerryGiles · ‎11-17-2010

Thanks for the suggestion on the graphics constructor, but that does not fix the problem either. I added attributes and an infoTemplate

            var attr = { "XCoord": pt.x, "YCoord": pt.y};
            var info = new esri.InfoTemplate("title","Latitude: ${YCoord} <br/> Longitude: ${XCoord}");

            var graphic = new esri.Graphic(pt, sms, attr, info);

but still get the same behavior.

On a side note, if anyone from ESRI is reading, are all 4 parameters required when creating a graphic? The help says it is but also says

A Graphic can contain geometry, a symbol, attributes, or an infoTemplate.

The wording on that, at least to me, implies some optionality. Also if you look at the ESRI samples several only use a geometry and symbol when creating graphics.

Thanks again for the suggestion, Terry

Anonymous User · ‎11-17-2010

Original User: lowgas

well, i dont know the solution, and this post i found is kind of old, but take a look at the last comment in the link... maybe that is what is going on....

http://www.sitepen.com/blog/2007/03/27/ajaxworld-and-sxsw-talks-on-dojogfx/

TerryGiles · ‎11-17-2010

Thanks for the link; hopefully that error has been fixed in dojo by now.

Here's some more fun I've discovered -

I set displayGraphicsOnPan to false on my map and tried again. The graphic still disappears the 2nd time, but if I zoom out 2 levels (not 1 but 2) the graphic appears and panning the map works correctly without error. This magic zoom out trick doesn't work if I don't set displayGraphicsOnPan to false though.

Just weird...

I've also tried adding a graphics layer to the map and putting the graphics there instead of in map.graphics but it's still the same.

I've tried using map.CenterAt(pt); map.setLevel(12);
instead of map.centerAndZoom(pt,12)
but that resutls in no graphics being added.

Here's my work around for the time being..

            if (dojo.isIE) {
                map.centerAndZoom(pt, zoomLevel);
                map.setLevel(zoomLevel -2 );
                map.setLevel(zoomLevel);
            }
            else {
                map.centerAndZoom(pt, zoomLevel);
            }

hopefully I can find something better as this slows the map down while downloading tiles 2x..

Anonymous User · ‎11-17-2010

Original User: lowgas

heh. zooming with esri + js + dojo has been a not so fun challenge for me this last month or so.....

had a similar problem with unexpected things happening when i zoomed... so switched to adding code on the onExtentChange event... that fixed some, not all of my problems... then, just to fix a small annoyance i was getting during pan, i turned the dojo connection to onExtentChange off during the start of a pan, then back on when the pan was finished..... and it corrected all my other problems... i still dont see the connection, but it saved me likely days of debugging and trying to figure out what is going on buried deep inside the dojo/esri js.

good luck with your issue, hope you get it sorted.

TerryGiles · ‎11-17-2010

Final post on this I swear!

Fixed it - issue is with the SimpleMarkerSymbol, not sure what and not something I can fix. I switched my graphics to use a PictureMarkerSymbol instead and works great.

Also, I did find more info on whether or not all 4 parameters are required when creating a Graphic. According to the Graphics topic in the API Concepts, not all 4 are required -

Graphics are not required to have all of the above items, and no one item is required

Hope this helps someone else,

Terry

Anonymous User · ‎05-04-2011

Original User: hbostic

Has anyone ever determined the true cause of this error, rather than this work around?