CODEWITHSUNDEEP
javascriptmapbox
user2643810
user2643810

Reputation:

How to add a text inside a circle in Mapbox Gl Js

I want to add a Text inside a circle, which is my marker, but it doesnt show anything.

I have two layers, one for the circles and one for the text.

I am trying to get it to work by adding a text-field property, but nothigs gets rendered.

This are my two layers, the one where im trying to add the text is the second one called singles-count

      map.addLayer({
        id: "singles",
        // type: "symbol",
         type: "circle",
        source: "users",
        filter: ["!has", "point_count"],
        // layout: { 
        //   "icon-image": "custom-marker"
        // },
        paint: {
            'circle-radius': {
                'base': 10,
                'stops': [[5, 20], [15, 500]]
            },
            'circle-color': '#ddffc8',
          }
      });
    });


    map.addLayer({
        id: "singles-count",
        type: "symbol",
        source: "users",
        filter: ["has", "singles_count"],
        layout: {
        "text-field": "XXX",
        "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
        "text-size": 12
        }
      });

But, it doesnt render the XXX nor throws any error, Any ideas?

Upvotes: 5

Views: 4958

Answers (3)

Youp Bernoulli
Youp Bernoulli

Reputation: 5655

A bit late to the party 😄 but:

  1. AddLayer needs a value for SourceLayer if it is a vector layer
  2. The text-field property needs to be an actual property of the feautures on the Source & SourceLayer

Upvotes: 0

Vlad Sereda
Vlad Sereda

Reputation: 51

There are 3 possible things that could go wrong here:

  • filter: ["has", "singles_count"] results in false for each
    feature and no symbols are being rendered because of that.

  • It seems like you have a pretty big circle radius 'stops': [[5, 20], [15, 500]]. It is possible that the singles layer overlaps singles-count layer completely and the text is actually being rendered but it is under the circle. To fix this you need to specify beforeId parameter of addLayer function like this:

map.addLayer({
        id: "singles-count",
        type: "symbol",
        source: "users",
        filter: ["has", "singles_count"],
        layout: {
        "text-field": "XXX",
        "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
        "text-size": 12
}, 'singles');
  • The font glyphs for ["DIN Offc Pro Medium", "Arial Unicode MS Bold"] can not be found on your map tiles hosting servier. (404 error in networks tab)

Upvotes: 3

user2998034
user2998034

Reputation: 65

Can you make a test case with jsfiddle/codepen? Layers look right but filters might be filtering out all data.

Upvotes: 0

Related Questions