customize symbol in arcgis javascript for rendering

1004
2
Jump to solution
03-28-2019 07:31 AM
MRReddy
Occasional Contributor

Hi

I used below code to draw a red color circle

var PendingSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 15, new esri.symbol.SimpleLineSymbol(), new dojo.Color([255, 0, 0, 1]));

var BRenderer = new SimpleRenderer(PendingSymbol);

fservice.setRenderer(BRenderer);

I was looking is it possible to keep a letter inside the circle

Thanks

0 Kudos
1 Solution

Accepted Solutions
MRReddy
Occasional Contributor

I did it in this way

function generateSVGURL(number) {

let prefix = 'data:image/svg+xml;base64,';

let svgStr = '<svg xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="8" fill="#000000"/>' +

'<text x="4" y="8" font-family="Verdana" font-size="8pt" fill="#FFFFFF" dy="0.35em">' + number + '</text></svg>';

return prefix + btoa(svgStr);

}

var symbol = new PictureMarkerSymbol({

url: generateSVGURL("A"),

width: 12,

height: 12

});

var BRenderer = new SimpleRenderer(symbol);

fservice.setRenderer(BRenderer);

View solution in original post

2 Replies
RobertScheitlin__GISP
MVP Emeritus

Currently no. The only option you have is to add the layer a second time to the map and user a TextSymbol as the symbol for the second layer.

0 Kudos
MRReddy
Occasional Contributor

I did it in this way

function generateSVGURL(number) {

let prefix = 'data:image/svg+xml;base64,';

let svgStr = '<svg xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="8" fill="#000000"/>' +

'<text x="4" y="8" font-family="Verdana" font-size="8pt" fill="#FFFFFF" dy="0.35em">' + number + '</text></svg>';

return prefix + btoa(svgStr);

}

var symbol = new PictureMarkerSymbol({

url: generateSVGURL("A"),

width: 12,

height: 12

});

var BRenderer = new SimpleRenderer(symbol);

fservice.setRenderer(BRenderer);