Adjusting Icon Size in Mapbox Based on Zoom Level and Pitch

Question

I am a beginner with Mapbox. While the size of objects such as buildings on the map is changed by the zoom level and pitch, the regular icons do not change their size, making them difficult to see when there are many icons.

Therefore, I am trying to display icons that change in size just like the objects on the map.

First, I learned the calculations for how the display of objects changes depending on the zoom level by referring to this and this, and I made the icon sizes change in the same way. This was successful.

// calculate resolution
const metersPerPixel = getMetersPerPixel(viewport.zoom, lat);

const heightPixels = heightMeters / metersPerPixel;
const widthPixels = widthMeters / metersPerPixel;

However, when I changed the pitch of the viewpoint (it had been set to 0 until now), there was a discrepancy between the sizes of the objects and the icons again.

image

I tried to incorporate the distance between the viewpoint and the icon's position, which changes due to the pitch, into the icon size calculation, but it didn't work well.

// calculate resolution
const metersPerPixel = getMetersPerPixel(viewport.zoom, lat);

// distance between viewpoint and icon
const cameraFloorCoord = getCameraFloorCoord(viewport.zoom, viewport.pitch, viewport.bearing, viewport.latitude, viewport.longitude);
const distanceFactor = getDistance({latitude: lat, longitude: long}, cameraFloorCoord) / 1000;

// add distance values to resolution
const metersPerPixelCorrected = metersPerPixel + distanceFactor;

const heightPixels = heightMeters / metersPerPixelCorrected;
const widthPixels = widthMeters / metersPerPixelCorrected;

Questions:

1. Does anyone know how to solve this problem, or are there any reference materials available?
2. Is what I am trying to do not common?

If it seems difficult for me to achieve, I am considering whether I should display the icon images using a raster layer.