topic Re: Showing a number on a circle in ArcGIS JavaScript Maps SDK Questions

Showing a number on a circle

AlanMervitz — Sat, 11 Dec 2021 10:09:21 GMT

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

Re: Showing a number on a circle

AnthonyRyanEQL — Wed, 21 Jun 2017 01:11:58 GMT

Alan,

Esri on their GitHub site have a js cluster code (https://github.com/Esri/cluster-layer-js) you could use. As you zoom in & out of the map the number in the circle changes based on the number of points near that site.

Also,

Other people have done things similar eg. https://github.com/nickcam/FlareClusterLayer

Hope this helps

Re: Showing a number on a circle

AlanMervitz — Wed, 21 Jun 2017 01:24:45 GMT

Hi Anthony,

In my case I'm querying an external data source and need to plot the points manually, e.g. in the image where it shows the number 41, I am getting back a single number rather than 41 individual items that would each be added to the map. I'm unsure by looking at these examples you've provided if they would work in my scenario, I'm guessing they are relying on the layer containing the data itself. Can you let me know?

Thanks,

Alan

Re: Showing a number on a circle

AnthonyRyanEQL — Wed, 21 Jun 2017 03:24:46 GMT

Alan,

It is. We have used this to summate point data relative close to each other (eg. inspection data from Survey123).

Re: Showing a number on a circle

JordanBaumgardner — Wed, 21 Jun 2017 15:35:01 GMT

I think the way you did it is perfectly acceptable. We have done many similar things (overlaying multiple symbols, text, alter colors, ect). The only other way I could think of to do what you want is with a Lable and use the Lable offset to position it directly over the current point.

Re: Showing a number on a circle

AlanMervitz — Wed, 21 Jun 2017 16:01:22 GMT

Thanks for the suggestion - are you referring to the LabelClass? If so, the documentation unfortunately says there is no support for labeling in 2D.

Re: Showing a number on a circle

JordanBaumgardner — Wed, 21 Jun 2017 17:42:07 GMT

I was, and Really? Arrg. This 3.x to 4x has been painful.

Re: Showing a number on a circle

ThomasSolow — Wed, 21 Jun 2017 18:01:19 GMT

Another option would be to create an SVG image with the number in it, translate it from utf8 to base64, and use it as the url for a PictureMarkerSymbol. Something like:

JS Bin - Collaborative JavaScript Debugging

This example won't rotate with the map, though. I don't see anything wrong with the way you did it.

Re: Showing a number on a circle

AlanMervitz — Wed, 21 Jun 2017 18:14:38 GMT

Interesting approach, I'll keep that in mind. Thanks for confirming my approach.

Re: Showing a number on a circle

AlanMervitz — Wed, 21 Jun 2017 18:19:05 GMT

No worries, I'll go with the approach I took in the example, thanks for confirming it's acceptable.