Showing a number on a circle

1928
9
06-20-2017 06:03 PM
AlanMervitz
New Contributor

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

Tags (1)
0 Kudos
9 Replies
AnthonyRyanEQL
Occasional Contributor III

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

AlanMervitz
New Contributor

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

0 Kudos
AnthonyRyanEQL
Occasional Contributor III

Alan,

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

0 Kudos
JordanBaumgardner
Occasional Contributor III

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.

0 Kudos
AlanMervitz
New Contributor

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

0 Kudos
JordanBaumgardner
Occasional Contributor III

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

0 Kudos
AlanMervitz
New Contributor

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

0 Kudos
ThomasSolow
Regular Contributor

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.

0 Kudos
AlanMervitz
New Contributor

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

0 Kudos