AnsweredAssumed Answered

JavaScript API 3.29 setting font family.

Question asked by waringt on Aug 28, 2019
Latest reply on Aug 29, 2019 by slaviesriaustralia-com-au-esridist

Greetings,

 I'm working on a labeling tool that allows the user to set the font family, size, weight variant and style of label before adding it to the map as a graphic's text Symbol. I can set every one of those properties except for the font family. The font family for thegraphic is always set  to "'Helvetica Neue',Helvetica,Arial,sans-serif" no matter what value I put into the "font.setFamily()" method.

 

I have a couple of questions. First where is an authoritative list of fonts values that can be passed to the "font.setFamily()" method. Next, once you have those values, how do you get a graphic's text symbol to display those fonts?

 

I'm assigning the properties of my font like this:

 

let font = new Font();
font.setVariant(Font.VARIANT_NORMAL);
font.setWeight(Font["WEIGHT_BOLDER"]);
font.setFamily("impact");
font.setStyle(Font["STYLE_OBLIQUE"]);
font.setSize(20);
let textSymbol = new TextSymbol(notes, font, color);
let textJSON  = textSymbol.toJson();
let labelg = new Graphic(graphic.geometry, textSymbol, graphic.attributes);
console.log(labelg.symbol.toJson());
layer.add(labelg);

 

When I check out the console.log of labelg.symbol.toJson() at this point I get :

{size: 15, style: "oblique", weight: "bolder", family: "impact"} . Except for the font size being 15 rather than 20, this is pretty much what I expect.

 

However, when the graphic loads, it is clearly not impact. Upon right clicking on the label in the map and selecting the 'Inspect' menu option to see the HTML of the label in the developer console I see the folowing:

 

<text fill="rgb(0, 0, 0)" fill-opacity="1" stroke="none" stroke-opacity="0" 
stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4"
x="196" y="394" text-anchor="middle" text-decoration="undefined" rotate="0"
kerning="auto" text-rendering="optimizeLegibility" font-style="oblique"
font-variant="normal" font-weight="bolder" font-size="20" font-family="impact,Arial"
dominant-baseline="alphabetic"
transform="matrix(1.00000000,0.00000000,0.00000000,1.00000000,0.00000000,0.00000000)"
fill-rule="evenodd">

    <tspan dy="0" x="196" letter-spacing="1px"
    font-family="'Helvetica Neue',Helvetica,Arial,sans-serif">

        Courier New, 20, B, I
    </tspan>
</text>

 

The 'font-family' property in the text element is set to 'impact,Arial', however it appears to me that the tspan element is the element that actually styles the font in the map. The tspan element's font-family is set to "'Helvetica Neue',Helvetica,Arial,sans-serif". If I change the tspan's font-family property to 'impact' in the developer console then the font family displays correctly in the map.

 

How do I get the tspan's font-family set correctly using the JavaScript API?

 

Thanks, Tyler

Outcomes