Map Tiles Show Gaps or Artifacts When Zooming
Environment
| Product | Progress® Kendo UI® for Angular Map |
Description
I notice gaps, blank areas, or distorted tile regions when I zoom a Tile Layer in the Kendo UI for Angular Map. The artifact can appear across the Map or at the edge of a group of tiles.
Cause
The Map renders raster images that the configured tile provider returns. A failed or invalid tile response, a tileSize mismatch, CSS scaling, fractional dimensions, or the browser rendering environment can cause or expose a visible artifact.
Solution
Use the following checks to determine whether the source is the tile provider, application CSS, or browser rendering environment:
-
Open the browser developer tools and inspect the network requests that occur while you zoom. Confirm that every tile request returns a successful response and a valid image. Record failed URLs, response status codes, and provider error messages.
-
Confirm that the
tileSizeinput matches the image size returned by the tile provider. The Map uses256pixels by default. -
Remove CSS
transform, browser scaling, and fractional dimensions from the Map element and its parent elements. Reproduce the issue with the Map in a container that uses whole-pixel dimensions. -
Test the same page in another supported browser and in a clean browser profile. Compare the browser zoom level, operating-system display scale, and GPU or hardware-acceleration setting.
-
Disable hardware acceleration only as an isolation test, then restart the browser and reproduce the issue. If the artifact disappears, record the browser version, graphics driver information, and display scale.
-
Reproduce the issue with the same
urlTemplatein a minimal application.
If the issue persists, contact Kendo UI for Angular support. Include the tile provider, Map package version, @progress/kendo-charts version, browser version, and affected URL pattern.