-2

I've been trying to get the same layer as you can see here. But I can't find a right type and options for it. For now I was only using a circle, but I can't give a different padding to X and Y axis.

This is the expected layer (For unclustered-point)

enter image description here

And this is my code:

    map.addLayer({
    id: 'unclustered-point',
    type: 'circle',
    source: 'places',
    filter: ['!', ['has', 'point_count']],
    paint: {
        'circle-color': '#486fd1',
        'circle-radius': 20,
    }
});

map.addLayer({
    id: 'unclustered-point-count',
    type: 'symbol',
    source: 'places',
    filter: ['!', ['has', 'point_count']],
    layout: {
        'text-field': ['get', 'price'],
        'text-font': ['DIN Offc Pro Bold'],
        'text-size': 11,
    },
    paint: {
        'text-color': "#fff",
    }
});

And this is what I have at the moment:

enter image description here

MrUpsidown
  • 21,592
  • 15
  • 77
  • 131
rediz
  • 53
  • 5

1 Answers1

-1

Not sure but I think this can work.

'circle-radius': {
        'base': 1,
        'stops': [[0, 10], [20, 30]] 
    },
nisnym
  • 31
  • 10
  • Nice try, but this is for zoom If I'm 100% right. So the padding applies accordingly to the zoom level – rediz Apr 22 '23 at 15:17