AnsweredAssumed Answered

Problem drawing graphic points in MSIE browsers

Question asked by fishingcone on Jul 3, 2013
Latest reply on Jul 12, 2013 by fishingcone
Hello,
I'm trying to implement an application to simply draw a map and put some graphic points on it, but am having a frustrating time with the MSIE browsers.  I'm seeking to implement this using ArcGIS JS API V3.4.  (Note.. I'm a newbie at full app development with this JS API.. and w/ using the forum.)

I would expect that this problem is familiar to many, but I have not seen it described as such.  The app should behave as follows:  From a list of items, when clicking on one of the items (say Item A), it should:
    1) open the new window (or re-draw it if open);
    2) draw the map;
    3) put on some number of lat/long based points (usually from about 1 to 20 points) associated with Item A.

Then, if one clicks on Item B it should simply:
    1) clear & re-paint the window for Item B;
    2) draw a new map for Item B;
    3) draw the new set of points for Item B.

I've found that this app works great on all browsers I've tested.. excpet MSIE where it behaves as follows:   For Item A it does *everything* OK.   However, if one clicks on Item B, and all subsequent items, it does not do step 3 above.. i.e. it *does not draw the points* (unless one does a refresh on the window)!!   If one does a 'refresh' (i.e. 'ctrl-R') on the window.. then it adds the points OK.

Now, this is app is intended for the 'general user'.. and I don't want to require them to do 'reloads' in order to use our application (!!), so I'm really hoping for a solution on this.

I've tested this in MSIE 8, 9, and 10 browsers.. all have the same problem.  And, yes, I've tried different variations of the <meta.. tag such as:
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
and..   <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9">
and..   <meta http-equiv="X-UA-Compatible" content="IE=7">
and..   <meta http-equiv="X-UA-Compatible" content="IE=7, IE=10">
and..   <meta http-equiv="X-UA-Compatible" content="IE=9, IE=10">
and..   <meta http-equiv="X-UA-Compatible" content="IE=9">
and..   <meta http-equiv="X-UA-Compatible" content="IE=10">

and.. I've tried taking out the <meta..  > line entirely.. all have no effect on this problem.

I've also tried adding an *additional* map.resize(); operation in the .js file itself; however, and during one session it appeared to solve the problem on IE 9 (not 10).. but later on in an entirely new session the problem continued on IE 9.

For anyone interested, here are some code excerpts.. which I assume will be sufficient to examine the problem..

Calling program (.php) called after clicking on Item A, B, etc..:

<html> <?php include 'include/infomap_header_1.php' ?> <?php   // some more php code... ?>  <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">   <!--The viewport meta tag is used to improve the presentation and behavior of the samples  on iOS devices-->   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">  <title>RMIS Infomap Service - Release Group Detail</title>    <script type="text/javascript">     // some javascript code which builds 'locations' array for infomap.js module ..   </script>   <style>  mapDiv {  padding: 0; } </style>    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/nihilo/nihilo.css">   <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css">   <link rel="stylesheet" type="text/css" href="/styles/infomap.css">    <script>var dojoConfig = { parseOnLoad: true };</script>   <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/"></script>   <script type="text/javascript" src="include/infomap.js"></script> </head>   <body class="nihilo">   <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%; height:100%; margin: 0;">      <!-- some additional divs & php code, etc ...  -->      <div id="mapDiv" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">     </div>      <!-- some additional divs & php code, etc ...  -->    </div>   <?php include 'include/infomap_footer.php' ?> </body> </html>



Map drawing module (infomap.js, complete) as included in the module above:

dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.layout.TabContainer"); dojo.require("esri.map"); dojo.require("esri.tasks.geometry");  var map;  function init() {   // Set map extent so that the basepoint is in lower center.  This is based on the idea that most   // salmonid recovery sites (if any), will tend to be northward from the RL site or hatchery (if any).   var lat_min = lat_basepoint - 3.0;   var lat_max = lat_min + 7.0;   var lon_min = lon_basepoint - 6.0;   var lon_max = lon_min + 12.0;   if (num_locations == 0) {    lat_min = 34.0; lat_max = 59.0; lon_min = -140.0; lon_max = -108.0;  }   var initExtent = new esri.geometry.Extent({"xmin":lon_min,"ymin":lat_min,"xmax":lon_max,"ymax":lat_max,"spatialReference":{"wkid":4326}});   map = new esri.Map("mapDiv",{     extent:esri.geometry.geographicToWebMercator(initExtent)   });            //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(map) {     //Clear & add new graphics once the map loads     map.graphics.clear();     drawCWTPoints();                //resize the map when the browser resizes     dojo.connect(dijit.byId('mapDiv'), 'resize', map, map.resize);     //map.resize();   });  }  function drawCWTPoints(){   //Add CWT points to the map from locations array   var infoTemplate = new esri.InfoTemplate("${location_name}", "  LC Type: ${location_type}<br /> Coordinate: (${rmis_latitude}, ${rmis_longitude})<br /> Description: ${location_long_name}");   for (var i = 0; i < num_locations; i++) {     var pt = new esri.geometry.Point({"x":locations[i][3],"y":locations[i][2]," spatialReference":{" wkid":4326}});     if (locations[i][0]=='Hatchery') {       var sym = new esri.symbol.PictureMarkerSymbol("images/dot_yellow1.png",20,20);     } else if (locations[i][0]=='Release Site') {       var sym = new esri.symbol.PictureMarkerSymbol("images/dot_green1.png",20,20);     } else {       var sym = new esri.symbol.PictureMarkerSymbol("images/dot_red1.png",20,20);     }     var attr = {"location_name":locations[i][4],"location_type":locations[i][0],"rmis_latitude":locations[i][2],"rmis_longitude":locations[i][3],"location_long_name":locations[i][5]};     var graphic = new esri.Graphic(esri.geometry.geographicToWebMercator(pt),sym,attr,infoTemplate);     map.graphics.add(graphic);   }    }  dojo.addOnLoad(init);


So, many thanks to any and all for looking into this.  Regards,
--FishingCone

Outcomes