topic Re: Background or highlight on textSymbol in ArcGIS JavaScript Maps SDK Questions

Background or highlight on textSymbol

JasonMiller1 — Wed, 19 Jan 2011 13:50:50 GMT

I have a map set up puts dots on the map, and draws lines connecting the dots to create a route. Each dot has a textSymbol next to it that I'm using to label each dot for the user. The problem is that with all the stuff in the background, it can be hard to read those labels sometimes.

I'm wondering if there's any way to put a background behind the textSymbol to help it stand out. I know about infoWindows, but I'm already using those when you click on the dot to give you more information.

Here's a snippet from my code that runs when it's looping through the route and putting the dots on the map. This is the portion that adds the labels.

...
font = new esri.symbol.Font("10pt", esri.symbol.Font.STYLE_NORMAL,
    esri.symbol.Font.VARIANT_NORMAL,esri.symbol.Font.WEIGHT_NORMAL,"Verdana");
...
var textSymbol =  new esri.symbol.TextSymbol(feature.attributes["LABEL"]).setColor(new dojo.Color([255, 0, 0])).
 setOffset(30, 0).setFont(font).setKerning(true);

var point = new esri.geometry.Point(feature.attributes["NNLL_LONG_DEC"], feature.attributes["NNLL_LAT_DEC"], map.spatialReference);

map.graphics.add(new esri.Graphic(point, textSymbol));
...

Any ideas?

Re: Background or highlight on textSymbol

HemingZhu — Sat, 11 Dec 2021 09:29:25 GMT

I have a map set up puts dots on the map, and draws lines connecting the dots to create a route. Each dot has a textSymbol next to it that I'm using to label each dot for the user. The problem is that with all the stuff in the background, it can be hard to read those labels sometimes.

I'm wondering if there's any way to put a background behind the textSymbol to help it stand out. I know about infoWindows, but I'm already using those when you click on the dot to give you more information.

Here's a snippet from my code that runs when it's looping through the route and putting the dots on the map. This is the portion that adds the labels.
...
font = new esri.symbol.Font("10pt", esri.symbol.Font.STYLE_NORMAL,
    esri.symbol.Font.VARIANT_NORMAL,esri.symbol.Font.WEIGHT_NORMAL,"Verdana");
...
var textSymbol =  new esri.symbol.TextSymbol(feature.attributes["LABEL"]).setColor(new dojo.Color([255, 0, 0])).
 setOffset(30, 0).setFont(font).setKerning(true);

var point = new esri.geometry.Point(feature.attributes["NNLL_LONG_DEC"], feature.attributes["NNLL_LAT_DEC"], map.spatialReference);

map.graphics.add(new esri.Graphic(point, textSymbol));
...
Any ideas?

I am not sure that you could add backgroud to textSymbol. However, you can make it standing out by setting up highlight font, certain angle or decoration (overline or underline). Note: decoration might not work on certain browsers.

Re: Background or highlight on textSymbol

JasonMiller1 — Wed, 19 Jan 2011 20:00:18 GMT

Any idea how to set up the highlight font? I've seen that effect on an esri map that was written using the web ADF version, but not the Javascript version. I've checked out the API for font and for a textSymbol and neither one mentions a highlight property.

Re: Background or highlight on textSymbol

HemingZhu — Thu, 20 Jan 2011 17:07:35 GMT

Any idea how to set up the highlight font? I've seen that effect on an esri map that was written using the web ADF version, but not the Javascript version. I've checked out the API for font and for a textSymbol and neither one mentions a highlight property.

Simulate a highlight property by setting font color to (0, 255, 255) similar to selected feature in ArcMap.

Re: Background or highlight on textSymbol

MarkHoover — Thu, 20 Jan 2011 20:16:58 GMT

That wasn't what he was after, hzhu. He wants something like the 'Halo Mask' found in ArcDesktop. I can't figure out a way to cheat this either, would be a nice feature to have.

Re: Background or highlight on textSymbol

HemingZhu — Fri, 21 Jan 2011 16:07:12 GMT

That wasn't what he was after, hzhu. He wants something like the 'Halo Mask' found in ArcDesktop. I can't figure out a way to cheat this either, would be a nice feature to have.

How about add a rectangle polygon graphic behind the text symbol to simulate the background (caculate the width and length).

Re: Background or highlight on textSymbol

DanNarsavage — Sat, 11 Dec 2021 09:29:27 GMT

Been a long time since this thread was spawned & maybe there's a better way to deal with this by now, but I couldn't find it so I hacked a resolution by adding THREE text graphics for every label I wanted to place in the map: two of them act as a highlight/mask...

