Problem with PictureMarkerSymbol in IE8

KarenBirgbauer · ‎04-15-2013

I'm having problems getting my PictureMarkerSymbol to show up correctly in IE8. It works fine in Chrome and Firefox, but in IE8 all I get is a white box in the top left corner of the map. Any ideas on why this is happening?

        var point = new esri.geometry.Point(esri.geometry.geographicToWebMercator(new esri.geometry.Point(lat, lon, new esri.SpatialReference({wkid: 4326}))));
        var symbol = new esri.symbol.PictureMarkerSymbol({
                "angle": 0,
                "xoffset": 0,
                "yoffset": 12,
                "type": "picturemarkersymbol",
                "url": "http://www.blahblahblah.com/images/marker.png",
                "contentType": "image/png",
                "width": 32,
                "height": 37
        });
        var graphic = new esri.Graphic(point, symbol);
        var layer = new esri.layers.GraphicsLayer();
        layer.add(graphic);
        map.addLayer(layer);

JohnGravois · ‎04-15-2013

hi karen,

in your code you are passing latitude then longitude in the point constructor. you actually need to pass the longitude (X) first.

new esri.geometry.Point(lat, lon...
//should be
new esri.geometry.Point(lon, lat...

heres an example that works in all major browsers

<!DOCTYPE html>
<html>
  <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>Topographic Map</title>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #map{
        padding:0;
      }
    </style>

    <script>var dojoConfig = {parseOnLoad: true};</script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/"></script>
    <script>
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      
      var map;

      function init() {
       map = new esri.Map("map", {
         basemap : "topo",
         center : [-122.41, 37.75],
         zoom : 14
        });
     dojo.connect(map, "onLoad", addGraphic);
      }
   
   function addGraphic() {
    //don't forget that you add (long, lat) for new point geometries, not (lat, long)
  var point = new esri.geometry.Point(esri.geometry.geographicToWebMercator(new esri.geometry.Point(-122.41, 37.75, new esri.SpatialReference({
         wkid : 4326
        }))));
    var symbol = new esri.symbol.PictureMarkerSymbol({
      "angle" : 0,
      "xoffset" : 0,
      "yoffset" : 12,
      "type" : "picturemarkersymbol",
      "url" : "http://pablotron.org/files/blah.png",
      "contentType" : "image/png",
      "width" : 32,
      "height" : 37
     });
    var graphic = new esri.Graphic(point, symbol);
    map.graphics.add(graphic);
   }
   
      dojo.ready(init);
    </script>
  </head>
  
  <body class="claro">
    <div data-dojo-type="dijit.layout.BorderContainer" 
         data-dojo-props="design:'headline', gutters:false"
         style="width: 100%; height: 100%; margin: 0;">

      <div id="map" 
           data-dojo-type="dijit.layout.ContentPane" 
           data-dojo-props="region:'center'">
     </div>

    </div>
  </body>

</html>