topic Re: TextSymbol not appearing in Internet Explorer? in ArcGIS JavaScript Maps SDK Questions

TextSymbol not appearing in Internet Explorer?

KC — Wed, 06 Aug 2014 14:47:01 GMT

Maybe it's just me, but since I've contacted ESRI and they can't figure it out either, I'm throwing this out there in case someone has experienced this and can shed some light on the subject:

With some TextSymbol labeling code I am working on, I have discovered that when I view my work in Internet Explorer (11), the labels do not show up. They show up in Chrome and Firefox. I also see the same thing when I use the Points for labeling sample: When I copy and paste the source code for this sample into a HTML page and view it on my web server, the labeling does not appear for me in just IE. However, when I view ESRI's live sample in IE, the labels DO show up. My coworker also experiences the same when viewing these on her computer in IE.

After contacting ESRI Technical Support, we tried looking at the IE Developer Console etc, but no errors were reported when running the page. Also even though I do not see the TextSymbol labels show up when I view my copy of the Points for labeling sample, the ESRI tech had no problem viewing the labels viewing the same page hosted on my external web server. Because they were not able to reproduce the issue on their end, I couldn't get an incident ticket created.

So, anybody got an idea what may be going on given the above? Is it some kind of strange security setting in my LAN that enables us to view TextSymbols in IE on ESRI's site but not on the same code served out of my web server? Something else to try to help troubleshoot this?

Thank you for your time,

Kirstin

Re: TextSymbol not appearing in Internet Explorer?

TimWitt2 — Wed, 06 Aug 2014 14:50:45 GMT

Hey Kristin,

can you share your application? This would make it easier to investigate.

Tim

Re: TextSymbol not appearing in Internet Explorer?

RobertScheitlin__GISP — Wed, 06 Aug 2014 15:03:28 GMT

Kirstin,

I took the esri sample Points for labeling | ArcGIS API for JavaScript‌ and deployed it on my IIS development machine and opened it in IE 11 and I had no issue seeing the label. I would start by going to "Internet Options" > Advanced tab and click the "Reset" button under "Reset Internet Explorer settings" as a test to see if something is just out of wack with your IE setup.

Re: TextSymbol not appearing in Internet Explorer?

KC — Wed, 06 Aug 2014 15:09:09 GMT

Hi Tim,

My application isn't ready for public consumption, but the same issue happens for me when using ESRI's Points for labeling sample. Here's my copy of the same thing, but I'm guessing you will not have any issues viewing the generated TextSymbol labels in IE since ESRI reported they didn't have any problems with that page (but I still have IE issues when viewing the page within my LAN, I guess...)

Re: TextSymbol not appearing in Internet Explorer?

RobertScheitlin__GISP — Wed, 06 Aug 2014 15:11:24 GMT

Kirstin,

Yep your link worked for me in IE11 too.

Re: TextSymbol not appearing in Internet Explorer?

TimWitt2 — Wed, 06 Aug 2014 15:14:13 GMT

Kirstin,

Is by any chance your compatibility view on? When I turn the compatibility view off it works.

Tim

Re: TextSymbol not appearing in Internet Explorer?

RobertScheitlin__GISP — Wed, 06 Aug 2014 15:14:52 GMT

Tim,

You are exactly right. You can tell from the zoom in/out (being square and not rounded) that the page is running in compatibility mode.

Kirstin,

You need to check your IE "Compatibility View Settings" and make sure you uncheck "Display intranet sites in Compatibility View"

Re: TextSymbol not appearing in Internet Explorer?

KC — Wed, 06 Aug 2014 15:23:07 GMT

Hi Robert,

I Reset as you suggested, "Deleted personal settings", restarted my computer, opened IE11, chose "Don't use recommended settings" for "Set up Internet Explorer 11", didn't enable and add-ons, but still am experiencing the no-TextSymbol issue.

Re: TextSymbol not appearing in Internet Explorer?

RobertScheitlin__GISP — Wed, 06 Aug 2014 15:24:06 GMT

Kirstin,

Se my last EDITED response.

Re: TextSymbol not appearing in Internet Explorer?

KC — Wed, 06 Aug 2014 15:26:34 GMT

Hi Tim,

I went to "Compatibility View settings", unchecked "Display intranet sites in Compatibility View", but still having the issue.

Re: TextSymbol not appearing in Internet Explorer?

KC — Wed, 06 Aug 2014 15:29:22 GMT

