FeatureLayer not showing image in Internet Explorer 8 or 9

[JoseSousa]

Dear ArcGIS Javascript API Team,

I have configured a secured MapService with a single layer (Picture Marker Symbol) using the proxy page from Esri.

I have configured everything as told on the Javascript documentation about the proxy and if I use the mapservice as an ArcGISDynamicMapService it works fine and the proxy is triggered correctly.

When I create a FeatureLayer pointing to the map service layer and add it to the map, I have realized that Internet Explorer 8 or 9 cannot show the images (Base64). The proxy page is being triggered and I believe is missing something in the response code.

Google Chrome shows perfectly well all symbology.

Can please someone provide me guidance on this?

Cheers,
José Sousa

[JoseSousa]

Hi all,

If it is needed I can place here the proxy page. But I can assure it is equal to the one provided by Esri.

Cheers,
José

[HemingZhu]

Dear ArcGIS Javascript API Team,

I have configured a secured MapService with a single layer (Picture Marker Symbol) using the proxy page from Esri.

I have configured everything as told on the Javascript documentation about the proxy and if I use the mapservice as an ArcGISDynamicMapService it works fine and the proxy is triggered correctly.

When I create a FeatureLayer pointing to the map service layer and add it to the map, I have realized that Internet Explorer 8 or 9 cannot show the images (Base64). The proxy page is being triggered and I believe is missing something in the response code.

Google Chrome shows perfectly well all symbology.

Can please someone provide me guidance on this?

Cheers,
José Sousa

Try to change your image format before add your featurelayer somthing like yourFeatureLayer.setImageFormat("png24"). It might do the trick, please let me konw if it works.

[JoseSousa]

Hi,

The FeatureLayer does not have any method like that.

This behaviour is strange because using the proxy page with Google Chrome it works just fine. Using the url "http://localhost/...../MapServer/0" as an ArcGISDynamicMapService works both in IE8 (or 9) and Chrome.

Just when I use the url as an FeatureLayer is that IE8 and 9 cannot show the picture.

If I use the MapServer without being secured it works just fine ...

In Javascript init method the proxy is registered as:

            esri.config.defaults.io.proxyUrl = 'myproxypageurl';
            esri.config.defaults.io.alwaysUseProxy = true;

Hope Esri Inc. gives me a little help on this.

José

[JoseSousa]

More details:

The returned image on the Google Chrome is:
<image fill-opacity="0" stroke="none" stroke-opacity="0" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" x="-15" y="-15" width="29" height="29" preserveAspectRatio="none" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAdCAYAAABWk2cPAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAm5JREFUSInt1juIVUccx/HP7Ipi1C1ECxNQECsN9nYqoo2BTZPsrmipRTQQJcXaaOMDZRUfRVxIkWb3Jo2NpewqSEgtighpdvFRZLUQQ5p4x2Lmrsdzz7mP3cLGH/zhzOt8Z+b/n//MCp9AKz5Di4psxnfYg53YgAH8g8e4i+nAs2VDI5sj5zGCwYouX2XbjwtNpgKnu8FroTGBbgWGuk49aTBwGMORo4FGX9DIT6+Y2EDoEbio26wbZjryZeBKT9C8wolHhL240QfwOWYxnIoTkRdVK/4ImgPmFsJ9/IDtfUC3YRxnsTJVTUYelH1chl4IDP2La3jaB1AGjUqEralqXQ7EI5XQyBZpaz3Bz9K56Fe78PcHqMBYLEV0caUj0tnzFw4uAUhyxy/SGcoalDbgchV0T+tjBieWCIVv26v21UG/bn38vwxgzfgdxUIR+pELL+F7NPGbFJGdNCm5ZAa/tzdvrIMuajV+xKpcPtkDdAxr8kTvtDc366ALUh5t6xW7AOFdYVyzvXmhDvqoBf1P8vqID9vbTb9KmWgmjy/pYR30Hg60Cmey9aqT2eCb9ubZOug0zmGgIfmnqLcdgGtL5VKyfYc/KqGBuSaNwNgXFT8uT6KTiuMjjQHmK6EZPC5F/tB6vM7167tAOvR9Ezhd7l+GzkeOYeom4Xiuv9kFel06YqW+EcdCaZVt0AxuRDaNMjHa4yV+KFtBEafqXg+VySFwNfJSult7fa609EZaYX/PlQxuRP7Md+ziDdRBzZgCcbxqS3uCZvA8DsUUDKPYLV0MrTy9ICWVWSlK57pMrDu0AJ/DxWzL1id54b8HE02PRtYIss0AAAAASUVORK5CYII=" transform="matrix(1.00000000,0.00000000,0.00000000,1.00000000,15.00000000,15.00000000)"></image>


