Scale symbols on zoom so that they stay in metric size

[dennemark]

Hi,
I want to scale symbols so that they scale within the metric system. Zooming in and out they would still have the same size on the map. It would work a bit like "circle-pitch-scale": "map".

I think the following code should work

const earthRadius = 6378137
const tileSize = 512

function getPseudometersPerPixelResolution(zoom: number){
  return (Math.PI * 2 * earthRadius) / tileSize
}
const meters = 1 // the meters on the map
const imageSize = 256 // should be pixels of icon-symbol image
...
'icon-size': [ 'interpolate', ['exponential', 2], ['zoom'],
                              0, meters  / (getPseudometersPerPixelResolution(0) * imageSize),
                              22, meters  / (getPseudometersPerPixelResolution(22) * imageSize) ,
]

What we do is: we calculate the size in meters at zoom 0 and zoom 22. since zoom increases by exponentially, this interpolates smoothly.
However the meters will be wrong, since mercator is distorted. We therefore need to introduce mercator scale factor.

const earthRadius = 6378137
const tileSize = 512

+function getMercatorScale(latitude: number) {
+ return 1 / Math.cos((latitude * Math.PI) / 180)
+}
+map.setGlobalStateProperty('mercatorScale', getMercatorScale(map.getCenter().lat))
+map.on('move', (e) => {
+    map.setGlobalStateProperty('mercatorScale', getMercatorScale(map.getCenter().lat))
+  })
 ...
function getPseudometersPerPixelResolution(zoom: number){
  return (Math.PI * 2 * earthRadius) / tileSize
}
const meters = 1 // the meters on the map
const imageSize = 256 // should be pixels of icon-symbol image
...
'icon-size': [ 'interpolate', ['exponential', 2], ['zoom'],
+                              0, [
+                                '*',
+                               ['/', 100, ['global-state', 'mercatorScale']],
+                                meters / getPseudometersPerPixelResolution(0) * imageSize,
+                              ],
+                              22, [
+                                '*',
+                               ['/', 100, ['global-state', 'mercatorScale']],
+                                meters / getPseudometersPerPixelResolution(22) * imageSize,
+                              ],
]

Now my question is, since mercator scale is dependent of map longitude, can we get it somehow in the expression similar to zoom? I wouldn't know how right now.
With gloabal-state this only works well on close zoom. If we see continents, there will be distortion, if center is in africa and a symbol is scandinavia.

[HarelM]

I don't think I have a good idea how to solve this to be honest.
As I said in other thread, maybe using image source is a more appropriate for this, not sure.
You could also use a custom layer, but from a style perspective this is currently not possible, unfortunately.

[dennemark]

Ok, then I will not claim that my symbols are in meters :)
Will update my reply with proper global-state solution.
Might be still handy for others :)

[HarelM]

Definitely, thanks for sharing!