Image to Real World Size CALCULATION

[michaelkdev]

Hi. I'm trying to figure out how to scale an image to the real world using visualVariables.

VisualVariables:
{
type: "size",
field: "WIDTH",
valueUnit: "meters"
},

Graphic A:

• latitude: 51.27498953565823
• longitude: 4.334665991886453
• width: 100
  
  

Graphic B:

• latitude: 70.4059597
• longitude: -22.488634
• width: 100

Both images have a width of 100 (in meters). The image is a base64 string with ratio 1x1 (1px).  And using visualVariables I would think these 2 images would have the same width/distance being 100 in meters or a scale taking the image ratio of 1x1 into account.

Can someone help me to calculate the correct scaled width based on geodesic and planar formulas?

Take 1. The width of graphicA would be something like 200 to get 100m and graphicB would have a width close to 400 to have a real width in meters of 100.

Thanks in advance

Gr

[mleahy_cl]

Are you doing this in a web map with a web mercator basemap?  I think if I understand the docs correctly, the size specified in the visual variable will be relative to the planar coordinates of the map the map view's spatial reference.  Web mercator, which nominally uses metres, will have a scale factor that gets increasingly exaggerated as you move towards the poles.

The measurement tool I believe is giving you geodesic measurements (i.e., the actual real-world ground distance, not measured in planar coordinates).

If you put your two graphics at the same latitude, they should have the same size.  If you position them somewhere along the equator, I think they will appear to be same width you specify in the visual variables.

If that proves to be the case, then I think specifying the symbol size this way will only work if you either use a local projected coordinate system for the map view, or perhaps there is a convenient way in arcade to convert the desired size to planar coordinate size (worst case, maybe use an equation that takes latitude into account to adjust the size value by scale factor).

[michaelkdev]

Thanks!

Considering this image. This could be the correct way of thinking

So Lets break this down 

• latitude: 51.27498953565823
• width of the symbol: 1 (in meters) - using visualVariables
• image ratio width 1px

Step 1 Calculate the Scale Factor:

SF = 1 / cos(radians(51.27498953565823)) = 0.6255832662967687

Step 2 Calculate the Actual True Width:

ATW = Desired True Width / SF = 1 / 0.625583  = 1.5985

Using 1.59 as new scaled width. The actual width on my codepen measure tool is 0.75 meters.

[michaelkdev]

Using a different latitude: 70.4059597 and calculating the ATW. I get 2.98 Real Width. Using this width instead of 1. The size I get with the measuring tool is also 0.75m

Is Arcgis doing something special with the visualVariables here?

[michaelkdev]

 @AnneFitz do you have an idea why 1px is translated to 0.75 meters keeping the calculations above in mind.

I'm using CIM symbol with visualVariable size WIDTH and scaleX 1

[michaelkdev]

When using a simple marker instead of CIM with a base64 image. It's working with some distortion due to map projection I guess

Using simple marker:
https://codepen.io/michaelk95/pen/rNRpvLG

Using CIM marker: 

The base64 Image:

All images are 3/4 of the original size?

[michaelkdev · Accepted solution]

The problem is the SIZE property of the CIM symbol. Now it's correct

This is the CIM renderer

{
        type: "simple",
        symbol: {
          type: "cim",
          data: {
            type: "CIMSymbolReference",
            primitiveOverrides: [{
              type: "CIMPrimitiveOverride",
              primitiveName: "symbol-layer-1",
              propertyName: "ScaleX",
              valueExpressionInfo: {
                type: "CIMExpressionInfo",
                title: "Size override",
                expression: "1",
                returnType: "Numeric"
              }
            }],
            symbol: {
              "type": "CIMPointSymbol",
              "symbolLayers": [{
                "type": "CIMPictureMarker",
                primitiveName: "symbol-layer-1",
                "enable": true,
                "anchorPoint": {
                  "x": 0,
                  "y": 0
                },
                "anchorPointUnits": "Relative",
                "dominantSizeAxis3D": "Y",
                "billboardMode3D": "FaceNearPlane",
                "invertBackfaceTexture": true,
                size: 1,
                scaleX: 1,
                "textureFilter": "Picture",
                "tintColor": [
                  255,
                  255,
                  255,
                  255
                ],
                "url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdj+L+U4T8ABu8CpCYJ1DQAAAAASUVORK5CYII="
              }]
            }
          },
        },
        label: "ships",
        visualVariables: [{
            type: "rotation",
            field: "ROTATION",
            rotationType: "geographic"
          },
          {
            type: "size",
            field: "WIDTH",
            valueUnit: "meters"
          },
        ]
      };

You should think the size property would override the size property of the CIM symbol? But It's not, when removing the size property of the CIM symbol It works. Can you explain this? Thanks

[mleahy_cl]

Do you have a codepen of the working sample?  I'd be interested to have a look.