javascript - How to add a text inside a circle in Mapbox Gl Js - Stack Overflow

admin管理员组

文章数量:1406177

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?

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?

• javascript
• mapbox

Share Improve this question Follow asked Jun 25, 2019 at 21:56 user2643810user2643810

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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 pletely 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)

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

A bit late to the party

本文标签： javascriptHow to add a text inside a circle in Mapbox Gl JsStack Overflow