How to use circle-translate to move a geojson circle 50% of its dynamic radius

Question

I have a Mapbox layer where I've got multiple GEOJson features with the exact same co-ordinates (so they stack on top of eachother).

To prevent the issue of them being stacked, I wish to use the circle-translate option to move each circle away from the other one. If each circle was 20px wide, this would be easy as I could move one 10px to the left and the other 10px to the right.

My issue is that the radius of each circle is generated based on the value of the feature, so some of are bigger than others. Therefore I need the translate value to be 50% of the circle's diameter.

Is there a way to do this?

Here is the code for my layer

const LNG = {
  name: 'LNG',
  id: 'lng-markers',
  showDetailsOnHover: true,
  source: {
    type: 'geojson',
    data,
  },
  type: 'circle',
  paint: {
    'circle-color': '#E74133',
    'circle-translate': [-10, -10],
    'circle-radius': [
      'interpolate',
      ['exponential', 1],
      ['number', ['get', 'LNG']],
      0,
      7,
      10,
      10,
      100,
      15,
      1000,
      20,
      10000,
      25,
      100000,
      30,
      1000000,
      35,
      10000000,
      40,
      100000000,
      45,
    ],
  },
  opacity: 70,
  checked: true,
  offset: { bottom: [0, -10] },
  childLayers: [
    {
      id: 'lng-markers__props',
      type: 'symbol',
      filter: ['>', `${ 'LNG' }`, 0],
      source: 'lng-markers',
      layout: {
        'text-field': `{${ 'LNG' }_en}`,
        'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
        'text-size': 12,
      },
      paint: {
        'text-color': '#FFFFFF',
        'text-translate': [-10, -10],
      },
    },
  ],
};

Steve Bennett Steve Bennett · Accepted Answer · 2018-07-07T11:40:46

This would be really straightforward if circle-translate supported data-driven styling. You would simply use the same expression, but with values half the size.

Alas, it doesn't.

You may have to look at modifying your GeoJSON data before it gets added to the map.

How to use circle-translate to move a geojson circle 50% of its dynamic radius

1 Answers