I’m having an issue with rendering a polygon from a vector tile source at high zoom levels. I’m using https://github.com/NetTopologySuite/NetTopologySuite.IO.VectorTiles to generate the tiles and have confirmed using a simple vuejs using @mapbox/vector-tile npm package that I see what is expected (a simple 4-edge polygon), so I trust the mapbox vector tiles are generated correctly.

I’ve added 3 different polygon samples I created as individual feature collection in a json file, converted to vector file and rendered using a simple html for azure maps with a single vector tile source plus line/fill layer. The page also renders a tile grid and displays the tile info.

Each sample is just the same polygon but made slightly longer each time. As shown in the images, the rendering gets worse with the size of the polygon.

My gut says the tile generation might be wrong but viewing the tile in a separate vuejs app appears to negate this thought. I could be wrong of course, and it seems implausible to me that such a simple polygon would be a problem for azuremaps/maplibre.

Any ideas what might be wrong please as I’m stuck at this point.

Sample1 seems to render fine:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "id": 1,
        "featureName": "pedestrian"
      },
      "geometry": {
        "coordinates": [
          [
            [
              153.02303214664835,
              -27.47153798017556
            ],
            [
              153.02361397317628,
              -27.472110106801587
            ],
            [
              153.02413908737213,
              -27.471707568508087
            ],
            [
              153.02356566267133,
              -27.471135439790835
            ],
            [
              153.02303214664835,
              -27.47153798017556
            ]
          ]
        ],
        "type": "Polygon"
      }
    }
  ]
}

Sample2 starting to see some rendering issue:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "id": 1,
        "featureName": "pedestrian"
      },
      "geometry": {
        "coordinates": [
          [
            [
              153.02303214664835,
              -27.47153798017556
            ],
            [
              153.0239584480898,
              -27.472482826140364
            ],
            [
              153.02448566274165,
              -27.472082152801704
            ],
            [
              153.02356566267133,
              -27.471135439790835
            ],
            [
              153.02303214664835,
              -27.47153798017556
            ]
          ]
        ],
        "type": "Polygon"
      }
    }
  ]
}

Sample3 pretty bad now:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "id": 1,
        "featureName": "pedestrian"
      },
      "geometry": {
        "coordinates": [
          [
            [
              153.02303214664835,
              -27.47153798017556
            ],
            [
              153.0243377004698,
              -27.472866763505785
            ],
            [
              153.0248843639639,
              -27.47245746377172
            ],
            [
              153.02356566267133,
              -27.471135439790835
            ],
            [
              153.02303214664835,
              -27.47153798017556
            ]
          ]
        ],
        "type": "Polygon"
      }
    }
  ]
}