Background or highlight on textSymbol

JasonMiller1 · ‎01-19-2011

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?

OrenGal · ‎01-06-2015

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

OrenGal · ‎01-06-2015

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

RahulMetangale2 · ‎05-11-2015

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");        
});

BrandonFlessner · ‎06-04-2015

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.)

DJurgella · ‎06-02-2015

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.

NathanaelVaughan · ‎06-18-2015

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.

TracySchloss · ‎10-01-2015

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;

}

KellyHutchins · ‎10-01-2015

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>

TracySchloss · ‎10-01-2015

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

KellyHutchins · ‎10-01-2015

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