Even with the "Display intranet sites in Compatibility View" unchecked, my zoom +/- buttons are still not rounded...

Re: TextSymbol not appearing in Internet Explorer?

RobertScheitlin__GISP — Wed, 06 Aug 2014 15:31:35 GMT

Kirstin,

Is your website url listed in the Compatibility View settings dialog like I posted earlier?

Re: TextSymbol not appearing in Internet Explorer?

RobertScheitlin__GISP — Wed, 06 Aug 2014 15:35:32 GMT

Kirstin,

You can force your html page to not use Compatability mode by adding this to the header in the HTML code:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Re: TextSymbol not appearing in Internet Explorer?

KC — Wed, 06 Aug 2014 15:59:40 GMT

Robert,

That line works for me and my IE9 coworker in the ESRI sample and the code I was working on. This probably works best for us (since it would probably be a hassle to get all of my internal users to change their compatibility settings for the ubiquitous IE browser we all have on our machines here)

Thank you!

Re: TextSymbol not appearing in Internet Explorer?

KeithAnderson — Fri, 10 Jul 2015 15:40:17 GMT

Hi Kirsten

Any solution to this. Just ran into It.

Thanks

Keith Anderson

Re: TextSymbol not appearing in Internet Explorer?

RobertScheitlin__GISP — Fri, 10 Jul 2015 15:44:13 GMT

Keith,

Does the marked answer not work for you?

Re: TextSymbol not appearing in Internet Explorer?

KeithAnderson — Fri, 10 Jul 2015 15:48:47 GMT

Robert

The marked answer does not work for me.

Nor does toggle Compatiablity Mode on/off

Using the LabelLayer example in my code.

The LabelLayer code on ESRIs API site works fine in IE11.

Keith

Re: TextSymbol not appearing in Internet Explorer?

KeithAnderson — Sat, 11 Dec 2021 18:51:19 GMT

Robert

Here is my example of what is happening....

The code below is straight off ESRI's site.
Copied directly into an HTML page it works with IE11, Chrome and FF.

Removing the statesRenderer and only displaying the labelsRenderer does not work in IE11...but does display in Chrome and FF.

Any suggestions/comment are grateful.

Keith

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="https://community.esri.com//js.arcgis.com/3.13/esri/css/esri.css">
    <style>
        html, body, #map {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
    </style>

    <script src="//js.arcgis.com/3.13/"></script>
    <script>
        var map;

        require([
          "esri/map",
          "esri/geometry/Extent",
          "esri/layers/FeatureLayer",

          "esri/symbols/SimpleLineSymbol",
          "esri/symbols/SimpleFillSymbol",
          "esri/symbols/TextSymbol",
          "esri/renderers/SimpleRenderer",

          "esri/layers/LabelLayer",

          "esri/Color",
          "dojo/domReady!"
        ], function (
          Map, Extent, FeatureLayer,
          SimpleLineSymbol, SimpleFillSymbol, TextSymbol, SimpleRenderer,
          LabelLayer,
          Color
        ) {
            // load the map centered on the United States
            var bbox = new Extent({ "xmin": -1940058, "ymin": -814715, "xmax": 1683105, "ymax": 1446096, "spatialReference": { "wkid": 102003 } });
            map = new Map("map", {
                extent: bbox
            });

            var labelField = "STATE_NAME";

            // create a renderer for the states layer to override default symbology
            //var statesColor = new Color("#666");
            //var statesLine = new SimpleLineSymbol("solid", statesColor, 1.5);
            //var statesSymbol = new SimpleFillSymbol("solid", statesLine, null);
            //var statesRenderer = new SimpleRenderer(statesSymbol);
            // create a feature layer to show country boundaries
            var statesUrl = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3";
            var states = new FeatureLayer(statesUrl, {
                id: "states",
                outFields: [labelField]
            });
            //states.setRenderer(statesRenderer);
            map.addLayer(states);

            // create a text symbol to define the style of labels
            var statesLabel = new TextSymbol().setColor("#666");
            statesLabel.font.setSize("14pt");
            statesLabel.font.setFamily("arial");
            var statesLabelRenderer = new SimpleRenderer(statesLabel);
            var labels = new LabelLayer({ id: "labels" });
            // tell the label layer to label the countries feature layer
            // using the field named "admin"
            labels.addFeatureLayer(states, statesLabelRenderer, "{" + labelField + "}");
            // add the label layer to the map
            map.addLayer(labels);
        });
    </script>
</head>
<body>
    <div id="map"></div>
</body>
</html>