Duplicate Large Icon showing on iPad

[Stuart]

When I view my KendoUI map control on my iPad I see 2 marker images for each marker - one large and the other small.

On every other browser the map looks OK, but for some reason on iPad I see an additional large marker behind.

Is there a way I can remove the large marker on ipad?

Cheers

[Stuart]

To give more information - I am using 'bing maps' in my KendoUI Map Control.

Also  for comparison I have attached a pic of the how the Map Markers should actually look.

Cheers

[Stuart]

After investigation I have discovered that on IOS retina devices a background image is loaded into the span containing the marker.

@media only screen and (-webkit-min-device-pixel-ratio:1.2), only screen and (min-device-pixel-ratio:1.2) {
    .k-map .k-marker {
        background-image: url(Bootstrap/markers_2x.png)
    }
}

After thinking I had fixed it by removing the background via CSS I have discovered that the marker 'moves' to a different location each time you change the zoom level.

So I assume then that the background image is used due to the marker not displaying correctly on IOS/Retina device?

Cheers

 

 

 

 

 

 

 

 

[Stefan]

Hello, Stuart,

Thank you for reporting this.

I can confirm that this is an issue with the current version of Kendo UI Map.

I created an issue in our GitHub repository and forwarded it to our developers for fixing. You can track its progress at:

https://github.com/telerik/kendo-ui-core/issues/3772

For now, there is no available workaround, if one is found it will be added to the GitHub issue for reference. Still, the issue is not observed with all of the themes. Please check if using another Kendo UI theme is an acceptable option.

Additionally, I updated your Telerik points for bringing this to our attention.
Regards,
Stefan
Progress Telerik

[Stuart]

I have managed to fix the issue by moving the marker layer down 25 pixels.

This is the distance between the bottom of the marker span (background image) and marker icon. It now aligns correctly :)

You need to ensure you know the exact marker layer div within the scroll container

For example if your layer is the first child:

  if (navigator.userAgent.match(/(iPhone|iPod|iPad)/i)) {
                // KendoUI Map Fix 
                // Move all of the markers down 25 pixels - only on IOS devices
                $('.k-layer').first().css('top', '25px');
            }

Alternatively if you have many layers you can target the specific layer with nth-child

e.g.

// Target 5th Child map layer

$('.km-scroll-container .k-layer:nth-child(5)').css('top', '25px');

Cheers 

[Stefan]

Hello, Stuart,

Thank you for the provided workaround, I will link it to the issue so more people from the community can benefit from it.

I also added additional points for sharing the workaround with us.

Regards,
Stefan
Progress Telerik