First to create the three slightly different symbols:

var TextSymbolJson = {  // This is the main readable label
    "type": "esriTS",
    "color": [0, 0, 0, 255],
    "verticalAlignment": "middle",
    "horizontalAlignment": "center",
    "font": {
        "family": "Arial",
        "size": 16,
        "style": "normal",
        "weight": "bold",
        "decoration": "none"
    }
};

// This one is white, partially transparent, a bit bigger & bolder, and offset south 1 pixel from the main label (1st part of the mask)
var TextHighlightJson1 = Object.create(TextSymbolJson);
TextHighlightJson1.color = [255, 255, 255, 245];
TextHighlightJson1.yoffset = -1;
TextHighlightJson1.font.size = 18;
TextHighlightJson1.font.weight = "bolder";

// This one is just like the one above except offset north 1 pixel (2nd part of the mask)
var TextHighlightJson2 = Object.create(TextHighlightJson1);
TextHighlightJson2.yoffset = 1;

Then to use those symbols ...

for (feature in ListOfFeaturesToLabel) {
      AddNumText = feature.attributes.PROPADDNUM;
      AddNumPoint = feature.geometry.getExtent().getCenter();
      var TS = new esri.symbol.TextSymbol(TextSymbolJson);
      TS.setColor(layerTextColor);
      TS.setText(AddNumText);
      var labelPointGraphic = new esri.Graphic(AddNumPoint, TS);
      var highlightSymbol1 = new esri.symbol.TextSymbol(TextHighlightJson1);
      highlightSymbol1.setText(AddNumText);
      var highlightGraphic1 = new esri.Graphic(AddNumPoint, highlightSymbol1);
      var highlightSymbol2 = new esri.symbol.TextSymbol(TextHighlightJson2);
      highlightSymbol2.setText(AddNumText);
      var highlightGraphic2 = new esri.Graphic(AddNumPoint, highlightSymbol2);
      map.graphics.add(highlightGraphic1);
      map.graphics.add(highlightGraphic2);
      map.graphics.add(labelPointGraphic);      // Make sure to add the main label to the map last so it's on top of its mask
}

Re: Background or highlight on textSymbol

DK5 — Wed, 11 Dec 2013 02:50:38 GMT

Anyone implement the rectangle polygon graphic behind the textsymbol? Wondering how to go about sizing that correctly. Any suggestions?

Re: Background or highlight on textSymbol

JohnGrayson — Wed, 11 Dec 2013 14:33:23 GMT

It's been a while since I tried this, but if you have a Graphic that uses a TextSymbol:

1) call map.toScreen() to get x,y screen coordinates of graphic; you might have to make adjustments based on the symbol.xoffset and symbol.yoffset.

2) call graphic.getDojoShape().getTextWidth() for the width, and graphic.symbol.font.size for the height (you might have to make additional adjustments if size is not pixel based). Then add the desired padding. Finally you might have to make additional offset adjustments if any of the coordinates are outside of the map extent.

3) create screen extent based on x, y, width, height, then call map.toMap() to get back real-world coordinates of bounding box.

I believe there were a few other minor tweaks that were specific to what I was doing in the app, but this is the overall concept.

Re: Background or highlight on textSymbol

MarkusRuottinen — Tue, 06 May 2014 05:32:32 GMT

We also have this same problem. Graphic text is difficult to read on top of background map. This is often needed when showing geocoded address on top of map.

Feature request for JavaScript API . Add halo, backgound and highlight options to textSymbol.

Re: Background or highlight on textSymbol

OrenGal — Tue, 06 Jan 2015 09:36:28 GMT

Run on all texts in the graphic layer and add shadow css to them:

var texts = $("#myGraphicsLayerName text");

$.each(texts, function(index, text) {

$(text).css('text-shadow', 'black 0.1em 0.1em 0.2em');

}

});

Oren

Re: Background or highlight on textSymbol

OrenGal — Tue, 06 Jan 2015 17:37:57 GMT

one line:$("#myLayerId_layer").find('text').css('text-shadow', 'black 0.1em 0.1em 0.2em');

Re: Background or highlight on textSymbol

RahulMetangale2 — Sat, 11 Dec 2021 09:29:30 GMT

I was able to achieve this with following code. Working sample attached along with this post. Code need some enhancement to clear the background on pan and zoom.

