Duplicate Large Icon showing on iPad

6 posts, 0 answers
  1. Stuart
    Stuart avatar
    5 posts
    Member since:
    Jul 2017

    Posted 14 Nov 2017 Link to this post

    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

  2. Stuart
    Stuart avatar
    5 posts
    Member since:
    Jul 2017

    Posted 14 Nov 2017 Link to this post

    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

  3. Stuart
    Stuart avatar
    5 posts
    Member since:
    Jul 2017

    Posted 15 Nov 2017 Link to this post

    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

     

     

     

     

     

     

     

     

  4. Stefan
    Admin
    Stefan avatar
    2057 posts

    Posted 16 Nov 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Stuart
    Stuart avatar
    5 posts
    Member since:
    Jul 2017

    Posted 17 Nov 2017 Link to this post

    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 

  6. Stefan
    Admin
    Stefan avatar
    2057 posts

    Posted 17 Nov 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top