AnsweredAssumed Answered

Showing a number on a circle

Question asked by alanmervitz on Jun 20, 2017
Latest reply on Jun 21, 2017 by alanmervitz

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

Outcomes