//Import on and domConstruct modules
require([      
"dojo/on",                            
"dojo/dom-construct",
      ], function(on, domConstruct)

//Listen for 'graphic-node-add event on label layer or graphics layer
//Create a SVG rectangle and place it before the text node.
on(labels, 'graphic-node-add', function (graphic) {            
var SVGRect = graphic.node.getBBox();          
var rect = document.createElementNS("http://www.w3.org/2000/svg",
"rect");            
rect.setAttribute("x", SVGRect.x);            
rect.setAttribute("y", SVGRect.y);            
rect.setAttribute("width", SVGRect.width);  
rect.setAttribute("height",SVGRect.height);          
rect.setAttribute("fill", "yellow");            
domConstruct.place(rect, graphic.node, "before");        
});

Re: Background or highlight on textSymbol

DJurgella — Tue, 02 Jun 2015 16:23:45 GMT

I combined Rahul Metangale's and Oren Gal's ideas and came up with something that seems to be working well:

on(myLabelLayer, 'graphic-node-add', function (graphic) {

graphic.node.style.textShadow = "1px 1px 1px white, 1px -1px 1px white, -1px 1px 1px white, -1px -1px 1px white";

});

This creates four offset and slightly blurred shadows around each text label and creates a nice halo effect.

Re: Background or highlight on textSymbol

BrandonFlessner — Thu, 04 Jun 2015 19:38:35 GMT

Thanks for the sample! It worked great when the map initially loads up, but produced some funky results once I started panning and zooming. Any ideas on how to remove or redraw the rectangles as the user pans and zooms?

(FYI, I had to change the '<script src="http://js.arcgis.com/3.13/"></script>' to include the 'http:' to get the sample running.)

Re: Background or highlight on textSymbol

NathanaelVaughan — Thu, 18 Jun 2015 19:32:04 GMT

This is wonderful and elegant in Chrome, but does not work in IE - anyone have another suggestion for IE? I attmpted to set the "glow" attribute, but haven't had any luck so far.

Re: Background or highlight on textSymbol

TracySchloss — Thu, 01 Oct 2015 16:25:36 GMT

Did you ever have a resolution to this? I am using a LabelLayer and set a className and a style, but that doesn't work either.

var cityLabelLayer = new LabelLayer({

id: "cityLabels",

className:"cityLabel"

});

CSS:

.cityLabel {

text-shadow: 1px 1px 1px blue, 1px -1px 1px blue, -1px 1px 1px blue, -1px -1px 1px blue;

}

Re: Background or highlight on textSymbol

KellyHutchins — Sat, 11 Dec 2021 09:29:33 GMT

Tracy Schloss the code below works for me and adds a text shadow to the labels:

<!DOCTYPE html>
<html>
<head>
  <title>Create a Map</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
  <style>
    html, body, #mapDiv{
      padding: 0;
      margin: 0;
      height: 100%;
    }
    text[fill="rgb(127, 82, 83)"]{
      text-shadow: 1px 1px #DCE1E3;
    }
  </style>
  
  <script src="http://js.arcgis.com/3.14/"></script>
  <script>


    require([
      "esri/map", 
      "esri/layers/FeatureLayer",
      "esri/layers/LabelClass",
      "esri/symbols/TextSymbol",
      "dojo/domReady!"], function(
        Map, FeatureLayer,
        LabelClass, TextSymbol
      ) {
      var map = new Map("mapDiv", {
        center: [-56.049, 38.485],
        zoom: 3,
        basemap: "dark-gray",
        showLabels: true
      });


      var states = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3",{
        outFields: ["*"]
      });
      map.addLayer(states);




      // Setup label properties (SUB_REGION)
      var statesLabels = new LabelClass({
        labelExpressionInfo: {"value": "{STATE_NAME}"},
        symbol: {
         "type": "esriTS",
         "color": [127,82,83,255],
         "font": {
          "family": "Arial",
          "size": "16px"
         }
        }
      });


      // Apply label info to the feature layer 
      states.setLabelingInfo([statesLabels]);


    });
  </script>


</head>
<body class="claro">
  <div id="mapDiv"></div>
</body>
</html>

Re: Background or highlight on textSymbol

TracySchloss — Thu, 01 Oct 2015 18:12:09 GMT

It doesn't work for me in IE, just Chrome. Unfortunately IE is our default browser.

Re: Background or highlight on textSymbol

KellyHutchins — Thu, 01 Oct 2015 18:17:02 GMT

Text Shadow is only supported for IE10 and 11. Here's a chart that lists support:

http://caniuse.com/#feat=css-textshadow

Haven't tested this but for earlier versions of IE you may want to try the filter approach outlined in this article:

Creating Cross Browser Compatible CSS Text Shadows