Community

Background or highlight on textSymbol

15902
29
01-19-2011 05:50 AM
JasonMiller1
by
New Contributor
‎01-19-2011 05:50 AM
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?
0 Kudos
29 Replies
OrenGal
by
New Contributor III
‎01-06-2015 01:36 AM

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
by
New Contributor III
‎01-06-2015 09:37 AM

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

RahulMetangale2
by
New Contributor II
‎05-11-2015 03:09 AM

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");        
});
LabelLayer.html.zip
BrandonFlessner
by
Occasional Contributor
‎06-04-2015 12:38 PM

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

0 Kudos
DJurgella
by
New Contributor III
‎06-02-2015 09:23 AM

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
by
New Contributor III
‎06-18-2015 12:32 PM

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.

0 Kudos
TracySchloss
by
Frequent Contributor
‎10-01-2015 09:25 AM

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;

   }

0 Kudos
KellyHutchins
by Esri Frequent Contributor
Esri Frequent Contributor
‎10-01-2015 10:36 AM

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>
0 Kudos
TracySchloss
by
Frequent Contributor
‎10-01-2015 11:12 AM

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

0 Kudos
KellyHutchins
by Esri Frequent Contributor
Esri Frequent Contributor
‎10-01-2015 11:17 AM

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

0 Kudos