nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Image to Real World Size CALCULATION

michaelpoa

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

Find more posts tagged with

Accepted answers

michaelpoa

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&colon;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

All comments

mleahy_cl

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

michaelpoa

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&colon;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

michaelpoa

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?

michaelpoa

@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

michaelpoa

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?

michaelpoa

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.

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).

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.