In IE8 or 9 is:
<rect style="left: 367px; top: 456px; width: 28px; height: 28px;">
        <imagedata/>

Without securing the service the images are shown.
In IE8 or 9 is:
<rect style="left: 0px; top: 0px; width: 29px; height: 29px;" unselectable="on">
        <imagedata unselectable="on"/>

Cheers,
José

[JoseSousa]

Hi,

This is the my page code:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="Map.aspx.cs" Inherits="CPA_Web.Secure.Map" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server"></asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">   
    <div id="map" region="center" style="overflow: hidden; padding: 0px; margin: 0px"></div>
    <script type="text/javascript">
        djConfig = { parseOnLoad: true };
    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis?v=2.1"></script>
    <script type="text/javascript">
        dojo.require("esri.map");
        dojo.require("esri.layers.FeatureLayer");

        var map;
        var AgsEventsUrl;
        var resizeTimer;

        function init() {
            esri.config.defaults.io.proxyUrl = 'http://CPAVM/CPA/Secure/proxy.ashx';
            esri.config.defaults.io.alwaysUseProxy = true;

            var initExtent = new esri.geometry.Extent({ "xmin": 19598934.677, "ymin": -4662883.306, "xmax": 19869556.047, "ymax": -4491611.673, "spatialReference": { "wkid": 102100} });

            map = new esri.Map("map", { extent: initExtent, logo: false });

            dojo.connect(map, 'onLoad', this, _mapLoadHandler);

            var operationsLineLayer = new esri.layers.FeatureLayer('http://CPAVM/ArcGIS/rest/services/Watchers/CPAWatchers/MapServer/0',
                                                                  {
                                                                      mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
                                                                      outFields: ["*"]
                                                                  });
            map.addLayer(operationsLineLayer);
        }

        function _mapLoadHandler(theMap)
        {
            dojo.connect(window,
                         'onresize',
                         function ()
                         {
                             // Resize the map if the div is resized
                             clearTimeout(resizeTimer);
                             resizeTimer = setTimeout(function()
                                                      {                                                      
                                                         setHeight('map', 170);
                                                         if (map)
                                                         {
                                                             map.resize();
                                                             map.reposition();
                                                         } 
                                                      },
                                                      500);
                         });
        }

        dojo.addOnLoad(init);
    </script>
    <script language="JavaScript" type="text/javascript">
        setHeight('map', 170);
    </script>
    <noscript>
        <h4>
            Your browser doesn't support or doesn't have javascript enabled.
        </h4>
    </noscript>
</asp:Content>

Is there any problem?

Cheers,
José

[JoseSousa]

If I change the symbology to SimpleMarkerSymbol works ....

An interesting fact is that when using a FeatureLayer with secured services (proxy page) and PictureMarkerSymbol (embed image inline) IE cannot display it. I even tried to used a layer from a FeatureServer.

If I open 2 IE browers with the below settings and try to use the viewer it works fine. 
- The first one with the viewer;
- The second one with the REST page. Navigate through the map service layer or featureserver layer and login for authentication.

After I become authenticated on the rest page I can use the viewer normally. If I logout from the REST page it stops working ...

Hope this helps going further...

José

[Mindaugas_ižas]

I had same problem, this is what I have made:
Basicaly the IE gets wrong url without proxy, you have to add it manually.
      dojo.forEach(layers, function(layer)
    {

        if (dojo.isIE) {
        if(layer.renderer.infos){
         for (var i=0; i<layer.renderer.infos.length; i++){
        var url1=layer.renderer.infos.symbol.url;
//         alert(url1);
        var url2="http://"+server+"/proxy.jsp?";
//             alert(url2);
             var url3=url2+url1;
         layer.renderer.infos.symbol.url=url3;
        }
        }

   }
worked for me

[JoseSousa]

Hi,

It seems to make sense.
I'll try it when I have a chance.

Thanks,
José

[AdministratorGlitrevannverket_]

I had same problem, this is what I have made:
Basicaly the IE gets wrong url without proxy, you have to add it manually.
      dojo.forEach(layers, function(layer)
    {

        if (dojo.isIE) {
        if(layer.renderer.infos){
         for (var i=0; i<layer.renderer.infos.length; i++){
        var url1=layer.renderer.infos.symbol.url;
//         alert(url1);
        var url2="http://"+server+"/proxy.jsp?";
//             alert(url2);
             var url3=url2+url1;
         layer.renderer.infos.symbol.url=url3;
        }
        }

   }
worked for me

I have the same issue, it works in Google Chrome, but not in IE9.
Where will I insert the code above in my javascript code to get it work in IE9 ?
I use "same" code as José Sousa does above in this thread.

Br
Christian