I'm wanting to show a circle with a number on it that represents the number of items that exist at that point. The best I've come up with is to first add a SimpleMarkerSymbol (the circle) followed by a TextSymbol (the text) at the same coordinates. Is this the right approach or is there some other way to go about doing this? Here is what it looks like plus the code and a JS Bin link.
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/symbols/TextSymbol",
"esri/symbols/SimpleMarkerSymbol",
"esri/Graphic",
"esri/geometry/Point",
"dojo/domReady!"
], function(Map, MapView, TextSymbol, SimpleMarkerSymbol, Graphic, Point) {
var map = new Map({
basemap: "streets"
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 4,
center: [15, 65]
});
view.then(function() {
var symbol = new TextSymbol({
text: "41",
font: {
size: 14,
family: "monospace"
},
color: "white",
verticalAlignment: "middle"
});
var textGraphic = new Graphic({
symbol: symbol,
geometry: view.extent.center
});
var circle = new SimpleMarkerSymbol({
color: "black",
size: 25
});
var circleGraphic = new Graphic({
symbol: circle,
geometry: view.extent.center
});
view.graphics.add(circleGraphic);
view.graphics.add(textGraphic);
});
});
</script>
JS Bin on jsbin.com
Thanks,
Alan